/* ═══════════════════════════════════════════════════════════════════
   CABANA DRIVE · reveal (studio)
   Only transform, opacity and stroke-dashoffset animate.
   ═══════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Anybody Variable'; src: url('/assets/fonts/anybody-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk Variable'; src: url('/assets/fonts/hanken-grotesk-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

#drive-gate.dg {
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; cursor: pointer;
  background: #03161b; contain: strict; transition: opacity .42s cubic-bezier(.4, 0, .2, 1);
  -webkit-tap-highlight-color: transparent;
}
#drive-gate.dg.dg-gone { opacity: 0; pointer-events: none; }
.dg-stage { position: absolute; inset: 0; }
.dg-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dg-scene * { transform-box: view-box; }

/* the light comes on */
.dg-cone, .dg-pool { opacity: 0; transition: opacity .5s ease; }
.dg-pool { transform-origin: 600px 585px; transform: scaleX(.4); transition: opacity .6s ease .1s, transform 1s cubic-bezier(.22, 1, .36, 1) .1s; }
.dg-on .dg-cone { opacity: 1; animation: dg-flicker .5s steps(1) 1; }
.dg-on .dg-pool { opacity: 1; transform: none; }
@keyframes dg-flicker { 0% { opacity: .2; } 20% { opacity: 1; } 35% { opacity: .35; } 50% { opacity: 1; } }
.dg-grid { opacity: 0; transition: opacity 1.2s ease .3s; }
.dg-on .dg-grid { opacity: 1; }

/* the outline draws, then the paint arrives */
.dg-outline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dg-on .dg-outline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.05s cubic-bezier(.65, 0, .35, 1); }
.dg-on .dg-outline-glass { transition-delay: .3s; transition-duration: .8s; }
.dg-fill, .dg-glass, .dg-line, .dg-tail, .dg-head, .dg-wheel, .dg-reflect, .dg-shadow { opacity: 0; }
.dg-fill { transition: opacity .55s ease; }
.dg-glass, .dg-line, .dg-tail, .dg-head { transition: opacity .4s ease .15s; }
.dg-wheel { transform: scale(.6); transition: opacity .35s ease .25s, transform .6s cubic-bezier(.34, 1.56, .64, 1) .25s; }
.dg-reflect, .dg-shadow { transition: opacity .6s ease .2s; }
.dg-paint .dg-fill, .dg-paint .dg-glass, .dg-paint .dg-line, .dg-paint .dg-tail, .dg-paint .dg-head, .dg-paint .dg-reflect, .dg-paint .dg-shadow { opacity: 1; }
.dg-paint .dg-wheel { opacity: 1; transform: none; }
.dg-paint .dg-outline { opacity: .35; transition: stroke-dashoffset 1s, opacity .5s; }
.dg-sweep { transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 0; }
.dg-paint .dg-sweep { animation: dg-sweep .9s cubic-bezier(.45, 0, .2, 1) .1s forwards; }
@keyframes dg-sweep { 0% { transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate3d(720px, 0, 0) skewX(-18deg); opacity: 0; } }

/* the keys are pressed */
.dg-beam { opacity: 0; transform-origin: 860px 484px; transform: scaleX(.3); }
.dg-lights .dg-beam { animation: dg-beam .9s ease-out forwards; }
@keyframes dg-beam { 0% { opacity: 0; transform: scaleX(.3); } 18% { opacity: 1; transform: scaleX(1); } 34% { opacity: .15; } 52% { opacity: 1; } 100% { opacity: .85; transform: scaleX(1); } }
.dg-lights .dg-head { animation: dg-head .9s ease-out; }
.dg-lights .dg-tail { animation: dg-head .9s ease-out; }
@keyframes dg-head { 0%, 34% { opacity: 1; } 18%, 52% { opacity: .2; } 100% { opacity: 1; } }

/* and it rolls out */
.dg-rig { transform: translate3d(0, 0, 0); }
.dg-drive .dg-rig { animation: dg-drive .95s cubic-bezier(.55, 0, .7, .4) forwards; }
@keyframes dg-drive { 0% { transform: translate3d(0, 0, 0); } 12% { transform: translate3d(-14px, 0, 0); } 100% { transform: translate3d(1100px, 0, 0); } }
.dg-drive .dg-wheel { animation: dg-spin .3s linear infinite; }
@keyframes dg-spin { to { transform: rotate(360deg); } }
.dg-streaks { opacity: 0; }
.dg-drive .dg-streaks { animation: dg-streaks .8s ease-out .15s forwards; }
@keyframes dg-streaks { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate3d(620px, 0, 0); } }

