/* =====================================================================
   HOME PAGE styles (only index.html uses this file)
   Sections: 1 hero film, 2 statement, 3 five promises, 4 opportunities,
   5 eight-systems orbit, 6 franchise journey, 7 calculator, 8 60+ proof.
   Shared pieces (statement, scenes, data-reveal, close) come from
   css/site.css section 13; this file only adds the Home-specific parts.
   ===================================================================== */

/* 1. HERO FILM */
.hero{position:relative;height:640vh}
.screen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.screen canvas{width:100%;height:100%;display:block}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.12) 55%,transparent),linear-gradient(0deg,rgba(0,0,0,.6),transparent 40%)}
.caps{position:absolute;z-index:2;left:clamp(20px,5vw,64px);bottom:12vh;width:min(640px,86vw);height:320px}
.cap{position:absolute;left:0;bottom:0;color:#fff;opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.cap.on{opacity:1;transform:none}
.cap .label{color:#e9d6b4}.cap .label::before{background:#e9d6b4}
.cap h1,.cap h2{font-size:clamp(36px,5.6vw,76px);margin-top:16px}
.cap h1 b,.cap h2 b{font-weight:900}
.cap .a{color:var(--amber)}
.cap p{margin-top:14px;color:#ece6df;max-width:40ch}
.cap .btn{margin-top:26px}
.drag{position:absolute;z-index:2;left:50%;bottom:32px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:99px;padding:9px 18px;font-weight:800;font-size:11px;letter-spacing:.2em;background:rgba(0,0,0,.3);opacity:0;transition:opacity .4s}
.drag.on{opacity:1}
.prog{position:absolute;z-index:2;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.12)}
.prog i{display:block;height:100%;width:0;background:var(--grad)}

/* hero 3D parallax */
.screen{perspective:1200px}
.screen{cursor:grab}.screen:active{cursor:grabbing}.screen .caps{pointer-events:none}.screen .cap.on a{pointer-events:auto}

.caps{transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cap h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.cap h1 .ln>span{display:inline-block;transform:translateY(110%) rotateX(-40deg);transform-origin:50% 100%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ready .cap h1 .ln>span{transform:none}
.ready .cap h1 .ln:nth-child(2)>span{transition-delay:.12s}
.ready .cap h1 .ln:nth-child(3)>span{transition-delay:.24s}

/* 3. FIVE PROMISES: big photo on the left, a calm list on the right */
.promise{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,7vw,120px);align-items:center}
.promise .ph{aspect-ratio:4/5}
.pillars{list-style:none;margin:clamp(36px,5vh,56px) 0 0;padding:0;display:grid;gap:clamp(18px,3vh,28px)}

.pillars b{font-weight:800;font-size:clamp(20px,1.7vw,24px);line-height:1.2}
.pillars span{font-size:16px;color:#4d4741}

/* 4. OPPORTUNITIES SHOWROOM: left column sticks, three panels scroll past.
   Each product image fades up when its panel arrives (.panel.in). */
.show{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,90px);padding-bottom:40px}
.show .side{position:sticky;top:120px;align-self:start;display:grid;gap:26px}
.show .side h2{font-size:clamp(40px,5vw,72px)}
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.index li{display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--hair);color:var(--stone);font-weight:700;transition:color .4s,padding .4s}
.index li.on{color:var(--ink);padding-left:12px}

.panel{min-height:62vh;display:grid;align-content:center;gap:24px;padding-block:40px}
.stagebox{perspective:1100px;position:relative;aspect-ratio:5/4;max-width:100%;border-radius:4px;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,var(--raise) 0%,var(--ground) 72%);display:grid;place-items:center}
.stagebox::after{content:"";position:absolute;left:12%;right:12%;bottom:13%;height:16px;border-radius:50%;background:rgba(0,0,0,.22);filter:blur(14px)}
.stagebox img{position:relative;z-index:1;max-width:84%;max-height:80%;transform:translateY(30px) scale(.96);opacity:.0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity 1.1s}
.panel.in .stagebox img{transform:none;opacity:1}
.stagebox.photo img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover}
.stagebox.photo::after{display:none}
.panel h3{font-size:clamp(30px,3.4vw,46px)}
.panel .sub{color:var(--orange-ink);font-weight:700}
.panel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.panel ul li{border:1px solid var(--hair);border-radius:99px;padding:6px 14px;font-size:14px;color:var(--stone)}

