/* RKV premium visual layer: image-led storytelling, local assets, optional motion. */
/* One quiet introduction leads into the illustration, on the page's own surface. */
.home-hero { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:0; margin-top:0; padding:0; overflow:visible; border-radius:0; background:transparent; color:var(--rkv-navy); }
.home-hero::after { display:none; }
.home-hero .hero-copy { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr); align-items:start; gap:16px clamp(32px,5vw,72px); max-width:none; width:100%; margin:0; padding:clamp(32px,4.5vw,64px) 0 clamp(28px,3.5vw,48px); text-align:left; }
.home-hero .hero-copy .eyebrow { grid-column:1/-1; margin:0; color:var(--rkv-green-deep); }
.home-hero .hero-copy h1 { grid-column:1; grid-row:2/4; max-width:22ch; margin:0; color:var(--rkv-navy); font-size:clamp(2.25rem,3.8vw,3.6rem); line-height:1.08; letter-spacing:-.045em; }
.home-hero .hero-lead { grid-column:2; grid-row:2; max-width:38ch; margin:0; color:var(--rkv-text-soft); font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.65; }
.home-hero .hero-actions { grid-column:2; grid-row:3; justify-content:flex-start; align-items:center; gap:12px 22px; margin:0; }
.home-hero .text-link { color:var(--rkv-navy); }
.premium-scene { position:relative; isolation:isolate; overflow:hidden; margin:0; background:var(--rkv-navy-deep); border-radius:20px; aspect-ratio:3/2; }
.premium-scene img { width:100%; height:100%; object-fit:cover; }
.home-hero .hero-media { position:relative; inset:auto; z-index:0; width:100%; margin:0; border-radius:24px; aspect-ratio:3/2; }
.hero-media img { object-position:55% center; }
.premium-scene figcaption { position:absolute; bottom:12px; left:16px; color:white; font:500 .63rem/1.4 var(--rkv-font-body); padding:4px 7px; border-radius:4px; background:rgba(6,24,43,.65); }
.hero-media figcaption { left:16px; right:auto; bottom:14px; }
.motion-layer { position:absolute; inset:0; pointer-events:none; animation-play-state:paused!important; }
.scene-home .motion-layer { background:radial-gradient(ellipse at 65% 58%,rgba(255,214,157,.2),transparent 29%); animation:rkv-ambient-light 8s ease-in-out infinite; }
.scene-pool .motion-layer { top:52%; background:repeating-linear-gradient(171deg,transparent 0 23px,rgba(255,255,255,.17) 24px 25px,transparent 27px 51px); mix-blend-mode:soft-light; animation:rkv-water-light 7s ease-in-out infinite alternate; }
.scene-garden .motion-layer { background:radial-gradient(ellipse at 43% 63%,rgba(255,245,210,.22),transparent 21%); animation:rkv-garden-light 6s ease-in-out infinite alternate; }
.premium-scene[data-visible="true"]:not([data-paused="true"]) .motion-layer { animation-play-state:running!important; }
.scene-pause { position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 14px; border:1px solid rgba(255,255,255,.4); border-radius:999px; background:rgba(6,24,43,.8); color:white; font:650 .72rem/1.3 var(--rkv-font-body); cursor:pointer; }
.scene-pause:focus-visible { outline:3px solid var(--rkv-mint); outline-offset:3px; }
.home-addons-grid { gap:clamp(28px,4vw,56px); }
.home-addons-grid .rel-card { grid-template-columns:36px minmax(0,1fr); gap:14px 16px; }
.home-addons-grid .premium-scene { grid-column:1/-1; grid-row:1; margin-bottom:16px; width:100%; }
.home-addons-grid .home-product-icon { grid-row:2; }
.home-addons-grid h4 { grid-row:2; }
.home-addons-grid p { grid-row:3; }
.home-addons-grid .text-link { grid-row:4; }
@keyframes rkv-ambient-light { 0%,100%{opacity:.3}50%{opacity:.9} }
@keyframes rkv-water-light { from{transform:translate3d(-7px,0,0);opacity:.35}to{transform:translate3d(7px,5px,0);opacity:.7} }
@keyframes rkv-garden-light { from{opacity:.2}to{opacity:.75} }
@media(max-width:600px) { .home-addons-grid .premium-scene { margin-bottom:8px; } .premium-scene figcaption { font-size:.59rem; left:8px; padding:3px 5px; } .scene-pause { right:8px; bottom:8px; padding-inline:10px; font-size:.65rem; } }
@media(prefers-reduced-motion:reduce) { .premium-scene .motion-layer { animation:none!important; opacity:0; } .scene-pause { display:none; } }

