/* CA$H HATS · "Vault" intro. The inline gate in <head> adds html.ci-on before first paint (first home visit in the tab, or a
   reload near the top; html.ci-calm too for reduced motion / Movimiento off).
   A  (ci-on, from first paint)        a hairline ring draws itself and the dial clicks into place.
   B  (ci-go, intro.js, logo decoded)  a crack of light splits the door, the halves swing open, the bag rises into one warm
                                       light, CA$H HATS resolves with the $ landing last, then LOS ÁNGELES · ESTILO SINALOA.
                                       The finished lockup holds 650 ms.
   C  (ci-fly, intro.js)               the black lifts and the drop hero comes alive while the cash goes home:
                                       twin (header word on screen, 420 px and up): bag + letters FLIP onto their twins;
                                       deposit (ci-dep, phones under 420 px): the bag flies home and the letters fall into its
                                       knot, the green $ last, then the header bag settles with a gold glint (site.css ci-catch).
   Calm (ci-calm): opacity only, the stage fades in, holds and the black fades out.
   Transform and opacity only. Without JS the overlay never shows; if intro.js fails, the gate's timer clears it. */

.ci{display:none}
html.ci-on .ci{display:block}
html.ci-lock,html.ci-lock body{overflow:hidden}
/* the scrollbar the lock hides comes back as padding, so the header sits exactly where it will once the lock lifts */
html.ci-lock{padding-right:var(--ci-sbw,0px)}
html.ci-on .brand__bag,html.ci-on .brand__word{opacity:0}
html.ci-on .amb{animation-play-state:paused}

.ci{
  --D:min(76vw,44vh,340px);
  --F:calc(var(--D) * .1);
  --c-tan:#D6A05A;--c-g:#4CCA29;--c-g2:#66D946;--c-w:#F1ECE2;
  --e-out:cubic-bezier(.23,1,.32,1);   /* site --ease-out */
  --e-io:cubic-bezier(.77,0,.175,1);   /* site --ease-io */
  --e-door:cubic-bezier(.32,.72,0,1);  /* drawer curve: the doors are visibly moving within ~60 ms */
  position:fixed;inset:0;z-index:1000;overflow:hidden;
  touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
@media (min-width:960px){.ci{--D:min(34vw,48vh,420px)}}

.ci__bg{position:absolute;inset:0;background:radial-gradient(75% 60% at 50% 42%,#0e0e10 0%,#08080a 55%,#040405 100%)}
.ci__stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--D) * .02);padding-bottom:4vh}
.ci__dial{position:relative;flex:none;width:var(--D);height:var(--D)}
.ci__fx,.ci__fx>*,.ci__bag{position:absolute}
.ci__fx{inset:0}

/* ---------- the door ---------- */
/* phase A shows ONE plate (no seam); at ci-go it swaps, in the same frame, for two half plates that swing open */
.ci__plate,.ci__face{border-radius:50%;
  background:radial-gradient(circle at 50% 36%,#151517 0%,#0d0d0f 48%,#09090b 78%,#070708 100%);
  box-shadow:inset 0 calc(var(--D) * -.06) calc(var(--D) * .12) rgba(0,0,0,.55)}
.ci__plate{inset:0;opacity:0}
.ci__door{top:0;width:50%;height:100%;overflow:hidden}
.ci__door--l{left:0;transform-origin:0 50%}
.ci__door--r{left:50%;transform-origin:100% 50%}
.ci__door>*{position:absolute;top:0;left:0;width:var(--D);height:var(--D)}
.ci__door--r>*{left:calc(var(--D) / -2)}
.ci__face{opacity:0}
.ci__arc{border-radius:50%;border:1px solid transparent;transform:rotate(-135deg)}
.ci__door--r .ci__arc{border-top-color:var(--c-tan);border-right-color:var(--c-tan)}
.ci__door--l .ci__arc{border-bottom-color:var(--c-tan);border-left-color:var(--c-tan)}
.ci__ticks{display:block;fill:none;stroke:var(--c-tan);stroke-width:.55;stroke-linecap:round;opacity:0}

/* the drawing tip: a warm glint riding the ring */
.ci__tip{inset:0;opacity:0}
.ci__trail{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,226,170,0) 0deg 292deg,rgba(255,226,170,.65) 359deg,rgba(255,226,170,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 1.5px),#000 100%);
          mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 1.5px),#000 100%)}
