/* Optional background studies; the default composition remains unchanged. */
html[data-surface=side]{background:radial-gradient(ellipse at 3% 0%,#405776,transparent 65%),#0b1420}
html[data-surface=side] body{background:#0b142040;border-color:#9cafc53b}
html[data-surface=side] body::before{background:radial-gradient(ellipse 46% 105% at 94% 50%,#66849d3b,transparent 76%),linear-gradient(105deg,#24395025,transparent 42%,#0a152340 62%,#5c79982b)}
html[data-surface=paper]{background:#303d4a}
html[data-surface=paper] body{background:#182631;border-color:#abbac438;box-shadow:inset 0 1px 0 #ffffff0a}
html[data-surface=paper] body::before{background:radial-gradient(ellipse 100% 110% at 85% 90%,#4c5c684a,transparent 75%),linear-gradient(125deg,#35485555,#15232b55)}
html[data-surface=paper] body::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
html[data-surface=tide]{background:radial-gradient(ellipse at 0% 10%,#426080,transparent 65%),radial-gradient(ellipse at 100% 100%,#405e59,transparent 65%),#101921}
html[data-surface=tide] body{background:#09192265;border-color:#bbd0d342}
html[data-surface=tide] body::before{background:radial-gradient(ellipse 75% 80% at 104% 103%,#648e7b50,transparent 70%),radial-gradient(ellipse 55% 120% at 57% 118%,#3b68774d,transparent 70%),radial-gradient(ellipse 55% 65% at 7% 0%,#4664833b,transparent 72%),linear-gradient(135deg,#132c3b30,#08121a65 54%,transparent)}

/* Material studies: colour moves beneath a stationary glass wash. */
html:is([data-surface=mistflow],[data-surface=inkflow],[data-surface=refraction],[data-surface=sediment]){background:#17222e}
html:is([data-surface=mistflow],[data-surface=inkflow],[data-surface=refraction],[data-surface=sediment]) body{background:#0d1821;isolation:isolate}
html:is([data-surface=mistflow],[data-surface=inkflow],[data-surface=refraction],[data-surface=sediment]) body::before{z-index:-1;background:linear-gradient(90deg,#09131d70,#111b2826 60%,#0b151c15);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.surface-motion{position:absolute;inset:0;z-index:-2;border-radius:inherit;overflow:hidden;pointer-events:none;contain:paint}
.surface-motion i{position:absolute;display:block;inset:-20%;will-change:transform;animation:mist-slide 18s ease-in-out infinite alternate;animation-delay:-5s}
.surface-motion i:nth-child(2){animation-duration:23s;animation-delay:-11s;animation-direction:alternate-reverse}
.surface-motion i:nth-child(3){animation-duration:27s;animation-delay:-8s}
html[data-surface=mistflow]{background:#3a4c60}
html[data-surface=mistflow] .surface-motion{background:#203546}
html[data-surface=mistflow] .surface-motion i{background:radial-gradient(ellipse 58% 32% at 62% 40%,#7899aa88,transparent 75%)}
html[data-surface=mistflow] .surface-motion i:nth-child(2){background:radial-gradient(ellipse 60% 42% at 35% 75%,#536a8599,transparent 75%)}
html[data-surface=mistflow] .surface-motion i:nth-child(3){background:radial-gradient(ellipse 60% 35% at 70% 85%,#8a9c9544,transparent 75%)}
@keyframes mist-slide{from{transform:translate(-14%,-8%) scale(1.1)}to{transform:translate(18%,12%) scale(1.2)}}
html[data-surface=inkflow]{background:#2a3036}
html[data-surface=inkflow] .surface-motion{background:#11171e}
html[data-surface=inkflow] .surface-motion i{inset:-5%;background:radial-gradient(ellipse 32% 57% at 75% 52%,#89969966,transparent 72%);animation-name:ink-curl;animation-duration:16s}
html[data-surface=inkflow] .surface-motion i:nth-child(2){background:radial-gradient(ellipse 48% 45% at 75% 45%,#060b11f5,transparent 74%);animation-duration:19s}
html[data-surface=inkflow] .surface-motion i:nth-child(3){background:radial-gradient(ellipse 35% 60% at 25% 75%,#58697655,transparent 72%);animation-duration:25s}
@keyframes ink-curl{from{transform:translate(12%,-8%) rotate(-18deg) scale(.9,1.2)}to{transform:translate(-12%,10%) rotate(24deg) scale(1.25,.86)}}
html[data-surface=refraction]{background:#343746}
html[data-surface=refraction] .surface-motion{background:#151e2b}
html[data-surface=refraction] .surface-motion i{inset:-65%;background:linear-gradient(115deg,transparent 42%,#768ba660 47%,#9caec466 49%,transparent 55%);animation-name:light-fold;animation-duration:19s}
html[data-surface=refraction] .surface-motion i:nth-child(2){background:linear-gradient(65deg,transparent 46%,#77708d66 52%,transparent 60%);animation-duration:27s}
html[data-surface=refraction] .surface-motion i:nth-child(3){background:linear-gradient(110deg,transparent 51%,#98856b44 56%,transparent 61%);animation-duration:22s}
@keyframes light-fold{from{transform:translate(-12%,-4%) rotate(-9deg)}to{transform:translate(14%,7%) rotate(12deg)}}
html[data-surface=sediment]{background:#3c413e}
html[data-surface=sediment] .surface-motion{background:#182727}
html[data-surface=sediment] .surface-motion i{background:radial-gradient(ellipse 62% 46% at 68% 60%,#997d626b,transparent 71%);animation-name:sediment-flow;animation-duration:21s}
html[data-surface=sediment] .surface-motion i:nth-child(2){background:radial-gradient(ellipse 55% 50% at 40% 55%,#55758d99,transparent 73%);animation-duration:26s}
html[data-surface=sediment] .surface-motion i:nth-child(3){background:radial-gradient(ellipse 70% 42% at 60% 75%,#477b7066,transparent 72%);animation-duration:18s}
@keyframes sediment-flow{from{transform:translate(-10%,12%) rotate(-12deg) scale(1.1,.9)}to{transform:translate(13%,-9%) rotate(12deg) scale(.9,1.2)}}
html[data-surface=sediment] body::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.surface-motion[data-paused=true] i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.surface-motion i{animation:none!important;will-change:auto}}

/* The moving material belongs to the viewport; the rounded pane sits above it. */
html:is([data-surface=mistflow],[data-surface=inkflow],[data-surface=refraction],[data-surface=sediment]){isolation:isolate}
html:is([data-surface=mistflow],[data-surface=inkflow],[data-surface=refraction],[data-surface=sediment]) body{background:#0b14204d;position:relative;z-index:1;backdrop-filter:blur(24px) saturate(.85);-webkit-backdrop-filter:blur(24px) saturate(.85);border-color:#c1d2df38}
html:is([data-surface=mistflow],[data-surface=inkflow],[data-surface=refraction],[data-surface=sediment]) body::before{background:linear-gradient(110deg,#15233224,transparent 65%);backdrop-filter:none;-webkit-backdrop-filter:none}
html .surface-motion{position:fixed;inset:0;z-index:0;border-radius:0;overflow:hidden;pointer-events:none;contain:paint}
html[data-surface=sediment] body::after{display:none}
html[data-surface=sediment] .surface-motion::after{content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}

/* Compositional studies: a single dominant gesture, never a field of light. */
html:is([data-surface=eclipse],[data-surface=silk],[data-surface=horizon]){background:#0d141d;isolation:isolate}
html:is([data-surface=eclipse],[data-surface=silk],[data-surface=horizon]) body{background:#0b14202e;position:relative;z-index:1;backdrop-filter:blur(18px) saturate(.75);-webkit-backdrop-filter:blur(18px) saturate(.75);border-color:#b7c8d32c}
html:is([data-surface=eclipse],[data-surface=silk],[data-surface=horizon]) body::before{background:linear-gradient(100deg,#08131b3b,transparent 75%);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-surface=eclipse] .surface-motion{background:#101e2b}
html[data-surface=eclipse] .surface-motion i:nth-child(1){inset:-20% -32% -32% 20%;border-radius:50%;background:radial-gradient(ellipse at center,#a0b5c04d 42%,#6e98ad63 56%,#547d9222 62%,transparent 70%);animation:eclipse-light 22s ease-in-out infinite alternate;animation-delay:-6s}
html[data-surface=eclipse] .surface-motion i:nth-child(2){inset:-26% -23% -15% 9%;border-radius:50%;background:#080f18;box-shadow:18px 12px 32px #a3b8c024;animation:eclipse-shadow 22s ease-in-out infinite alternate;animation-delay:-6s}
html[data-surface=eclipse] .surface-motion i:nth-child(3){inset:0;background:linear-gradient(90deg,#11253855,transparent 65%);animation:none}
@keyframes eclipse-light{from{transform:translate(2%,5%) rotate(-8deg)}to{transform:translate(-6%,-3%) rotate(8deg)}}
@keyframes eclipse-shadow{from{transform:translate(-3%,-1%) scale(.98)}to{transform:translate(4%,5%) scale(1.04)}}
html[data-surface=silk] .surface-motion{background:#171e26}
html[data-surface=silk] .surface-motion i:nth-child(1){inset:-65%;background:conic-gradient(from 25deg at 62% 48%,transparent 0deg,#71869b24 31deg,#9baab959 48deg,#3c516522 55deg,#080f1899 75deg,transparent 110deg,transparent 360deg);animation:silk-fold 24s ease-in-out infinite alternate;animation-delay:-8s}
html[data-surface=silk] .surface-motion i:nth-child(2){inset:-50%;background:conic-gradient(from 195deg at 54% 57%,transparent 0deg,#53697a18 19deg,#8697a63d 39deg,#090f1766 51deg,transparent 85deg,transparent 360deg);animation:silk-fold 29s ease-in-out infinite alternate-reverse;animation-delay:-11s}
html[data-surface=silk] .surface-motion i:nth-child(3){inset:0;background:radial-gradient(ellipse at 0% 0%,#2c405855,transparent 65%);animation:none}
@keyframes silk-fold{from{transform:translate(-4%,4%) rotate(-16deg) scale(1,1.08)}to{transform:translate(5%,-3%) rotate(14deg) scale(1.06,.95)}}
html[data-surface=horizon] .surface-motion{background:#0d1c2a}
html[data-surface=horizon] .surface-motion i:nth-child(1){inset:-30%;background:linear-gradient(169deg,transparent 0 63%,#7e878746 66%,#b9a58369 67%,#495d694d 69%,#09131ed9 73%);animation:far-light 26s ease-in-out infinite alternate;animation-delay:-9s}
html[data-surface=horizon] .surface-motion i:nth-child(2){inset:-30%;background:radial-gradient(ellipse 34% 8% at 83% 69%,#d0b89545,transparent 75%);animation:far-light 26s ease-in-out infinite alternate;animation-delay:-9s}
html[data-surface=horizon] .surface-motion i:nth-child(3){inset:0;background:linear-gradient(90deg,#101d2c66,transparent 80%);animation:none}
@keyframes far-light{from{transform:translate(-5%,4%) rotate(-5deg)}to{transform:translate(4%,-5%) rotate(5deg)}}
html[data-surface=eclipse] .surface-motion i:nth-child(1){inset:-18% -26% -18% 24%;background:radial-gradient(ellipse at center,#a0b5c04d 42%,#7fa9bc99 56%,#547d9238 64%,transparent 72%)}
html[data-surface=eclipse] .surface-motion i:nth-child(2){inset:-18% -32% -18% 27%}
.surface-motion[data-paused=true] i{animation-play-state:paused!important}

/* An uninterrupted sky; retain content geometry without a visible panel. */
html[data-surface=cosmos]{isolation:isolate;background:#090b10}
.cosmos{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
html[data-surface=cosmos] body{z-index:1;position:relative;background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-radius:0}
html[data-surface=cosmos] body::before{content:none}

/* Attention study: the work advances; only the unresolved decision holds colour. */
html[data-surface=attention]{background:#101112;isolation:isolate}
html[data-surface=attention] body{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
html[data-surface=attention] body::before{content:none}
html[data-surface=attention] .story-scene{color:#f0f1f2;transition:color 1.2s ease}
html[data-surface=attention] .story-scene[data-progress=complete]{color:#9a9fa3}
html[data-surface=attention] .story-scene .date{fill:currentColor}
html[data-surface=attention] .story-caption{color:inherit;opacity:.85}
html[data-surface=attention] .story-scene[data-scene="5"]{color:#9cc7f3}
html[data-surface=attention] .story-scene[data-scene="5"] .blue{stroke:#78b0ea}
html[data-surface=attention] .story-scene[data-scene="5"] .draw{animation-duration:2s}
@media(prefers-reduced-motion:reduce){html[data-surface=attention] .story-scene{transition:none}}