/* showroom tilt + glare */
.stagebox{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.stagebox .glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.55),transparent 45%);opacity:0;transition:opacity .4s}
.stagebox:hover .glare{opacity:1}
.stagebox::before{content:"";position:absolute;inset:auto 20% 8% 20%;height:40%;background:radial-gradient(ellipse at 50% 100%,rgba(255,120,0,.16),transparent 70%);z-index:0}

/* showroom 3D: a live WebGL scene replaces the photo (js/showroom3d.js) */

.stagebox .turn{display:none;position:absolute;z-index:2;left:16px;bottom:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);pointer-events:none}

/* 5. ORBIT: eight systems on a 3D ring around a photo window */
.orbit{position:relative;height:260vh}

/* the photo window: all eight photos are stacked, the front system's one is shown */

.ring{position:absolute;left:50%;top:50%;width:0;height:0}
.node{position:absolute;left:-120px;top:-34px;width:240px;padding:12px 16px;border:1px solid var(--hair);border-radius:14px;background:rgba(251,249,246,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:center;transition:opacity .3s,border-color .3s;backface-visibility:hidden}
.node small{display:block;font-size:10px;font-weight:800;letter-spacing:.24em;color:var(--champ)}
.node b{display:block;font-size:15px;font-weight:800;line-height:1.25;margin-top:2px}
.node.front{border-color:var(--orange-ink);box-shadow:0 18px 40px rgba(232,72,12,.16)}

/* 6. JOURNEY: pinned, the row of photo steps moves sideways */
 /* sits closer to the showroom above */

/* right side of the journey title: the six step names, the current one in orange */

/* 7. QUICK CALCULATOR: sliders on the left, a white "ledger" card on the right */

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--dim);outline-offset:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--grad);border:3px solid var(--ground);box-shadow:0 0 0 1px var(--champ);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#ff5505;border:3px solid var(--ground);box-shadow:0 0 0 1px var(--champ);cursor:pointer}
/* the ledger card */

.rows{margin:0;display:grid;border-top:1px solid var(--hair)}
.rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.rows dt{font-size:15px;color:#4d4741}
.rows dd{margin:0;font-size:clamp(22px,2vw,28px);font-weight:300;font-variant-numeric:tabular-nums;white-space:nowrap}

.rows .main dt{font-weight:800;color:var(--ink)}
.rows .main dd{font-size:clamp(34px,3.6vw,52px);color:var(--orange-ink);letter-spacing:-.02em}

/* calculator flip */

@keyframes fl{0%{transform:rotateX(60deg);opacity:.3}100%{transform:none;opacity:1}}

/* 8. PROVEN: opening photo + the extruded 60+ */
.proven .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,7vw,110px);align-items:center}
.proven .ph{aspect-ratio:1/1}
.proven .copy{display:grid;gap:22px}
.proven h2{font-size:clamp(30px,3.4vw,46px)}

/* PHONE + TABLET */
@media (max-width:960px){
  .show{grid-template-columns:1fr}.show .side{position:static}.panel{min-height:0}
  .node{width:170px;left:-85px}.node b{font-size:13px}
  .promise,.proven .grid{grid-template-columns:1fr}
  .promise .ph{aspect-ratio:4/3}

}
@media (max-width:560px){
  
  .node{width:132px;left:-66px;padding:8px 10px}.node b{font-size:12px}

}
@media (prefers-reduced-motion:reduce){.stagebox img{opacity:1;transform:none}.cap h1 .ln>span{transform:none}}
/* premium copy: thin line segments instead of round dots (calmer) */