.ci__tip i{position:absolute;left:50%;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:radial-gradient(circle,#fff 0,rgba(255,244,220,.95) 14%,rgba(240,200,130,.45) 34%,rgba(214,160,90,.12) 56%,rgba(214,160,90,0) 72%)}
/* the combination index: a green notch the dial clicks into */
.ci__index{left:50%;top:calc(var(--D) * -.052);width:0;height:0;margin-left:-4px;border-style:solid;border-width:6px 4px 0;border-color:var(--c-g) transparent transparent;opacity:0}
/* the crack: a hairline of warm light where the halves meet (a ~2px core inside a soft 28px glow), widening into a beam */
.ci__crack{left:50%;top:-4%;width:28px;height:108%;margin-left:-14px;opacity:0;transform:scaleY(0);
  background:linear-gradient(90deg,rgba(255,236,200,0) 0%,rgba(255,236,200,.06) 30%,rgba(255,240,215,.5) 46%,#fff 50%,rgba(255,240,215,.5) 54%,rgba(255,236,200,.06) 70%,rgba(255,236,200,0) 100%);
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
          mask:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%)}

/* ---------- what the vault holds: one warm light and the bag ---------- */
.ci__glow{inset:-34%;border-radius:50%;opacity:0;transform:scale(.82);
  background:radial-gradient(closest-side,rgba(255,238,210,.24) 0%,rgba(240,202,146,.14) 24%,rgba(214,160,90,.075) 46%,rgba(214,160,90,.028) 70%,rgba(214,160,90,0) 100%)}
.ci__bag{left:13%;top:19.6%;width:74%}
.ci__bag3d{transform-origin:50% 100%;opacity:0}
.ci__img{display:block;width:100%;height:auto}

/* ---------- wordmark: the header's face and weight, so each letter can land on its twin ---------- */
.ci__word{display:flex;align-items:flex-start;margin:0;white-space:nowrap;color:var(--c-w);
  font:800 var(--F)/1 "Display","Display FB","Display FB2",Impact,"Arial Narrow",sans-serif;letter-spacing:0;text-transform:uppercase}
.ci__l{display:block;flex:none;overflow:hidden;padding:.14em 0;margin:-.14em 0 -.14em .3em}
.ci__l:first-child{margin-left:0}
.ci__sp{flex:none;width:.34em}
.ci__g{display:block;transform:translateY(135%)}
.ci__g--d{position:relative;transform:translateY(-135%)}
.ci__dg{color:var(--c-g2)}
.ci__dw{position:absolute;left:0;top:0;color:var(--c-w);opacity:0}

/* ---------- descriptor: where the brand is from. No overflow mask here: it would clip the Á ---------- */
.ci__tag{display:flex;align-items:center;justify-content:center;gap:12px;margin:calc(var(--D) * .045) 0 0;white-space:nowrap;
  font:600 clamp(9.5px,2.7vw,12px)/1.5 "Body","Body FB",system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--c-tan);opacity:0}
.ci__tag span{margin-right:-.3em} /* the last letter's tracking would push the line off centre */
.ci__tag b{color:var(--c-g);font-weight:600}
.ci__rule{display:block;flex:none;width:24px;height:1px;background:currentColor;opacity:.55}
@media (max-width:359px){.ci__rule{display:none}}

/* ---------- skip ---------- */
.ci__skip{position:absolute;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 20px;
  border:0;border-radius:999px;background:transparent;color:rgba(241,236,226,.6);cursor:pointer;
  font:600 .66rem/1 "Body",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.28em;text-transform:uppercase;opacity:0}
.ci__skip:focus-visible{outline:2px solid var(--c-g);outline-offset:-4px}
@media (hover:hover) and (pointer:fine){.ci__skip{transition:color .2s ease}.ci__skip:hover{color:var(--c-w)}}
.ci__defs{position:absolute;width:0;height:0;overflow:hidden}

@keyframes ci-in{from{opacity:0}to{opacity:1}}
@keyframes ci-out{from{opacity:1}to{opacity:0}}

/* =================== A: from first paint =================== */
html.ci-on .ci__plate{animation:ci-in .3s ease both}
html.ci-on .ci__door--r .ci__arc{animation:ci-arcR .4s .04s both}
html.ci-on .ci__door--l .ci__arc{animation:ci-arcL .4s .04s both}
html.ci-on .ci__tip{animation:ci-tip .4s .04s both,ci-tipfade .4s linear .04s both}
html.ci-on .ci__ticks{animation:ci-bezel .48s var(--e-out) .04s both}
html.ci-on .ci__index{animation:ci-in .16s ease .32s both}
html.ci-on .ci__skip{animation:ci-in .4s ease .4s both}

/* the ring is two halves drawn back to back: easeInCubic, then its mirror easeOutCubic, so the speed matches where they meet */
@keyframes ci-arcR{0%{transform:rotate(-135deg);animation-timing-function:cubic-bezier(.32,0,.67,0)}50%,100%{transform:rotate(45deg)}}
@keyframes ci-arcL{0%,50%{transform:rotate(-135deg);animation-timing-function:cubic-bezier(.33,1,.68,1)}100%{transform:rotate(45deg)}}
@keyframes ci-tip{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.32,0,.67,0)}50%{transform:rotate(180deg);animation-timing-function:cubic-bezier(.33,1,.68,1)}100%{transform:rotate(360deg)}}
@keyframes ci-tipfade{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}
@keyframes ci-bezel{0%{opacity:0;transform:rotate(-36deg)}45%{opacity:.62}82%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}100%{opacity:.62;transform:none}}

