/* Environmental light stays inside each artwork plane, behind every control. */
.environment-life{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;contain:strict}
@media(prefers-reduced-motion:reduce){.environment-life{display:none}}

.environment-detail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;contain:strict}
@media(prefers-reduced-motion:reduce){.environment-detail{display:none}}

/* Superseded screen-space stars/mist/glints: geography-aware canvas owns these.
   Song-clock warmth, reflected light, and darkness remain untouched. */
.landscape::before,.landscape::after,.house-background::before,
.hero .song-weather .mist,.house-world .song-weather .mist,
.song-weather .glints{display:none!important}

/* Each raster layer retains its own crop throughout the dissolve. No geometry morph. */
.landscape,.world-crossfade{background-position:var(--world-desktop,50% 50%)}
.world-crossfade{position:absolute;inset:0;background-size:inherit;background-repeat:no-repeat;pointer-events:none;opacity:0}
.environment-detail{z-index:1}.environment-life{z-index:2}
@media(max-width:700px){.landscape,.world-crossfade{background-position:var(--world-portrait,27% 150px)}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.landscape,.world-crossfade{background-position:var(--world-landscape,50% 50%)}}
/* The existing HTML stays in place, giving way to the song without reflow. */
.hero .hero-content .signature,.hero .hero-content .invitation{opacity:1;visibility:visible;transition:opacity 350ms ease,visibility 350ms}
.playing .hero .hero-content .signature,.playing .hero .hero-content .invitation{opacity:0;visibility:hidden}
/* Explicit asset alpha, not a mobile browser's blend interpretation of a JPEG canvas. */
.brand :is(img,.source-visual){mix-blend-mode:normal;background:transparent}
@media(prefers-reduced-motion:reduce){.hero .hero-content .signature,.hero .hero-content .invitation{transition:opacity 150ms linear}}

/* Preserve the song light arc, translated into this climate rather than warming night. */
.hero .song-weather .warmth{opacity:calc(var(--song-warmth,.015) * var(--world-warmth,1))}

