/* =====================================================================
   LUXURY MIX (2 Nov 2026, hiruni's pick "Mix"): dark, dramatic scenes
   for the big visual parts, light cream for the reading parts.
     DARK : Hero 360 > How it works film > Packages showroom ... Franchise > Finale
     LIGHT: About, Compare, App, Reviews, Locations, FAQ
   Each light part slides up over the dark one like a sheet of paper, and
   each dark part has rounded top corners, so the scenes flow into each
   other. Loaded last on index.html. No words are changed.
   ===================================================================== */

/* 1. HOW IT WORKS: a dark scene with rounded top corners (clip-path keeps
      the film's sticky pin working, overflow:hidden would break it) */
#how{clip-path:inset(0 round 32px 32px 0 0)}

/* 2. PACKAGES = a dark car showroom: black room, a warm spotlight on the
      floor, dark glass cards with a soft mirror reflection under them */
#packages.glassroom{background:
  radial-gradient(ellipse 60% 38% at 50% 78%,rgba(255,122,46,.22),transparent 70%),
  radial-gradient(ellipse 90% 60% at 50% 0%,rgba(255,255,255,.05),transparent 70%),
  linear-gradient(#0d0a08,#120e0b 60%,#0a0807);color:#f6f1ea}
/* the shiny floor line the cards stand on */
#packages.pk3d .pkstage::after{content:"";position:absolute;left:-10%;right:-10%;top:84%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,170,110,.35),transparent);pointer-events:none}
#packages .chap{color:#a99e92;border-color:rgba(255,255,255,.12)}
#packages #show .side h2{color:#f6f1ea}
#packages #show .side h2 b{color:#ff7a2e}
#packages .ocount b{color:#fff}
#packages .ocount span{color:#8c8178}
#packages .ocount i{background:rgba(255,255,255,.16)}
#packages .ocount i::after{background:#ff7a2e}
#packages .oarrows button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#f6f1ea}
#packages .oarrows button:hover{background:rgba(255,255,255,.14);border-color:#ff7a2e}
#packages #show .pnote{color:#a99e92}
#packages #show .pnote b{color:#f6f1ea}
/* dark glass cards */
#packages.pk3d .pkstage .panel{background:linear-gradient(170deg,#1d1814,#110d0a);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.85);-webkit-box-reflect:below 6px linear-gradient(transparent 78%,rgba(255,255,255,.10))}
#packages.pk3d .pkstage .panel.now{box-shadow:0 50px 100px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,122,46,.55),0 0 60px -10px rgba(255,106,0,.35)}
#packages.pk3d .panel h3,#packages.pk3d .panel h3 b{color:#fff}
#packages.pk3d .panel .sub{color:#ff9a5c}
#packages.pk3d .panel .sub .price{color:#fff}
#packages.pk3d .panel ul li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#e9e0d5}
#packages.pk3d .panel ul li.vac{color:#ff9a5c;border-color:rgba(255,122,46,.5)}
@media (max-width:760px){#packages.pk3d .pkstage .panel{-webkit-box-reflect:none}}

/* 3. COMPARE = a cream sheet that slides up over the last packages screen
      (the same move as About over the hero) */
#compare.vs6{position:relative;z-index:5;margin-top:-100vh;margin-top:-100svh;isolation:isolate}
#compare.vs6::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:#F4F0EA;border-radius:32px 32px 0 0;box-shadow:0 -30px 60px -20px rgba(0,0,0,.5)}
#packages.pk3d{height:460vh}          /* one extra screen for the sheet to slide over */
@media (max-width:760px){#compare.vs6::before{border-radius:22px 22px 0 0}}
@media (prefers-reduced-motion:reduce){#compare.vs6{margin-top:0}#compare.vs6::before{border-radius:0}#packages.pk3d{height:360vh}}

/* 4. FRANCHISE: a dark scene again, rounded top corners, and the photo
      slowly pushes in like a camera as you scroll (js/lux.js) */
#franchise.fr5{clip-path:inset(0 round 32px 32px 0 0);margin-top:-32px;position:relative;z-index:3}
#franchise .fr-bg{transform-origin:50% 60%;will-change:transform}
@media (max-width:760px){#how,#franchise.fr5{clip-path:inset(0 round 22px 22px 0 0)}}