/* =================== B: the vault opens =================== */
html.ci-go .ci__plate{animation:none;opacity:0}
html.ci-go .ci__face{opacity:1}
html.ci-go .ci__index{animation:ci-out .14s ease both}
html.ci-go .ci__crack{animation:ci-crack .42s both}
html.ci-go .ci__door--l{animation:ci-doorL .4s var(--e-door) .04s both}
html.ci-go .ci__door--r{animation:ci-doorR .4s var(--e-door) .04s both}
html.ci-go .ci__glow{animation:ci-glow .6s var(--e-out) .04s both}
html.ci-go .ci__bag3d{animation:ci-rise .58s var(--e-out) .12s both}
html.ci-go .ci__g{animation:ci-up .42s var(--e-out) both;animation-delay:calc(.3s + var(--i) * 20ms)}
html.ci-go .ci__g--d{animation:ci-drop .34s var(--e-out) .56s both}
html.ci-go .ci__tag{animation:ci-tag .5s var(--e-out) .6s both}

@keyframes ci-crack{0%{opacity:0;transform:scaleY(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  6%{opacity:1}30%{opacity:1;transform:scaleY(1) scaleX(1);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  100%{opacity:0;transform:scaleY(1) scaleX(3.4)}}
@keyframes ci-doorL{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-16%) perspective(700px) rotateY(-58deg)}}
@keyframes ci-doorR{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(16%) perspective(700px) rotateY(58deg)}}
@keyframes ci-glow{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes ci-rise{0%{opacity:0;transform:perspective(900px) translateY(18%) rotateX(30deg) rotateY(-10deg) scale(.86)}
  25%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ci-up{from{transform:translateY(135%)}to{transform:none}}
@keyframes ci-drop{from{transform:translateY(-135%)}to{transform:none}}
@keyframes ci-tag{from{opacity:0;transform:translateY(6px)}to{opacity:.92;transform:none}}

/* =================== C: into the header =================== */
html.ci-fly .ci__fx{animation:ci-fxout .3s var(--e-out) both}
html.ci-fly .ci__bg{animation:ci-out .34s var(--e-io) .1s both}
html.ci-fly .ci__skip{animation:ci-out .14s ease both}
html.ci-fly .ci__tag{animation:ci-tagout .16s ease both}
html.ci-fly .ci__dg{animation:ci-out .26s ease .12s both}
html.ci-fly .ci__dw{animation:ci-in .26s ease .12s both}
html.ci-out .ci{animation:ci-out .26s ease both;pointer-events:none}
/* deposit (phones under 420 px, where the header shows only the bag): the letters fall INTO the bag, so they pass behind
   it; the $ stays green (it is the cash); the black lifts a touch slower under the longer landing */
html.ci-dep .ci__bag{z-index:2}
html.ci-dep .ci__word{position:relative;z-index:1}
html.ci-dep .ci__dg,html.ci-dep .ci__dw{animation:none}
html.ci-dep .ci__bg{animation:ci-out .4s var(--e-io) .12s both}
/* La Corona (the drop hero) comes alive as the cash flies home, never standing unlit under the landing */
html.ci-fly .hero .amb{animation-play-state:running}
html.ci-out .brand__bag,html.ci-out .brand__word{opacity:1} /* skipped or lifted early: the header logo is already under the fading black */
@keyframes ci-fxout{from{opacity:1;transform:none}to{opacity:0;transform:scale(.94)}}
@keyframes ci-tagout{from{opacity:.92}to{opacity:0}}

/* the page settles in as the black lifts (transform only on the photo: it stays painted for LCP);
   the headline arrives a beat later so the flying letters never cross it */
html.ci-land .hero__stage{animation:ci-settle .95s var(--ease-out,cubic-bezier(.23,1,.32,1)) both}
html.ci-land .hero__cta{animation:ci-lift .9s var(--ease-out,cubic-bezier(.23,1,.32,1)) .04s both}
html.ci-land .hero__copy{animation:ci-lift .9s var(--ease-out,cubic-bezier(.23,1,.32,1)) .04s both,ci-in .36s ease .3s both}
/* deposit: the letters rise out of the headline's own spot, so the headline waits until the last of them ($) is past it.
   ci-dep stays on html as long as ci-land does, so this delay never snaps back mid-fade */
html.ci-dep .hero__copy{animation:ci-lift .9s var(--ease-out,cubic-bezier(.23,1,.32,1)) .04s both,ci-in .36s ease .56s both}
@keyframes ci-settle{from{translate:0 24px;scale:1.035}to{translate:none;scale:none}}
@keyframes ci-lift{from{translate:0 16px}to{translate:none}}

/* =================== calm: reduced motion, or Movimiento off. Opacity only, nothing moves or scales =================== */
/* no ring, doors, crack or rising letters: the finished lockup fades in whole, holds, and the black fades out. The skip
   button keeps its fade-in: it is intro.js's clock (phase A's anchor) */
html.ci-calm .ci *{animation:none!important}
html.ci-calm .ci__fx--front{display:none}
html.ci-calm .ci__glow{opacity:1;transform:none}
html.ci-calm .ci__bag3d{opacity:1}
html.ci-calm .ci__g,html.ci-calm .ci__g--d{transform:none}
html.ci-calm .ci__tag{opacity:.92}
html.ci-calm .ci__stage{opacity:0}
html.ci-calm.ci-go .ci__stage{animation:ci-in .36s var(--e-out) both!important}
html.ci-calm .ci__skip{animation:ci-in .4s ease .4s both!important}
html.ci-calm.ci-fade .ci{animation:ci-out .42s var(--e-out) both}

/* a first stray tap on the black lights the way out instead of ending the show (a second tap, the button or Esc ends it) */
.ci__skip::after{content:"";position:absolute;inset:6px 4px;border:1px solid rgba(241,236,226,.34);border-radius:999px;opacity:0;transition:opacity .2s ease}
.ci.is-hint .ci__skip{color:var(--c-w);transition:color .2s ease}
.ci.is-hint .ci__skip::after{opacity:1}