/* NIGHT CREW: black suits, evening dresses, and fluid tactile motion. */
:root { --fluid: cubic-bezier(.16,1,.3,1); --soft: cubic-bezier(.45,0,.55,1); }
.crew-sprite { background-image:url("/lp/assets/nightlife-crew.webp"); backface-visibility:hidden; }
body { background-color:#051630; background-image:radial-gradient(ellipse at 8% 22%,#194796 0,transparent 48%),radial-gradient(ellipse at 98% 72%,#103977 0,transparent 46%),linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px); }
.topbar { background:linear-gradient(115deg,#123b91,#081e47); }
.hero-card { box-shadow:0 5px 0 #173f8812,0 12px 25px #1438740b; }
.hero-character {
  translate:var(--scene-x,0px) var(--scene-y,0px);
  animation:velvet-idle 6.4s var(--soft) infinite;
  filter:drop-shadow(5px 9px 2px #071e4d16);
  will-change:transform,translate;
}
.hero-character.is-waving { animation:velvet-greeting .95s var(--fluid) both; }
.terminal { translate:calc(var(--scene-x,0px) * -.3) calc(var(--scene-y,0px) * -.28); rotate:calc(var(--scene-rotate,0deg) * -.35); backface-visibility:hidden; }
.hero-bubble { transition:scale .6s var(--fluid),rotate .6s var(--fluid),box-shadow .6s; box-shadow:3px 4px 0 #0b286118,0 0 0 5px #efc76510; }
.hero-bubble:hover { scale:1.07; box-shadow:3px 4px 0 #0b286118,0 0 0 9px #efc76516; }
.hero-bubble:active { scale:.96; }
.hero-scene::after { content:""; position:absolute; right:15px; bottom:0; width:200px; height:32px; border-radius:50%; background:radial-gradient(ellipse,#153d7329,transparent 68%); z-index:1; pointer-events:none; }
.hero-brand { position:relative; }
.hero-brand::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#efc76588,transparent); }
.hero-spark { animation:velvet-star 5.7s var(--soft) infinite; }
.spark-two { animation-delay:-2.8s; }
.hero-feed-line { animation-duration:10s; }
.hero-feed-line:nth-of-type(2) { animation-delay:.9s; }
.hero-feed-line:nth-of-type(3) { animation-delay:1.8s; }
.hero-line,.hero-card h1 strong,.hero-question { animation-duration:.95s; animation-timing-function:var(--fluid); }
.hero-question { animation-delay:.3s; }
.hero-card h1 strong { text-shadow:4px 5px 0 #efc76575,0 3px 22px #164dc710; }

/* Light sweeps are slow and soft; the small bursts are directly user triggered. */
.club-lights { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.light-beam { position:absolute; top:-20px; width:190px; height:390px; transform-origin:50% 0; clip-path:polygon(48% 0,52% 0,100% 100%,0 100%); opacity:.52; will-change:transform; }
.beam-gold { left:-36px; background:linear-gradient(180deg,#ffdf8e7a,transparent 88%); animation:gold-light 10s var(--soft) infinite; }
.beam-blue { right:-36px; background:linear-gradient(180deg,#548bff70,transparent 90%); animation:blue-light 12s var(--soft) -4s infinite; }
.hero-lights { opacity:.38; }
.hero-lights .beam-gold { left:20px; }
.hero-lights .beam-blue { right:-5px; }
.glow-mote { position:absolute; width:4px; height:4px; border-radius:50%; background:#f9dea0; box-shadow:0 0 10px #ffdb8880; opacity:.4; animation:mote-drift 8s var(--soft) infinite; }
.mote-one { left:19%; top:24%; }
.mote-two { left:79%; top:38%; width:3px; height:3px; animation-delay:-2.6s; }
.mote-three { left:48%; top:78%; width:3px; height:3px; animation-delay:-5.3s; }
.night-stage { border-color:#21467d; box-shadow:6px 8px 0 #143f9e17,0 18px 30px #0a24531a; }
.stage-topline { background:linear-gradient(100deg,#0a214b,#113775); border-bottom-color:#efc7654a; }
.night-floor { background:radial-gradient(ellipse at 48% 0,#173f7d 0,transparent 66%),linear-gradient(150deg,#0a234e,#040d21); }
.night-floor::after { content:""; position:absolute; left:0; right:0; bottom:0; height:50px; background:linear-gradient(transparent,#06172e60); pointer-events:none; z-index:2; }
.lounge-arch { position:absolute; width:72px; height:95px; top:2px; border:1px solid #efc76533; border-radius:50px 50px 0 0; background:linear-gradient(90deg,#a4803720,transparent,#a4803710); z-index:0; }
.arch-left { left:14px; }
.arch-right { right:15px; }
.floor-counter { z-index:2; background:linear-gradient(115deg,#142b50,#294d7c); border-color:#c5a55d88; box-shadow:0 8px 0 #040d22; }
.floor-counter>span { color:#f7d47d; }
.floor-table { z-index:2; border-color:#a68c5a88; background:linear-gradient(135deg,#45526b,#14233d); transition:background 1.5s var(--soft),box-shadow 1.5s var(--soft); }
.floor-table::after { content:""; position:absolute; left:27px; top:34px; height:14px; width:5px; background:linear-gradient(#7e6e49,#15263f); border-radius:0 0 3px 3px; }
.floor-grid { opacity:.8; }
.floor-halo { transition:background 1.8s var(--soft),transform 1.8s var(--soft); }
.shift-person { transition:transform 1.7s var(--fluid),opacity 1s var(--soft),filter 1s; will-change:transform; }
.shift-person>.crew-sprite { animation:velvet-stage-idle 5.6s var(--soft) infinite; filter:drop-shadow(0 3px 4px #0007) drop-shadow(0 0 2px #b5d1ff77); }
.shift-handy>.crew-sprite { animation-delay:-1.4s; }
.shift-order>.crew-sprite { animation-delay:-2.8s; }
.shift-manager>.crew-sprite { animation-delay:-4.2s; }
.shift-person>b { color:#fff1c6; border-color:#c6aa6555; background:#071831ed; }
.night-ticket { transition:transform 1.45s var(--fluid),rotate 1.45s var(--fluid); transform-origin:50% 15%; }
.stage-caption { background:linear-gradient(120deg,#0b285d,#0c2350); }
.stage-message { background:#0b2c63; border-color:#e0bd67; box-shadow:0 3px 12px #0004,0 0 16px #efc76515; transition:background .9s,box-shadow .9s; }
.night-stage[data-step="1"] .stage-message { box-shadow:0 3px 12px #0004,0 0 20px #efc76529; }
.night-progress>span { transition:width 1.5s var(--fluid); box-shadow:0 0 12px #f9d47570; }
.night-stage[data-step="1"] .dot-one { animation:send-order-smooth-a 2.9s linear infinite; }
.night-stage[data-step="1"] .dot-two { animation:send-order-smooth-b 2.9s 1.1s linear infinite; }
.order-dot::after { content:""; position:absolute; inset:-5px; border:1px solid #efc76555; border-radius:50%; }
.floor-spark,.night-stage[data-step="3"] .floor-spark { animation:velvet-star 5.2s var(--soft) infinite; }
.night-stage[data-step="3"] .fs-two { animation-delay:-2.5s; }

/* Independent translate keeps the magnetic movement separate from reveal/hover. */
[data-magnetic] { translate:var(--magnet-x,0px) var(--magnet-y,0px); backface-visibility:hidden; }
.cta { transition:translate .7s var(--fluid),transform .7s var(--fluid),scale .55s var(--fluid),box-shadow .55s; }
.cta::after { animation-duration:7.8s; }
.cta:hover { transform:translateY(-4px); }
.cta:active,.crew-tab:active,.night-controls button:active { scale:.965; }
.crew-tab { transition:translate .65s var(--fluid),transform .75s var(--fluid),scale .55s var(--fluid),box-shadow .6s var(--fluid),background .65s,border-color .65s; }
.crew-tab:hover { transform:translateY(-6px); box-shadow:4px 9px 0 #173964; }
.crew-tab .crew-sprite { transition:transform .8s var(--fluid); }
.crew-tab.is-active .crew-sprite { animation:velvet-crew-idle 5.6s var(--soft) infinite; }
.crew-tab:hover .crew-sprite { transform:translateY(-5px) rotate(-2deg); }
.mini-crew .crew-sprite { animation:velvet-team 6.8s var(--soft) infinite; }
.mini-crew .crew-sprite:nth-child(2) { animation-delay:-1.7s; }
.mini-crew .crew-sprite:nth-child(3) { animation-delay:-3.4s; }
.mini-crew .crew-sprite:nth-child(4) { animation-delay:-5.1s; }
.left-rail .mini-crew .crew-sprite { filter:drop-shadow(0 3px 4px #0003) drop-shadow(0 0 1px #b5d1ff55); }
.night-controls button { transition:translate .65s var(--fluid),transform .75s var(--fluid),scale .5s var(--fluid),box-shadow .6s var(--fluid),background .65s,color .6s; }
.night-controls button[aria-pressed=true] { box-shadow:0 4px 0 #092657,0 7px 18px #194fc62a; }
.app-panel.is-active { animation:panel-arrive .65s var(--fluid) both; }
.contact-art .crew-sprite { animation:velvet-idle 6.4s var(--soft) infinite; }
.contact-bubble { animation:bubble-sway 7.4s var(--soft) infinite; }
.js-ready [data-reveal] { transform:translateY(26px); transition:opacity .95s var(--reveal-delay,0ms) var(--soft),transform 1.15s var(--reveal-delay,0ms) var(--fluid); }
.js-ready h2[data-reveal] { transition:opacity .9s var(--soft),transform 1.15s var(--fluid); }
.js-ready [data-reveal].is-visible { transform:none; }

#interaction-fx { position:fixed; inset:0; overflow:hidden; z-index:150; pointer-events:none; contain:layout style paint; }
.fx-spark { display:block; position:absolute; width:9px; height:9px; background:var(--spark-color,#efc765); color:var(--spark-color,#efc765); font-size:0; pointer-events:none; clip-path:polygon(50% 0,63% 36%,100% 50%,63% 64%,50% 100%,37% 64%,0 50%,37% 36%); animation:satisfy-spark .85s cubic-bezier(.15,.7,.3,1) forwards; will-change:transform,opacity; }
.fx-spark:nth-child(3n) { width:6px; height:6px; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.fx-spark:nth-child(3n + 1) { width:12px; height:12px; }
.page-suspended *,.page-suspended *::before,.page-suspended *::after { animation-play-state:paused!important; }
.motion-off [data-magnetic] { translate:0 0!important; }
.motion-off #interaction-fx { display:none; }

@keyframes velvet-idle {
  0%,100% { transform:translate3d(0,0,0) rotate(-.9deg); }
  25% { transform:translate3d(1px,-6px,0) rotate(0deg); }
  50% { transform:translate3d(0,-9px,0) rotate(1deg); }
  75% { transform:translate3d(-1px,-4px,0) rotate(0deg); }
}
@keyframes velvet-greeting {
  0% { transform:translate3d(0,-2px,0) rotate(0); }
  35% { transform:translate3d(-3px,-12px,0) rotate(-5deg); }
  65% { transform:translate3d(3px,-7px,0) rotate(3deg); }
  100% { transform:translate3d(0,0,0) rotate(-.9deg); }
}
@keyframes velvet-stage-idle { 0%,100% { transform:translate3d(0,0,0) rotate(-.5deg); } 50% { transform:translate3d(0,-3px,0) rotate(.7deg); } }
@keyframes velvet-crew-idle { 0%,100% { transform:translate3d(0,0,0) rotate(-.7deg); } 50% { transform:translate3d(0,-5px,0) rotate(.9deg); } }
@keyframes velvet-team { 0%,100% { transform:translate3d(0,0,0) rotate(-1deg); } 50% { transform:translate3d(0,-7px,0) rotate(1.2deg); } }
@keyframes velvet-star { 0%,100% { opacity:.38; transform:scale(.8) rotate(-10deg); } 50% { opacity:.85; transform:scale(1.05) rotate(15deg); } }
@keyframes gold-light { 0%,100% { transform:rotate(-17deg) translateZ(0); } 50% { transform:rotate(22deg) translateZ(0); } }
@keyframes blue-light { 0%,100% { transform:rotate(24deg) translateZ(0); } 50% { transform:rotate(-20deg) translateZ(0); } }
@keyframes mote-drift { 0%,100% { transform:translate3d(0,0,0); opacity:.25; } 50% { transform:translate3d(8px,-22px,0); opacity:.8; } }
@keyframes satisfy-spark { 0% { opacity:0; transform:translate(-50%,-50%) scale(.25) rotate(0); } 15% { opacity:1; } 70% { opacity:.85; } 100% { opacity:0; transform:translate(calc(-50% + var(--spark-x,30px)),calc(-50% + var(--spark-y,-35px))) scale(.15) rotate(var(--spark-rotate,90deg)); } }
@keyframes send-order-smooth-a { 0% { opacity:0; transform:translate3d(0,0,0) scale(.65); } 10%,85% { opacity:1; } 100% { opacity:0; transform:translate3d(100px,-48px,0) scale(.85); } }
@keyframes send-order-smooth-b { 0% { opacity:0; transform:translate3d(0,0,0) scale(.65); } 10%,85% { opacity:1; } 100% { opacity:0; transform:translate3d(-82px,-86px,0) scale(.85); } }

@media(max-width:540px) {
  body { background:var(--paper); }
  .light-beam { width:145px; height:335px; opacity:.48; }
  .hero-character { animation-duration:6.4s; }
  .night-stage { box-shadow:4px 6px 0 #143f9e17,0 12px 23px #0a245311; }
  .shift-person { transition-duration:1.5s; }
  .lounge-arch { width:57px; height:83px; }
  .arch-left { left:10px; }
  .arch-right { right:9px; }
  .fx-spark { width:8px; height:8px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-magnetic] { translate:0 0!important; }
  #interaction-fx { display:none; }
  .hero-character,.terminal { translate:none!important; rotate:none!important; }
}