/* words */
.dg-word {
  position: absolute; left: 0; right: 0; top: 13%; text-align: center; padding: 0 20px; color: #e9fffb;
  font-family: 'Anybody Variable', 'Anybody', ui-sans-serif, system-ui, sans-serif;
}
.dg-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px 6px 8px; border-radius: 99px;
  font: 700 11px/1 'Hanken Grotesk Variable', 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase;
  color: #9ff7ea; background: rgba(46, 242, 208, .08); box-shadow: inset 0 0 0 1px rgba(159, 247, 234, .22);
  opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s ease .2s, transform .7s cubic-bezier(.22, 1, .36, 1) .2s;
}
.dg-kicker span { width: 8px; height: 8px; border-radius: 50%; background: #2ef2d0; box-shadow: 0 0 12px #2ef2d0; }
.dg-title {
  margin: 0; font-family: 'Anybody Variable', 'Anybody', ui-sans-serif, system-ui, sans-serif;
  font-weight: 850; font-stretch: 150%; font-size: clamp(34px, 9.6vw, 92px); line-height: .92; letter-spacing: -.02em; text-transform: uppercase;
}
.dg-title span { display: inline-block; opacity: 0; transform: translate3d(0, 28px, 0); font-stretch: 60%; transition: opacity .5s ease, transform .9s cubic-bezier(.22, 1, .36, 1), font-stretch 1.1s cubic-bezier(.22, 1, .36, 1); }
.dg-t2 {
  background: linear-gradient(100deg, #2ef2d0, #12c6e8 50%, #6f9bff); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition-delay: .08s !important;
}
.dg-tag {
  margin: 16px 0 0; font: 500 15px/1.45 'Hanken Grotesk Variable', 'Hanken Grotesk', system-ui, sans-serif; color: rgba(233, 255, 251, .78);
  opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s ease .35s, transform .8s cubic-bezier(.22, 1, .36, 1) .35s;
}
.dg-tag b { color: #fff; font-weight: 750; }
.dg-paint .dg-kicker, .dg-paint .dg-tag { opacity: 1; transform: none; }
.dg-paint .dg-title span { opacity: 1; transform: none; font-stretch: 150%; }

/* the beam becomes the page */
.dg-iris {
  position: absolute; left: 100%; top: 58%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; border-radius: 50%;
  background: radial-gradient(closest-side, #f2fbfa 0%, #f2fbfa 70%, rgba(242, 251, 250, 0) 100%);
  transform: scale(.02); opacity: 0; pointer-events: none; transition: transform .6s cubic-bezier(.55, 0, .25, 1), opacity .2s;
}
.dg-go .dg-iris { transform: scale(1.9); opacity: 1; }
.dg-go .dg-word { opacity: 0; transform: translate3d(-24px, 0, 0); transition: opacity .3s, transform .5s; }

.dg-skip {
  position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px;
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px 0 14px; border-radius: 99px; border: 0;
  background: rgba(233, 255, 251, .1); color: #e9fffb; font: 700 13px/1 'Hanken Grotesk Variable', 'Hanken Grotesk', system-ui, sans-serif;
  box-shadow: inset 0 0 0 1px rgba(233, 255, 251, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer;
}
.dg-skip svg { width: 16px; height: 16px; }
.dg-go .dg-skip { opacity: 0; transition: opacity .2s; }

/* repeat visit */
.dg-brief .dg-cone, .dg-brief .dg-pool, .dg-brief .dg-grid, .dg-brief .dg-fill, .dg-brief .dg-glass, .dg-brief .dg-line,
.dg-brief .dg-tail, .dg-brief .dg-head, .dg-brief .dg-wheel, .dg-brief .dg-reflect, .dg-brief .dg-shadow,
.dg-brief .dg-kicker, .dg-brief .dg-tag, .dg-brief .dg-title span { transition-duration: .3s !important; transition-delay: 0s !important; }
.dg-brief.dg-on .dg-outline { transition-duration: .3s; transition-delay: 0s; }
.dg-brief .dg-cone { animation: none !important; }
.dg-brief .dg-rig { animation-duration: .55s !important; }

/* stillness */
.dg-still *, .dg-still *::before, .dg-still *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
.dg-still .dg-iris { display: none; }
.dg-still .dg-beam { opacity: .85; transform: none; }
#drive-gate.dg.dg-still { transition: opacity .35s; }