/* A quiet, accessible target at the actual painted light source. */
.well-touch{position:absolute;left:var(--well-x,50%);top:var(--well-y,57%);transform:translate(-50%,-50%);width:112px;height:76px;min-height:44px;border:0;border-radius:50%;background:transparent;padding:0;z-index:3;cursor:pointer;touch-action:manipulation}
.well-touch:focus-visible{outline:2px solid #d2ad7a;outline-offset:5px}
.brand :is(img,.source-visual){filter:brightness(calc(1 + var(--entry-charge,0)*.4)) drop-shadow(0 0 calc(var(--entry-charge,0)*14px) #d9c6a855)}
@media(prefers-reduced-motion:reduce){.brand :is(img,.source-visual){filter:none}}

/* Near-source density is local; controls and the registered painting stay put. */
.brand :is(img,.source-visual){transform:scale(calc(1 + var(--entry-charge,0)*.055));transform-origin:center;filter:brightness(calc(1 + var(--entry-charge,0)*.7)) drop-shadow(0 0 calc(var(--entry-charge,0)*25px) #d9c6a899)}
.threshold-flight{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;contain:strict}
@media(prefers-reduced-motion:reduce){.brand :is(img,.source-visual){transform:none;filter:none}}

/* Autonomous life stays local and below the existing hover charge. */
.brand :is(img,.source-visual){transition:filter var(--source-speed,1.7s) ease;filter:brightness(calc(1 + var(--entry-charge,0)*.7 + var(--artifact-energy,0)*.27 + var(--source-energy,0)*.32 + var(--hover-pulse,0)*.45)) drop-shadow(0 0 calc(var(--entry-charge,0)*25px + var(--artifact-energy,0)*var(--artifact-halo,1)*18px + var(--source-energy,0)*20px + var(--hover-pulse,0)*26px) var(--artifact-color,#d9c6a899))}
@media(prefers-reduced-motion:reduce){.brand :is(img,.source-visual){filter:none;transition:none}}

/* Occasional local optical phenomena, never a second full-canvas animation. */
.brand{position:relative}
.brand:after{content:'';position:absolute;pointer-events:none;left:22%;top:13.5%;width:56%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from var(--artifact-angle,0deg),transparent 0deg,var(--artifact-color,#dfc48c88) 40deg,transparent 85deg,transparent 245deg,#c8b9dd66 275deg,transparent 315deg);mask:radial-gradient(closest-side,transparent 91%,#000 96%,transparent 100%);opacity:calc(var(--artifact-ring,0)*(1 - var(--entry-charge,0)));transform:rotate(var(--artifact-angle,0deg));transition:opacity 1.2s ease,transform 3.6s ease}
.brand :is(img,.source-visual){transform:scale(calc(1 + var(--entry-charge,0)*.055 + var(--artifact-warp,0)*.009)) skewY(calc(var(--artifact-warp,0)*.45deg));transition:filter var(--source-speed,1.2s) ease,transform 1.9s ease}
@media(prefers-reduced-motion:reduce){.brand:after{display:none}.brand :is(img,.source-visual){transform:none;filter:none;transition:none}}

/* The promoted portal mark takes over from the clicked UI branding. */
html[data-threshold-flight] .brand{opacity:0;transition:opacity 180ms ease}

/* Mobile structure uses native PNG pixels; filtered luminance/glow is a separate layer. */
@media(max-width:700px),(pointer:coarse){
 .brand :is(img,.source-visual){position:relative;z-index:1;filter:none}
 .brand:before{content:'';position:absolute;inset:0 0 auto;aspect-ratio:1;pointer-events:none;z-index:0;background:url('assets/deepwell-native-transparent.png') center/contain no-repeat;transform:scale(calc(1 + var(--entry-charge,0)*.055 + var(--artifact-warp,0)*.009)) skewY(calc(var(--artifact-warp,0)*.45deg));filter:brightness(calc(1 + var(--entry-charge,0)*.7 + var(--artifact-energy,0)*.27 + var(--source-energy,0)*.32 + var(--hover-pulse,0)*.45)) drop-shadow(0 0 calc(var(--entry-charge,0)*25px + var(--artifact-energy,0)*var(--artifact-halo,1)*18px + var(--source-energy,0)*20px + var(--hover-pulse,0)*26px) var(--artifact-color,#d9c6a899));transition:filter var(--source-speed,1.2s) ease,transform 1.9s ease}
}
@media(prefers-reduced-motion:reduce){.brand:before{display:none}}

/* Artwork-aligned pond renderer replaces the old page-relative looping ovals. */
.house-world.has-artwork .house-ripples{display:none}

/* Late charge lighting stays separate from the unfiltered structural SVG. */
.critical-source-light{position:absolute;left:22.1%;top:13.6%;width:55.8%;height:55.8%;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 40%,#fff5d56b 0%,#fbd36750 25%,#ab7cf05e 62%,#e6c98515 85%,transparent 100%);box-shadow:0 0 15px #f8dc9255,0 0 30px #aa85df38;transform-origin:50% 50%}

/* Main source only: static artwork plus a small composited source-light plane.
   Changing light never rerasterizes the SVG's embedded JPEG/filter graph. */
.brand :is(img,.source-visual){filter:none;transition:transform 1.9s ease}
.brand:before{content:'';position:absolute;left:22%;top:13.5%;width:56%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:2;color:color-mix(in srgb,var(--artifact-color,#dfc48c) calc((1 - var(--field-presence,0))*100%),#ffe5b3);background:radial-gradient(ellipse,transparent 16%,currentColor 64%,transparent 100%);mask:none;-webkit-mask:none;opacity:calc(.15 + var(--artifact-energy,0)*.34 + var(--entry-charge,0)*.48);filter:none;transform:scale(calc(1 + var(--entry-charge,0)*.025 + var(--artifact-warp,0)*.009));transition:color 1.4s ease,opacity 700ms ease,transform 1.9s ease}
.brand:after{opacity:calc(.20 + var(--artifact-energy,0)*.50 + var(--entry-charge,0)*.50);color:color-mix(in srgb,var(--artifact-color,#dfc48c) calc((1 - var(--field-presence,0))*100%),#ffe5b3);background:radial-gradient(closest-side,transparent 73%,currentColor 92%,transparent 100%);mask:none;-webkit-mask:none;filter:blur(2px);transform:scale(calc(1.07 + var(--artifact-energy,0)*.14 - var(--entry-charge,0)*.08));transition:color 1.4s ease,opacity 700ms ease,transform 1.9s ease}
.brand,.brand :is(img,.source-visual){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media(max-width:700px),(pointer:coarse){.brand :is(img,.source-visual){filter:none}}
@media(prefers-reduced-motion:reduce){.brand :is(img,.source-visual){filter:none;transform:none;transition:none}.brand:before,.brand:after{display:none}}

/* Immediate contact is separate from the slowly gathered charge. No progress UI. */
.brand:before{opacity:calc(.18 + var(--artifact-energy,0)*.40 + var(--source-contact,0)*.30 + var(--entry-charge,0)*.38);transform:scale(calc(1 + var(--source-contact,0)*.08 - var(--entry-charge,0)*.045 + var(--artifact-warp,0)*.012));transition:color 950ms ease,opacity 140ms ease,transform 550ms ease}
.brand:after{opacity:calc(.20 + var(--artifact-energy,0)*.50 + var(--source-contact,0)*.40 + var(--entry-charge,0)*.30);transform:scale(calc(1.10 + var(--artifact-energy,0)*.16 + var(--source-contact,0)*.11 - var(--entry-charge,0)*.18 + var(--source-warble,0)*.022));transition:color 950ms ease,opacity 140ms ease,transform 180ms ease}
.brand :is(img,.source-visual){transform:scale(calc(1 + var(--entry-charge,0)*.035 + var(--artifact-warp,0)*.009)) skewY(calc(var(--source-warble,0)*.24deg));transition:transform 180ms ease}
body:has(.landscape[data-world="9"]) header .brand :is(img,.source-visual){filter:drop-shadow(0 1px 2px #172938b3) drop-shadow(0 0 5px #30284c66)}
.brand .source-hit{position:absolute;inset:-14px;z-index:3;touch-action:none;-webkit-touch-callout:none;user-select:none}
.source-follow{display:block;position:fixed;left:max(18px,env(safe-area-inset-left,0px));top:var(--follow-top,12px);width:36px;height:36px;z-index:3;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 220ms ease,visibility 220ms;touch-action:none}
.source-follow-landscape{left:calc(18px + env(safe-area-inset-left,0px));top:max(var(--follow-top,24px),calc(16px + env(safe-area-inset-top,0px)))}
.source-follow-visible{opacity:1;visibility:visible;pointer-events:auto}
.source-crop{display:block;width:36px;height:36px;overflow:hidden;border-radius:50%;position:relative}
.source-follow .source-crop :is(img,.source-visual){position:absolute;width:64.5px;height:64.5px;max-width:none;left:-14.25px;top:-8.8px}
.source-follow:before,.source-follow:after{left:0;top:0;width:100%;height:100%}
.source-follow .source-hit{inset:-16px}
@media(prefers-reduced-motion:reduce){.brand :is(img,.source-visual){transform:none;filter:none}.brand:before,.brand:after{display:none}.source-follow{transition:none}}

.brand,.brand .source-hit{-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;background-color:transparent}
.brand :is(img,.source-visual),.brand .source-crop{pointer-events:none;-webkit-user-drag:none;user-drag:none}
.brand .source-hit{display:block;background:transparent!important}
.brand:before{box-shadow:0 0 calc(2px + var(--source-contact,0)*10px + var(--entry-charge,0)*14px) color-mix(in srgb,var(--artifact-color,#dfc48c) 65%,transparent)}

body:has(.landscape[data-world="9"]) .brand :is(img,.source-visual){filter:drop-shadow(0 1px 1px #071b30dd) drop-shadow(0 0 3px #112640b0)}
body:has(.landscape[data-world="9"]) .brand{isolation:isolate}

/* One semantic source control: visual pixels never own browser image/link gestures. */
button.brand{appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;line-height:0;display:block;background:transparent;overflow:visible}
button.brand picture,button.brand :is(img,.source-visual),button.brand .source-crop,button.brand .source-hit{pointer-events:none}
button.brand::before,button.brand::after{pointer-events:none}
button.brand .source-hit{pointer-events:auto}

/* Frozen final composite remains above weather while the outgoing world dissolves. */
.world-outgoing{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

.source-visual{display:block;pointer-events:none;-webkit-user-drag:none}
html[data-source-touch] .landscape,html[data-source-touch] .world-crossfade,
html[data-source-touch] .house-background,html[data-source-touch] .house-identity img{
 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;
}

.world-prepared{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}