/* Visible, schematic energy / water motion; fully controlled by scene pause state. */
.premium-scene .motion-layer { background:none; inset:0; mix-blend-mode:normal; animation:none; }
.scene-traces { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; }
.scene-traces .trace-base { stroke:rgba(9,35,49,.6); stroke-width:8; stroke-linejoin:round; }
.scene-traces .trace-flow { stroke:#65ffbf; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:12 32; animation:rkv-energy-travel 3s linear infinite; }
.scene-traces circle { fill:#b8ffe0; stroke:#097958; stroke-width:3; }
.scene-traces .water-flow { stroke:rgba(232,255,255,.85); stroke-width:4; stroke-linecap:round; stroke-dasharray:40 90; animation:rkv-water-travel 4s linear infinite; }
.scene-traces .spray-flow { stroke:#dcf9ff; stroke-width:4; stroke-linecap:round; stroke-dasharray:3 22; opacity:.85; animation:rkv-spray-travel 2s linear infinite; }
.premium-scene .visual-motion { animation-play-state:paused!important; }
.premium-scene[data-visible="true"]:not([data-paused="true"]) .visual-motion { animation-play-state:running!important; }
@keyframes rkv-energy-travel { to { stroke-dashoffset:-176; } }
@keyframes rkv-water-travel { to { stroke-dashoffset:-260; } }
@keyframes rkv-spray-travel { to { stroke-dashoffset:-100; } }
@media(prefers-reduced-motion:reduce) { .premium-scene .visual-motion { animation:none!important; } .premium-scene .motion-layer { opacity:0; } }

/* Image and vector share the full source plane. No independent cover crops. */
.registered-scene { aspect-ratio:3/2; }
.registered-scene > img { width:100%; height:100%; object-fit:contain; object-position:center; }
.registered-scene .motion-layer { inset:0; }
.registered-traces { width:100%; height:100%; }
.registered-scene .scene-traces .trace-flow { stroke:#6fffc0; stroke-width:2.6; stroke-dasharray:8 28; opacity:.86; animation-duration:4s; }
.registered-scene .wire-charging { stroke-width:2; }
.registered-scene .scene-traces .water-flow { stroke:#e9ffff; stroke-width:2.2; stroke-dasharray:70 330; opacity:.5; animation:rkv-pool-surface 7s linear infinite; }
.registered-scene .water-glint { fill:none; stroke:#fff; stroke-width:1.6; stroke-dasharray:32 510; opacity:.35; animation:rkv-pool-surface 10s linear infinite reverse; }
.registered-scene .scene-traces .spray-flow { stroke:#f3fcff; stroke-width:1.8; stroke-dasharray:1 17; opacity:.6; animation:rkv-nozzle-spray 1.8s linear infinite; }
.scene-detail-link { position:absolute; top:16px; right:16px; padding:10px 14px; min-height:44px; display:inline-flex; align-items:center; border-radius:999px; font:650 .75rem var(--rkv-font-body); color:white; background:rgba(6,24,43,.82); text-decoration:none; }
@keyframes rkv-pool-surface { to { stroke-dashoffset:-800; } }
@keyframes rkv-nozzle-spray { to { stroke-dashoffset:-108; } }
@media(max-width:700px) { .home-hero .hero-copy { grid-template-columns:1fr; gap:18px; padding-block:28px 28px; } .home-hero .hero-copy h1,.home-hero .hero-lead,.home-hero .hero-actions { grid-column:1; grid-row:auto; } .home-hero .hero-copy h1 { font-size:clamp(2.05rem,7.5vw,3rem); max-width:24ch; } .home-hero .hero-actions { align-items:flex-start; flex-direction:column; gap:8px; } .home-hero .hero-media { border-radius:18px; } .scene-detail-link { top:8px; right:8px; font-size:.65rem; padding:8px 12px; } .hero-media figcaption { left:8px; bottom:60px; } }
@media(prefers-reduced-motion:reduce) { .registered-scene .visual-motion { animation:none!important; } }

/* Controller activity is illustrative; no telemetry or network connection. */
.pc-activity { fill:#8dffbd; stroke:none; animation:rkv-controller-led 2.4s ease-in-out infinite; }
.pc-focus { fill:none; stroke:#89ffc4; stroke-width:3; opacity:0; transform-box:fill-box; transform-origin:center; animation:rkv-controller-focus 14s ease-out infinite; animation-delay:-9s; }
.pc-detail { opacity:0; animation:rkv-controller-reveal 14s ease-in-out infinite; animation-delay:-9s; }
.pc-detail > rect { fill:rgba(7,32,51,.94); stroke:rgba(137,255,196,.72); stroke-width:1.6; }
.pc-detail > text { fill:white; font:700 20px var(--rkv-font-display); }
@keyframes rkv-controller-led { 0%,100% { opacity:.28; } 45%,65% { opacity:1; } }
@keyframes rkv-controller-focus { 0%,62%,100% { opacity:0; transform:scale(1); } 66% { opacity:1; transform:scale(1); } 82% { opacity:0; transform:scale(1.6); } }
@keyframes rkv-controller-reveal { 0%,62%,100% { opacity:0; } 68%,88% { opacity:1; } 95% { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .scene-home.registered-scene .motion-layer { opacity:1; } .scene-home .installed-conduits { opacity:.35; } .pc-activity { opacity:.8; } .pc-focus { opacity:0; } .pc-detail { opacity:1; } }
@media(max-width:700px) { .pc-detail { transform-box:fill-box; transform-origin:top right; transform:scale(2.2); } }
.scene-detail-link { left:16px; right:auto; }
@media(max-width:700px) { .scene-detail-link { left:8px; right:auto; } }

/* Storage activity is registered to the battery panel, never a live charge value. */
.registered-scene .battery-charge { fill:none; stroke:#83ffd0; stroke-width:3; stroke-linecap:round; stroke-dasharray:5 28; opacity:.75; animation:rkv-battery-charge 3s linear infinite; }
@keyframes rkv-battery-charge { to { stroke-dashoffset:-66; } }
@media(prefers-reduced-motion:reduce) { .registered-scene .battery-charge { opacity:.3; } }

/* Battery segments fill and breathe together; purely illustrative. */
.registered-scene .battery-charge { stroke-width:4; stroke-dasharray:25 0; filter:drop-shadow(0 0 3px rgba(111,255,192,.45)); animation:rkv-bess-pulse 3.6s ease-in-out infinite; }
@keyframes rkv-bess-pulse { 0%,100% { opacity:.15; } 48%,62% { opacity:.95; } }
@media(prefers-reduced-motion:reduce) { .registered-scene .battery-charge { opacity:.4; filter:none; } }