/* Already entered this session: never show the gate again, and hide it from
   the very first paint rather than removing it with script, which would flash. */
html.has-entered #velora-splash{display:none !important}

#velora-splash{
    --vs-green:#36736A;
    --vs-cream:#F4EEDF;

    /* TIMING - when each stage begins, measured from page load */
    --k:1;              /* master speed: 1 = as authored, 1.4 = 40% faster */
    --t-vlra:200ms;     /* VELORA letters rise       */
    --t-prod:1150ms;    /* PRODUCTIONS letters rise  */
    --t-rule:2150ms;    /* rule draws left to right  */
    --t-petal:2900ms;   /* petals unfurl             */

  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:var(--vs-green);
}
#velora-splash.vs-done{opacity:0;pointer-events:none;transition:opacity 760ms ease}
  .vs-stage{display:grid;place-items:center;background:var(--vs-green);overflow:hidden}
  .vs-mark{width:min(66%,560px);height:auto;fill:var(--vs-cream);fill-rule:evenodd;overflow:visible}
  .vs-mark *{transform-box:view-box}

  .vs-petal{opacity:0;transform-origin:var(--ox) var(--oy);
    animation:vsPetalIn calc(880ms / var(--k)) cubic-bezier(.17,.84,.3,1) both}
  .vs-petal-wind{transform-origin:var(--ox) var(--oy)}
  .vs-crown{transform-origin:627px 480px}

  .vs-vlra{opacity:0;animation:vsRise calc(760ms / var(--k)) cubic-bezier(.22,.9,.26,1) both}
  .vs-prod{opacity:0;animation:vsRise calc(640ms / var(--k)) cubic-bezier(.22,.9,.26,1) both}

  .vs-rule{transform-origin:378px 891px;transform:scaleX(0);
    animation:vsDraw calc(900ms / var(--k)) cubic-bezier(.62,0,.22,1) both;
    animation-delay:calc(var(--t-rule) / var(--k))}

  @keyframes vsPetalIn{
    from{opacity:0;transform:scale(.5) rotate(var(--unfurl))}
    to  {opacity:1;transform:scale(1) rotate(0deg)}}
  @keyframes vsRise{
    from{opacity:0;transform:translateY(24px)}
    to  {opacity:1;transform:translateY(0)}}
  @keyframes vsDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  .vs-mark.is-out{opacity:0;transform:scale(1.035);
    transition:opacity 760ms ease,transform 1000ms cubic-bezier(.4,0,.2,1)}

  @media (prefers-reduced-motion:reduce){
    .vs-petal,.vs-vlra,.vs-prod{animation:none;opacity:1}
    .vs-rule{animation:none;transform:none}
    .vs-mark.is-out{transition:opacity 400ms ease;transform:none}}


  /* --- enter gate ----------------------------------------------------
     The splash waits for a click instead of dismissing itself. That click is
     what lets the music play: browsers refuse audible sound until the visitor
     has interacted with the page, so an entry gate is the only way to have the
     site arrive WITH sound rather than asking for it afterwards. Benchmarked
     against immersivebags.miumiu.com, which does exactly this. */
  /* Centred with auto margins, NOT translateX(-50%): the entrance keyframes
     animate transform, and an animation overrides a normal declaration - so a
     transform-based centring gets wiped the moment the animation settles,
     dropping the group half its own width to the right. */
  #velora-splash .vs-enter{
    position:absolute;left:0;right:0;margin-inline:auto;width:fit-content;
    bottom:calc(clamp(40px,9vh,86px) + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;align-items:center;gap:18px;
    opacity:0;animation:vsEnterIn 700ms ease 1800ms both}

  #velora-splash .vs-hint{
    display:flex;align-items:center;gap:9px;margin:0;
    color:rgba(248,241,223,.72);
    font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
    font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
  #velora-splash .vs-hint svg{width:16px;height:16px;flex:none}

  #velora-splash .vs-btn{
    min-width:188px;min-height:52px;padding:15px 44px;
    border:1px solid var(--vs-cream);border-radius:999px;
    background:transparent;color:var(--vs-cream);
    font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
    font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
    cursor:pointer;
    transition:background-color 300ms ease,color 300ms ease,transform 160ms ease}
  #velora-splash .vs-btn:hover{background:var(--vs-cream);color:var(--vs-green)}
  #velora-splash .vs-btn:active{transform:scale(.98)}
  #velora-splash .vs-btn:focus-visible{outline:2px solid var(--vs-cream);outline-offset:4px}

  @keyframes vsEnterIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

  @media (prefers-reduced-motion:reduce){
    #velora-splash .vs-enter{animation:none;opacity:1}}