/* ============================================================
   RGS Associates — homepage motion
   One pinned stage (acts 1–3), then in-flow sections.
   Light theme throughout; section tone shifts with scroll.
   ============================================================ */

body.motion { background: var(--bg); }
body.motion::before { display: none; }           /* the stage paints its own tone */

/* tone layer — a fixed wash the JS recolours as you scroll */
.tone { position: fixed; inset: 0; z-index: -1; background: var(--bg);
        transition: none; will-change: background-color; }

/* ---------- the reel ---------- */
#reel { position: relative; height: 900vh; }
.stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
}
.stage > * { position: absolute; }

/* authorised badge sits top-right of the stage */
.stage .hero-top { top: calc(var(--nav-h) + 22px); right: 0; left: 0; z-index: 5; will-change: opacity, transform;
  display: flex; justify-content: flex-end; padding: 0 24px; pointer-events: none; }
.stage .hero-top .authorised { pointer-events: auto; margin: 0; }

/* ---------- act 1 · hero copy ---------- */
.hero-copy { top: calc(var(--nav-h) + 86px); left: 0; right: 0; text-align: center;
  padding: 0 24px; will-change: transform, opacity; z-index: 4; }
.hero-copy .act-mark { font-size: 11.5px; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.hero-copy h1 { font-size: clamp(44px, 8.4vw, 112px); line-height: .96; letter-spacing: -.045em;
  font-weight: 900; margin: 0 auto; max-width: 14ch; }
.hero-copy .lede { font-size: clamp(16px, 1.9vw, 21px); color: var(--muted); max-width: 560px;
  margin: 22px auto 0; font-weight: 400; letter-spacing: -.01em; }
.hero-copy .lede b { color: var(--text); font-weight: 600; }
.hero-copy .lede .hi { color: var(--green-2); font-weight: 700; }
.hero-copy .lede .hi.sun { color: #e57c12; }
.hero-copy .cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

.cue { bottom: 28px; left: 50%; transform: translateX(-50%); font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted); opacity: .75; text-align: center; }
.cue .line { width: 1px; height: 38px; margin: 10px auto 0;
  background: linear-gradient(180deg, var(--green-2), transparent); }

/* ---------- ghost type ---------- */
.gtype {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: clamp(72px, 11vw, 170px); font-weight: 900; letter-spacing: -.05em; line-height: 1;
  color: var(--text); opacity: 0; white-space: nowrap; pointer-events: none; user-select: none;
  will-change: transform, opacity;
}
.gtype.g-pan { color: #2e9e3a; }      /* v20: Waaree green */
.gtype.g-inv { color: #015cbb; }      /* v20: Deye blue */
/* v20: the Deye wordmark on the inverter body, centred above the display */
.prod.inv { position: absolute; }
.prod.inv img.inv-logo { position: absolute; left: 58.2%; top: 27.5%; width: 15%; height: auto; transform: translateX(-50%);
  filter: none; pointer-events: none; }
/* v20: "Authorized distributor of Waaree and Deye" — the brands in their own colours */
.act-head.h-brands h2 { font-weight: 800; letter-spacing: -.035em; font-size: clamp(28px, 4vw, 50px); }
.act-head.h-brands h2 .pre { display: block; font-size: .42em; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; }
.act-head.h-brands h2 .amp { font-weight: 500; color: var(--muted); font-size: .7em; margin: 0 .1em; }
.act-head.h-brands h2 b.waaree { color: #2e9e3a; font-weight: 900; }
.act-head.h-brands h2 b.deye { color: #015cbb; font-weight: 900; }

/* ---------- product layers ---------- */
.prod { left: 50%; top: 50%; transform: translate(-50%, -50%); will-change: transform, opacity;
  display: grid; place-items: center; z-index: 2; }
.prod img, .prod svg { display: block; height: min(54vh, 520px); width: auto; }
/* the inverter is a cut-out, so it needs a true silhouette shadow */
.prod.inv img { filter: drop-shadow(0 38px 60px rgba(30, 55, 20, .28)) drop-shadow(0 6px 14px rgba(30,55,20,.12)); }
/* panels are rectangles: box-shadow is near-free, drop-shadow re-rasterises ~300 cells a frame */
.prod.pan svg, .prod.pan2 svg, .prod.pan3 svg { border-radius: 2.9% / 1.65%;
  box-shadow: 0 38px 60px -18px rgba(30, 55, 20, .32), 0 6px 14px rgba(30, 55, 20, .12); }
.prod.inv img { transform: translateY(2%); }

/* soft ground ellipse under each product (JS positions it) */
.ground { left: 50%; top: 50%; width: min(34vw, 420px); height: 50px; z-index: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(30,55,20,.18), rgba(30,55,20,0) 70%);
  opacity: 0; filter: blur(6px); pointer-events: none; }

/* ---------- callouts ---------- */
.callout {
  width: 230px; opacity: 0; will-change: transform, opacity; z-index: 3;
  font-size: 14px; line-height: 1.45; color: var(--text);
}
.callout b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.callout span { color: var(--muted); font-size: 13.5px; }
.callout::before {               /* the dot */
  content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 5px rgba(124,179,66,.18);
}
.callout::after {                /* the leader line */
  content: ""; position: absolute; height: 1.5px; background: linear-gradient(90deg, var(--green), rgba(124,179,66,.2));
}
.callout.l { text-align: right; }
.callout.l::before { right: -58px; top: 6px; }
.callout.l::after  { right: -48px; top: 11px; width: 42px; transform: scaleX(-1); }
.callout.r::before { left: -58px; top: 6px; }
.callout.r::after  { left: -48px; top: 11px; width: 42px; }
.callout.sun::before { background: #f58614; box-shadow: 0 0 0 5px rgba(245,134,20,.18); }
.callout.sun::after { background: linear-gradient(90deg, #f58614, rgba(245,134,20,.2)); }


/* act headers that ride with each product */
.act-head { left: 0; right: 0; text-align: center; padding: 0 24px; opacity: 0; will-change: transform, opacity; z-index: 3; }
.act-head .eyebrow { margin-bottom: 10px; }
.act-head h2 { font-size: clamp(26px, 3.6vw, 44px); letter-spacing: -.03em; line-height: 1.05; }
.act-head h2 u { text-decoration: none; background: linear-gradient(transparent 62%, rgba(245,134,20,.35) 62%); }
.act-head.top { top: calc(var(--nav-h) + 54px); }
.act-head.bot { bottom: 46px; }
.act-head.bot p { color: var(--muted); font-size: 15px; max-width: 520px; margin: 10px auto 0; }

/* ---------- in-flow acts ---------- */
.act4 { padding: 120px 0 40px; }
.act4 .big { font-size: clamp(34px, 6vw, 76px); letter-spacing: -.04em; line-height: 1; max-width: 900px; }
.act4 .big .g-solar { display: inline; }
.act4 p.sub { color: var(--muted); font-size: clamp(16px, 1.9vw, 19px); max-width: 620px; margin: 22px 0 0; }
.wh-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.wh { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; padding: 10px 18px 10px 12px; font-size: 14.5px; font-weight: 600; }
.wh i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--grad-btn); }
.wh small { color: var(--muted); font-weight: 500; }

.act5 { padding: 90px 0 110px; text-align: center; }
.act5 .mark { font-size: clamp(40px, 8vw, 108px); letter-spacing: -.05em; line-height: .95; font-weight: 900; }
.act5 .mark .g-solar { display: inline; }
.act5 p { color: var(--muted); font-size: clamp(16px, 2vw, 20px); max-width: 600px; margin: 24px auto 0; }
.act5 .row { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

/* reveal helper for in-flow acts */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  #reel { height: 820vh; }
  .prod img, .prod svg { height: min(34vh, 300px); }
  .stage .hero-top { top: calc(var(--nav-h) + 10px); justify-content: center; }
  .stage .hero-top .authorised { transform: scale(.8); transform-origin: top center; }
  .hero-copy { top: calc(var(--nav-h) + 112px); }
  .hero-copy .act-mark { display: none; }
  .hero-copy h1 { font-size: clamp(38px, 11vw, 60px); }
  .hero-copy .lede { font-size: 15.5px; }
  .act-head.top { top: calc(var(--nav-h) + 48px); }
  .act-head.top h2 { font-size: 26px; }
  .act-head.bot { display: none; }
  .gtype { font-size: 30vw; }
  .ground { width: 40vw; height: 30px; }
  .act4 { padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  #reel { height: auto; }
  .stage { position: relative; height: auto; display: block; padding: 120px 24px 60px; }
  .stage > * { position: static; opacity: 1 !important; transform: none !important; }
  .gtype, .ground, .cue { display: none; }
  .callout { display: inline-block; vertical-align: top; width: min(240px, 44%); margin: 10px; text-align: left !important; }
  .callout::before, .callout::after { display: none !important; }
  .prod img, .prod svg { height: min(42vh, 380px); }
  .prod { text-align: center; margin: 24px auto; }
  .prod.inv { position: relative; display: inline-grid; }
  .act-head { text-align: center; margin-top: 40px; }
  .rv { opacity: 1; transform: none; }
}

/* ============================================================
   Act II — the two products, with the reasons in the middle
   ============================================================ */
.duo-list { list-style: none; margin: 0; padding: 0; z-index: 3; display: grid; gap: 18px; }
.duo-list .st { display: flex; align-items: flex-start; gap: 14px; opacity: 0; will-change: transform, opacity;
  font-size: clamp(18px, 1.75vw, 25px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--text); }
.duo-list .st i { flex: none; width: 28px; height: 28px; border-radius: 50%; margin-top: 1px; position: relative;
  background: var(--surface); border: 1.5px solid rgba(76,140,47,.35); transition: background .4s var(--ease), border-color .4s; }
.duo-list .st i::after { content: ""; position: absolute; left: 9px; top: 5px; width: 7px; height: 12px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(.6); opacity: 0; transition: opacity .3s, transform .3s var(--ease); }
.duo-list .st.on i { background: var(--grad-btn); border-color: transparent; }
.duo-list .st.on i::after { opacity: 1; transform: rotate(45deg) scale(1); }

/* ============================================================
   Act III — the warehouse (a 1000×440 drawing, scaled by its viewBox)
   ============================================================ */
/* v21: the drawing must END above the step bubble — an SVG with height:auto ignores `bottom`
   and grows to its own aspect ratio, which pushed the yard below the fold */
.wh-scene { left: 0; right: 0; top: calc(var(--nav-h) + 176px); width: 100%;
  height: calc(100% - var(--nav-h) - 176px - 92px); max-height: 60vh;
  z-index: 2; opacity: 0; pointer-events: none; will-change: transform, opacity; overflow: visible; }
.act-head.h-wh-top p { color: var(--muted); font-size: 15.5px; max-width: 560px; margin: 10px auto 0; }
.w-kerb { fill: none; stroke: #a9b2a0; stroke-width: 2; }
.w-ground { fill: none; stroke: #8f9a86; stroke-width: 2.5; stroke-linecap: round; }
.w-road { fill: none; stroke: #e9eee2; stroke-width: 3; stroke-dasharray: 26 18; }
.w-shed .sh-body { stroke: #a8b2a0; stroke-width: 1.5; }
.w-shed .sh-inner-dark { fill: #6b7566; opacity: .35; }
.w-shed .sh-door { stroke: #7f8a95; stroke-width: 1.2; }
.w-shed .sh-doorline { stroke: #7f8a95; stroke-width: 1; opacity: .55; }
.w-shed .sh-doorbox { fill: #6f7a86; }
.w-shed .sh-roof { stroke: #4e5862; stroke-width: 1.5; stroke-linejoin: round; }
.w-shed .sh-roofline { fill: none; stroke: #b7c1cc; stroke-width: 1.2; opacity: .8; }
.w-shed .sh-fascia { fill: #3f4852; }
.w-shed .sh-sign { fill: #1f2a1b; stroke: #3b4a35; stroke-width: 1; }
.w-shed .sh-signtxt { font: 800 15px/1 "Inter", -apple-system, "Segoe UI", sans-serif; letter-spacing: .18em; fill: #b9e08e; text-anchor: middle; }
.w-shed .sh-post { stroke: #7c8676; stroke-width: 5; }
.w-shed .sh-edge { stroke: #9aa494; stroke-width: 2; }
.w-rack .rk-up { fill: none; stroke: #1f4f9a; stroke-width: 4; stroke-linecap: round; }
.w-rack .rk-beam { fill: none; stroke: #e2741a; stroke-width: 5; stroke-linecap: round; }
.w-rack .rk-beam-sh { fill: none; stroke: #9c4d0c; stroke-width: 2; opacity: .6; }
.w-pallet .pal-blk { stroke: #7d5a30; stroke-width: 2; opacity: .8; }
.w-pallet .mod { stroke: #0a1730; stroke-width: 1; }
.w-pallet .mod-hi { stroke: #6f8fc4; stroke-width: 1.2; opacity: .7; }
.w-pallet .mod-line { stroke: #4a6391; stroke-width: .8; opacity: .55; }
.w-pallet .strap { stroke: #2b302a; stroke-width: 1.6; opacity: .75; }
.w-pallet.in-ctn .mod-line { opacity: .35; }
.w-truck .tk-box { stroke: #8f99a4; stroke-width: 1.8; opacity: .55; }
.w-truck .tk-rib { stroke: #aab3bc; stroke-width: 2; opacity: .35; }
.w-truck .tk-rail { fill: #8e98a3; opacity: .9; }
.w-truck .tk-corner { stroke: #6f7a86; stroke-width: 6; stroke-linecap: round; }
.w-truck .tk-label { font: 800 22px/1 "Inter", -apple-system, "Segoe UI", sans-serif; letter-spacing: .22em; fill: #6f7a86; text-anchor: middle; opacity: .55; }
.w-truck .tk-chassis, .w-van .tk-chassis { fill: #3a4039; }
.w-truck .tk-frame { fill: #4a5248; }
.w-truck .tk-cab { stroke: #1e4012; stroke-width: 1.5; stroke-linejoin: round; }
.w-truck .tk-glass, .w-van .vn-glass { stroke: #5f7f9f; stroke-width: 1; }
.w-truck .tk-trim { stroke: #1e4012; stroke-width: 2; }
.w-truck .tk-grille { fill: #c9d1d9; stroke: #6f7a86; stroke-width: 1; }
.w-truck .tk-exhaust { stroke: #9aa39a; stroke-width: 4; stroke-linecap: round; }
.w-truck .tk-guard { fill: none; stroke: #2b302a; stroke-width: 3; }
.tk-tyre { fill: #23271f; }
.tk-rim { fill: #9ba39b; stroke: #d8ddd6; stroke-width: 1.5; }
.tk-hub { fill: #444a42; }
.w-truck .tk-door { fill: #c9d1d9; stroke: #7f8a95; stroke-width: 1.5; }
.w-van .vn-bed { fill: #3a4039; }
.w-van .vn-rail { fill: none; stroke: #3a4039; stroke-width: 3; }
.w-van .vn-cab { stroke: #8f9a86; stroke-width: 1.5; stroke-linejoin: round; }
.w-van .vn-lamp { fill: #ffd466; stroke: #c9a23a; stroke-width: 1; }
.w-fork .fk-body { stroke: #b37a12; stroke-width: 1.5; stroke-linejoin: round; }
.w-fork .fk-counter { fill: #c98a12; stroke: #8f6008; stroke-width: 1; }
.w-fork .fk-guard { fill: none; stroke: #3a4039; stroke-width: 3; stroke-linejoin: round; }
.w-fork .fk-seat { fill: #23271f; }
.w-fork .fk-mast { stroke: #3a4039; stroke-width: 4; stroke-linecap: round; }
.w-fork .fk-carriage { fill: #5a615a; }
.w-fork .fk-tine { stroke: #23271f; stroke-width: 4; stroke-linecap: round; }
.w-tag { font: 700 15px/1 "Inter", -apple-system, "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; fill: #5d6b53; text-anchor: middle; }
.i-status.w-status { bottom: 30px; }

/* ============================================================
   Act IV — the installation
   ============================================================ */
.rig, .rig-top { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rig { z-index: 1; }
.rig-top { z-index: 3; }

.r-ground { fill: none; stroke: #cdd8c0; stroke-width: 2; stroke-linecap: round; }
.r-rack { fill: none; stroke: #97a395; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.r-wall { fill: #eef1e8; stroke: rgba(30, 55, 20, .12); stroke-width: 1; }
.r-sun { transform-box: fill-box; transform-origin: center; }
.r-ray { stroke: #ffc24d; stroke-width: 1.6; stroke-dasharray: 3 10; stroke-linecap: round; }

.r-house .hb { fill: #ffffff; stroke: #c6d0bc; stroke-width: 1.5; }
.r-house .hr { fill: #e2ead6; stroke: #b9c5ae; stroke-width: 1.5; stroke-linejoin: round; }
.r-house .hd { fill: #d3dcc8; }
.r-house .hw { fill: #e6ebe0; stroke: #c6d0bc; stroke-width: 1; }
.r-house .hw-lit { fill: #ffd27a; }
.r-house .hm { fill: #ffffff; stroke: #97a395; stroke-width: 1.4; }

.wire { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.wire.dc { stroke: #F58614; }
.wire.ac { stroke: #6aa63c; }
.pt { stroke-width: 1.6; fill: #fff; }
.pt.dc { stroke: #F58614; }
.pt.ac { stroke: #4c8c2f; }

.r-label { font: 700 10.5px/1 "Inter", -apple-system, "Segoe UI", sans-serif; letter-spacing: .16em;
  text-transform: uppercase; fill: #5d6b53; text-anchor: middle; }
.r-tag { font-size: 10px; letter-spacing: .2em; }
.r-tag.dc { fill: #c96a0c; }
.r-tag.ac { fill: #4c8c2f; }

/* live output pill — JS pins it above the inverter's wall plate */
.i-kw { z-index: 4; opacity: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: #1f2a1b; color: #f4f8ee; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  padding: 7px 14px 7px 11px; border-radius: 100px; box-shadow: 0 12px 26px -14px rgba(30,55,20,.6);
  transform: translate(-50%, -100%); }
.i-kw b { font-variant-numeric: tabular-nums; font-weight: 800; }
.i-kw i { width: 8px; height: 8px; border-radius: 50%; background: #7FCB2A;
  box-shadow: 0 0 0 0 rgba(127,203,42,.6); animation: kwPulse 1.6s infinite; }
@keyframes kwPulse { 0% { box-shadow: 0 0 0 0 rgba(127,203,42,.55); } 70% { box-shadow: 0 0 0 9px rgba(127,203,42,0); } 100% { box-shadow: 0 0 0 0 rgba(127,203,42,0); } }

/* step tracker */
.i-status { z-index: 4; left: 50%; bottom: 30px; opacity: 0; transform: translate(-50%, 16px);
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 100px;
  padding: 10px 20px 10px 16px; box-shadow: 0 14px 34px -22px rgba(30,55,20,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.i-dots { display: inline-flex; gap: 6px; }
.i-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d9e2cf; transition: background .3s, box-shadow .3s; }
.i-dots i.on { background: var(--green); }
.i-dots i.cur { background: var(--green); box-shadow: 0 0 0 4px rgba(124,179,66,.22); }
.i-step { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.i-txt { font-size: 14px; font-weight: 600; color: var(--text); }
.i-status.done { background: #1f2a1b; border-color: #1f2a1b; }
.i-status.done .i-step { color: #b9e08e; }
.i-status.done .i-txt { color: #f4f8ee; }
.i-status.done .i-dots i { background: #7FCB2A; }

.prod.pan2, .prod.pan3 { z-index: 2; }

@media (max-width: 760px) {
  .duo-list { left: 16px; right: 16px; gap: 9px; }
  .duo-list .st { font-size: 15px; gap: 10px; }
  .duo-list .st i { width: 22px; height: 22px; }
  .duo-list .st i::after { left: 7px; top: 3px; width: 5px; height: 10px; border-width: 0 2px 2px 0; }
  .act-head.h-duo-top h2, .act-head.h-wh-top h2 { font-size: 23px; max-width: 22ch; margin: 0 auto; }
  /* v24: the drawing sits right under the text, full width, with the step bubble just beneath it */
  .wh-scene { top: calc(var(--nav-h) + 200px); bottom: auto; left: 0; right: 0; width: 100%; height: 44vh; max-height: none; }
  .i-status.w-status { bottom: auto; top: calc(var(--nav-h) + 200px + 44vh + 14px); transform: translate(-50%, 0); }
  .act-head.top .eyebrow { font-size: 10.5px; letter-spacing: .1em; line-height: 1.5; margin-bottom: 6px; }
  .act-head.h-wh-top p { font-size: 13.5px; margin-top: 6px; }
  .w-shed .sh-signtxt { font-size: 17px; }
  .w-tag { font-size: 20px; }
  .i-status { bottom: 18px; gap: 9px; padding: 8px 14px 8px 12px; }
  .i-step { display: none; }
  .i-txt { font-size: 12.5px; }
  .i-dots i { width: 7px; height: 7px; }
  .i-kw { font-size: 11.5px; padding: 6px 11px 6px 9px; }
  .r-label { font-size: 9px; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .rig, .rig-top, .i-status, .i-kw, .prod.pan2, .prod.pan3, .h-ins-top, .wh-scene, .h-wh-top { display: none !important; }
  .duo-list { max-width: 560px; margin: 16px auto 40px; text-align: left; }
  .duo-list .st { opacity: 1; transform: none; }
  .duo-list .st i { background: var(--grad-btn); border-color: transparent; }
  .duo-list .st i::after { opacity: 1; transform: rotate(45deg) scale(1); }
  .gtype, .ground { display: none; }
}