/* 6b. FINALE: the station opens from a framed picture to full screen.
   js/finale.js sets --o (0 = framed, 1 = full screen) and --t (text in). */
.finale{height:240vh;position:relative}
.fpin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.fwin{position:absolute;inset:0;--o:0;clip-path:inset(calc((1 - var(--o)) * 16vh) calc((1 - var(--o)) * 14vw) round calc((1 - var(--o)) * 28px));background:#15110e}
.fwin img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(calc(1.12 - var(--o) * .12))}
.fshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.62),rgba(10,8,6,.15) 55%,rgba(10,8,6,0)),linear-gradient(0deg,rgba(10,8,6,.5),rgba(10,8,6,0) 40%);opacity:var(--o)}
.fcopy{position:absolute;left:clamp(20px,6vw,96px);bottom:clamp(60px,14vh,140px);color:#fff;display:grid;gap:22px;justify-items:start;--t:0;opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 30px))}
.fcopy .label{color:#f0d9b5}.fcopy .label::before{background:#f0d9b5}
.fcopy h2{font-size:clamp(48px,7vw,112px);line-height:.98;margin:0;color:#fff}
@media (max-width:760px){.fcopy h2{font-size:46px}.fwin img{object-position:50% 50%}.fwin{clip-path:inset(calc((1 - var(--o)) * 20vh) calc((1 - var(--o)) * 5vw) round calc((1 - var(--o)) * 20px))}}
.fcopy .ghost{color:#fff}.fcopy .ghost i{background:#fff}

/* 4b. WARM GLASS SHOWROOM: cream marble + orange glass ribbon behind the
   opportunities. The photo is sticky, so it stays while the panels scroll.
   Each 3D model sits in a frosted white glass frame. */
.glassroom{position:relative;background:#f3ebe0;isolation:isolate}
.gr-photo{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:-1;
  background:linear-gradient(90deg,rgba(246,240,232,.75),rgba(246,240,232,.1) 55%),url(../assets/photos/showroom-warm-bg.webp) 70% 50%/cover no-repeat}
.glassroom .show{padding-top:clamp(90px,14vh,150px);padding-bottom:clamp(60px,10vh,110px)}
.glassroom .index,.glassroom .index li{border-color:rgba(60,40,20,.14)}
.glassroom .panel ul li{border-color:rgba(60,40,20,.18);background:rgba(255,255,255,.45);backdrop-filter:blur(4px)}
.glassroom .stagebox{border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.22) 45%,rgba(255,255,255,.4));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset 0 1px 0 #fff,0 50px 90px -50px rgba(120,70,30,.45);backdrop-filter:blur(10px)}
.glassroom .stagebox::after{background:rgba(80,50,25,.25)}
.glassframe{position:absolute;inset:12px;border-radius:14px;border:1px solid rgba(255,255,255,.75);pointer-events:none;z-index:3}
.ocount{display:flex;align-items:center;gap:14px;margin-top:10px}
.ocount b,.ocount span{font-size:15px;letter-spacing:.2em}
.ocount b{font-weight:800}
.ocount span{color:var(--stone)}
.ocount i{flex:1;max-width:220px;height:1px;background:rgba(60,40,20,.15);position:relative}
.ocount i::after{content:"";position:absolute;left:0;top:0;height:1px;width:var(--w,33.3%);background:var(--orange-ink);transition:width .5s}
.oarrows{display:flex;gap:8px;margin-left:8px}
.oarrows button{width:40px;height:40px;border-radius:8px;border:1px solid rgba(60,40,20,.2);background:rgba(255,255,255,.5);color:var(--ink);font-size:16px;cursor:pointer}
.oarrows button:hover{background:#fff}
@media (max-width:960px){.gr-photo{background-position:80% 50%}}

/* 7b. Investment card: big monthly number, 12-month bars, three small numbers */