/* One continuing environment. Content provides the scroll distance. */
.realm-flow{position:relative;z-index:2;background:#f8f4fc;--flow-alpha:0;--field-edge:115%;--field-x:12%;--town-x:0%;--ruin-edge:115%;--field-y:0%;--ruin-y:10%;--home-radius:0%;--home-scale:1.24}
.flow-canvas{display:none;position:fixed;inset:0;height:100svh;min-height:560px;z-index:0;overflow:hidden;pointer-events:none;opacity:var(--flow-alpha);background:#d9d5d0}
.flow-ready .flow-canvas{display:block}.realm-flow.flow-ready{background:transparent}
.flow-layer{position:absolute;inset:0;overflow:hidden}
.flow-layer img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 49%;transform-origin:60% 49%}
.flow-town img{transform:translateX(var(--town-x)) scale(1.14)}
.flow-fields{-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--field-edge) - 7%),#000 calc(var(--field-edge) + 7%));mask-image:linear-gradient(90deg,transparent calc(var(--field-edge) - 7%),#000 calc(var(--field-edge) + 7%))}
.flow-fields img{transform:translate(var(--field-x),var(--field-y)) scale(1.16);object-position:50% 52%}
.flow-ruins{-webkit-mask-image:linear-gradient(180deg,transparent calc(var(--ruin-edge) - 7%),#000 calc(var(--ruin-edge) + 7%));mask-image:linear-gradient(180deg,transparent calc(var(--ruin-edge) - 7%),#000 calc(var(--ruin-edge) + 7%))}
.flow-ruins img{transform:translateY(var(--ruin-y)) scale(1.14);object-position:50% 52%}
.flow-home{opacity:var(--home-opacity,0);-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--home-left,50%) - 8%),#000 calc(var(--home-left,50%) + 8%),#000 calc(var(--home-right,50%) - 8%),transparent calc(var(--home-right,50%) + 8%)),linear-gradient(180deg,transparent calc(var(--home-apex,105%) - 12%),#000 calc(var(--home-apex,105%) + 12%));mask-image:linear-gradient(90deg,transparent calc(var(--home-left,50%) - 8%),#000 calc(var(--home-left,50%) + 8%),#000 calc(var(--home-right,50%) - 8%),transparent calc(var(--home-right,50%) + 8%)),linear-gradient(180deg,transparent calc(var(--home-apex,105%) - 12%),#000 calc(var(--home-apex,105%) + 12%));-webkit-mask-composite:source-in;mask-composite:intersect}
.flow-home img{transform:scale(var(--home-scale));object-position:50% 50%;transform-origin:50% 50%}
.flow-layer.is-unavailable{visibility:hidden}
/* Hold the opening's final town instead of letting it slide away at the seam. */
.passage.flow-handoff .passage-stage{position:fixed;top:0;left:0;right:0;width:100%;z-index:1}
.passage.flow-handoff .passage-skip{visibility:hidden}
html.continuous-realm .passage-ground{display:none}
.realm-flow>.live-content{position:relative;z-index:1;background:transparent;overflow:visible;padding:0 0 48px}
.realm-flow .live-content .world-art{display:none}
.realm-flow .live-content .section,.realm-flow .live-content .final-cta{width:min(calc(100% - 96px),1080px);margin:0 auto 72px;padding:46px;background:#f8f4fcf5;border:1px solid #ffffffc9;border-radius:16px;box-shadow:0 16px 44px #24143312;color:#30203f;min-height:0}
.realm-flow .live-content .world{padding-top:44px}
.realm-flow .live-content .world-grid{grid-template-columns:1.3fr 1fr}
.realm-flow .live-content .world-panel-main{grid-row:span 2}
.realm-flow .live-content .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.realm-flow .live-content .features .section-heading{text-align:left;margin-left:0}
.realm-flow .live-content .features .overline{justify-content:flex-start}
.realm-flow .live-content .features .overline span:last-child{display:none}
.realm-flow .live-content .updates-heading{display:block}
.realm-flow .live-content .updates-heading>a{display:inline-flex;padding:12px 0 0}
.realm-flow .live-content .portal{grid-template-columns:1fr;gap:28px}
.realm-flow .live-content .portal-links{grid-template-columns:repeat(3,minmax(0,1fr))}
.realm-flow .live-content .portal-links>a:last-child{grid-column:auto}
.realm-flow .live-content .portal-links>a{display:flex;flex-wrap:wrap;gap:14px;padding:20px}
.realm-flow .live-content .portal-links b{margin-left:auto}

.realm-flow .live-content footer{background:#241433ed}
/* Neither scroll nor hover moves the reading surfaces or companion artwork. */
.realm-flow .live-content .world-mascot,.realm-flow .live-content .world-mascot img,.realm-flow .live-content .portal-mascot,.realm-flow .live-content .portal-mascot img,.realm-flow .live-content .final-crest img{animation:none!important;transform:none!important}
.realm-flow .live-content .feature-card,.realm-flow .live-content .update-card,.realm-flow .live-content .portal-links>a,.realm-flow .live-content .journey-steps li{transform:none!important;transition:background 160ms,border-color 160ms!important}
.realm-flow .live-content .journey-steps li:hover{padding-left:0;padding-right:0}
@media(min-width:1400px){.realm-flow .live-content .section,.realm-flow .live-content .final-cta{margin-inline:auto;width:min(72vw,1080px)}}
@media(max-width:1000px){
 .realm-flow .live-content .section,.realm-flow .live-content .final-cta{width:calc(100% - 48px);margin-inline:auto;padding:32px;margin-bottom:56px}
 .realm-flow .live-content .world-grid{grid-template-columns:1fr}.realm-flow .live-content .world-panel-main{grid-row:auto}
 .realm-flow .live-content .realm-summary dl{grid-template-columns:repeat(3,minmax(0,1fr))}
 .realm-flow .live-content .portal-links{grid-template-columns:1fr}
}
@media(max-width:600px){
 .realm-flow .live-content .section,.realm-flow .live-content .final-cta{width:calc(100% - 24px);margin-inline:auto;padding:24px 20px;border-radius:12px;margin-bottom:36px}
 .realm-flow .live-content .feature-grid,.realm-flow .live-content .updates-grid{grid-template-columns:1fr}
 .realm-flow .live-content .realm-summary{padding:18px}.realm-flow .live-content .realm-summary dl{grid-template-columns:repeat(2,minmax(0,1fr))}

 .realm-flow .live-content .section-heading h2,.realm-flow .live-content .portal-copy h2{font-size:30px}
 .realm-flow .live-content .world-panel{padding:22px}
}
@media(prefers-reduced-motion:reduce){.flow-layer img{transform:none!important}}

/* Broad water mist belongs to the shrine, beneath every reading surface. */
.flow-ruins::after{content:"";position:absolute;inset:48% -10% -12%;pointer-events:none;background:radial-gradient(ellipse at 12% 70%,#d8f6f025,transparent 48%),radial-gradient(ellipse at 90% 64%,#e4fff224,transparent 50%);animation:shrine-mist 22s ease-in-out infinite alternate;animation-play-state:paused}
.realm-flow.is-in-view .flow-ruins::after{animation-play-state:running}
.motion-paused .flow-ruins::after{animation:none;opacity:0}
@keyframes shrine-mist{from{transform:translate3d(-1.5%,1%,0);opacity:.3}to{transform:translate3d(1.5%,-1%,0);opacity:.8}}
@media(prefers-reduced-motion:reduce){.flow-ruins::after{animation:none!important;opacity:0}}

/* Near-camera leaves conceal the lateral seam; water mist softens the descent. */
.flow-bough{position:absolute;top:-10%;left:-20vw;width:40vw;height:120%;pointer-events:none;transform:translate3d(var(--bough-x,115vw),0,0);opacity:var(--bough-opacity,0)}
.flow-bough img{display:block;width:100%;height:100%;object-fit:fill}
.flow-waterfall-veil{position:absolute;inset:-14vh -10% auto;height:28vh;pointer-events:none;background:radial-gradient(ellipse at 27% 40%,#dcf4ece6,transparent 68%),radial-gradient(ellipse at 75% 60%,#e5f5f2c9,transparent 64%);transform:translate3d(0,var(--veil-y,115vh),0);opacity:var(--veil-opacity,0)}
.flow-fields::before,.flow-ruins::before,.flow-home::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light}
.flow-fields::before{background:#f8f0c8;opacity:var(--meadow-light,0)}
.flow-ruins::before{background:#77c9b1;opacity:var(--shrine-light,0)}
.flow-home::before{background:#f5c18d;opacity:var(--town-light,0)}
/* Reading surfaces stay centered. Let spacing and rules group their content. */
.realm-flow .live-content .section{padding:clamp(24px,3vw,40px)}
.realm-flow .live-content .section-heading{margin-bottom:26px}
.realm-flow .live-content .realm-summary{padding:22px 0;background:none;border:0;border-top:1px solid var(--flow-line);border-bottom:1px solid var(--flow-line);border-radius:0;box-shadow:none}
.realm-flow .live-content .world-panel{min-height:0;padding:20px 0;background:none;border:0;border-radius:0;box-shadow:none;color:var(--ink)}
.realm-flow .live-content .world-panel-main{padding-right:28px}
.realm-flow .live-content .world-panel-main p{color:var(--flow-text)}
.realm-flow .live-content .world-panel-main h3{color:var(--ink)}
.realm-flow .live-content .panel-number{font-size:clamp(48px,6vw,80px);line-height:1.1;color:var(--flow-purple)}
.realm-flow .live-content .feature-grid{gap:12px 36px}
.realm-flow .live-content .feature-card,.realm-flow .live-content .update-card{min-height:0;padding:24px 0;background:none;border:0;border-top:1px solid var(--flow-line);border-radius:0;box-shadow:none}
.realm-flow .live-content .feature-card h3{margin:12px 0 10px}
.realm-flow .live-content .feature-card:hover,.realm-flow .live-content .update-card:hover{background:#ffffff42;border-color:var(--flow-green)}
.realm-flow .live-content .feature-index{display:none}
.realm-flow .live-content .portal-links>a{padding:18px 0;background:none;border:0;border-top:1px solid var(--flow-line);border-radius:0;box-shadow:none}
.realm-flow .live-content .release-note{display:flex;align-items:center;gap:22px;margin:0 0 24px;padding:18px 0;border-top:1px solid var(--flow-line);color:var(--ink)}
.realm-flow .live-content .release-note>div{flex:1}.realm-flow .live-content .release-note p{margin:6px 0 0;color:var(--flow-text);font-size:.92rem}
.realm-flow .live-content .release-note>a,.realm-flow .live-content .balance-link a{color:var(--flow-green);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.realm-flow .live-content .balance-link{margin:0;padding-top:14px;border-top:1px solid var(--flow-line)}

@media(max-width:700px){.flow-bough{width:60vw;left:-30vw}.realm-flow .live-content .release-note{display:block}.realm-flow .live-content .release-note>a{display:inline-block;margin-top:12px}.realm-flow .live-content .world-panel-main{padding-right:0}}
@media(max-width:600px){.realm-flow .live-content .section{padding:24px 20px}.realm-flow .live-content .feature-card,.realm-flow .live-content .update-card{padding:20px 0}}
.motion-paused .flow-bough,.motion-paused .flow-waterfall-veil{display:none}
@media(prefers-reduced-motion:reduce){.flow-bough,.flow-waterfall-veil{display:none}}

/* Compact, content-sized panels. Camera pacing is independent of card height. */
.realm-flow .live-content .section,.realm-flow .live-content .final-cta{padding:clamp(24px,3vw,36px);min-height:0}
.realm-flow .live-content .final-cta{display:block;max-width:none;text-align:left;background:#f8f4fcf5;color:var(--ink)}
.realm-flow .live-content .final-cta::before{display:none}
.realm-flow .live-content .closing-intro{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:22px}
.realm-flow .live-content .final-crest{width:64px;height:64px;margin:0}
.realm-flow .live-content .final-crest img{filter:none}
.realm-flow .live-content .final-cta h2{max-width:none;margin:0;color:var(--ink);font-size:clamp(28px,3.2vw,42px);text-wrap:balance}
.realm-flow .live-content .closing-intro p{margin:12px 0 0;color:var(--flow-text)}
.realm-flow .live-content .final-cta .hero-actions{margin-top:24px;justify-content:flex-start}
.realm-flow .live-content .final-cta .button-quiet{background:transparent;color:var(--flow-purple);border-color:var(--flow-line);backdrop-filter:none}
.realm-flow .live-content .final-cta .button-quiet:hover{background:#ebe3f2;border-color:var(--flow-purple)}
.realm-flow .live-content .final-cta .final-help{margin:16px 0 0;color:var(--flow-text);font-size:.94rem}
.realm-flow .live-content .final-help a{color:var(--flow-green);text-decoration:underline;text-underline-offset:4px}
.realm-flow .live-content .closing-review{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding-top:22px;border-top:1px solid var(--flow-line);scroll-margin-top:100px}
.realm-flow .live-content .closing-review h3{margin:0;font:700 1rem/1.4 var(--display);color:var(--ink)}
.realm-flow .live-content .closing-review p{margin:6px 0 0;color:var(--flow-text);font-size:.94rem}
.realm-flow .live-content .closing-review>a{display:inline-flex;align-items:center;min-height:44px;gap:12px;flex-shrink:0;color:var(--flow-green);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.realm-flow .live-content .final-cta :focus-visible{outline:2px solid var(--flow-purple);outline-offset:4px}
@media(max-width:600px){
 .realm-flow .live-content .section,.realm-flow .live-content .final-cta{padding:24px 20px}
 .realm-flow .live-content .feature-card,.realm-flow .live-content .update-card{padding:20px 0}
 .realm-flow .live-content .closing-intro{grid-template-columns:1fr;gap:16px}
 .realm-flow .live-content .final-crest{width:48px;height:48px}
 .realm-flow .live-content .final-cta .hero-actions{flex-direction:column;align-items:stretch}
 .realm-flow .live-content .final-cta .button{white-space:normal}
 .realm-flow .live-content .closing-review{align-items:flex-start;flex-direction:column;gap:8px}
}
