.cdf-intro { text-align:center; padding:65px 24px 75px; background:#080e1a; color:#eef2fa; }
.cdf-intro h1 { font-size:clamp(28px,4vw,48px); font-weight:500; letter-spacing:-.04em; margin:12px 0; }
.cdf-intro>p:last-child { color:#9caac1; margin:0; }
.cdf { --cdf-ink:#111c22; background:var(--cdf-ink); color:#eef3fc; overflow:clip; }
.cdf a { color:inherit; }
.cdf a:focus-visible,.cdf button:focus-visible { outline:2px solid #ffc77f; outline-offset:6px; }
.cdf-scene { position:relative; isolation:isolate; height:100svh; min-height:700px; overflow:hidden; background:linear-gradient(#080e1a 0%,#547e9a 32%,#d4ad79 68%,#26372f 100%); }
.cdf[data-cinematic="true"] .cdf-sequence { height:200svh; min-height:1100px; }
.cdf[data-cinematic="true"] .cdf-scene { position:sticky; top:min(0px,calc(100svh - max(100svh,700px))); }
.cdf-near { position:absolute; inset:0; scale:calc(.84 * var(--cdf-push,1)); transform-origin:32% 80%; }
.cdf-distance { position:absolute; inset:0; scale:.88; transform-origin:50% 80%; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.cdf-world { position:absolute; width:min(100%,1942px); height:100%; left:50%; bottom:0; transform:translateX(-50%); pointer-events:none; mask-image:linear-gradient(transparent,rgba(0,0,0,.3) 10%,rgba(0,0,0,.8) 22%,#000 32%); }
.cdf-layer { position:absolute; display:block; height:auto; max-width:none; }
.cdf-sky-field { position:absolute; inset:0; pointer-events:none; overflow:hidden; mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 22%,#000 34%,#000 78%,transparent 100%); }
.cdf-sky { top:0; left:-5%; width:110%; height:90%; object-fit:fill; opacity:1; mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.65) 6%,#000 14%,#000 86%,rgba(0,0,0,.65) 94%,transparent 100%);  }
.cdf-landscape { width:100%; left:0; bottom:0; }
.cdf-rocks { width:70%; left:0; bottom:-4%; }
.cdf-tower { position:absolute; width:20%; max-width:340px; left:21.5%; bottom:20%; }
.cdf-tower>img { display:block; width:100%; height:auto; }
.cdf-tower-body { mask-image:none; }
.cdf-cat { width:12%; left:43%; bottom:18%; transform-origin:50% 95%; animation:cdf-breathe 5s ease-in-out infinite alternate; }
.cdf-tree { position:absolute; left:var(--tree-x); bottom:var(--tree-bottom,-12%); width:var(--tree-width); translate:calc(var(--cdf-scroll) * var(--tree-drift)) calc(var(--cdf-scroll) * var(--tree-depth)); }
.cdf-tree img { display:block; width:100%; height:auto; max-width:none; transform-origin:50% 98%; filter:brightness(var(--tree-light,1)); animation:cdf-tree-sway var(--tree-duration) ease-in-out var(--tree-delay) infinite alternate; }
.cdf-tree-left-far { --tree-x:14%; --tree-width:11%; --tree-bottom:-5%; --tree-depth:-.18; --tree-drift:.025; --tree-duration:17s; --tree-delay:-8s; --tree-angle:.4deg; --tree-light:.6; }
.cdf-tree-right-far { --tree-x:76%; --tree-width:12%; --tree-bottom:-5%; --tree-depth:-.25; --tree-drift:-.035; --tree-duration:19s; --tree-delay:-13s; --tree-angle:.35deg; --tree-light:.55; }
.cdf-tree-left-mid { --tree-x:3%; --tree-width:20%; --tree-depth:-.42; --tree-drift:.075; --tree-duration:13s; --tree-delay:-5s; --tree-angle:.6deg; --tree-light:.8; }
.cdf-tree-right-mid { --tree-x:83%; --tree-width:19%; --tree-depth:-.48; --tree-drift:-.085; --tree-duration:15s; --tree-delay:-11s; --tree-angle:.55deg; --tree-light:.75; }
.cdf-tree-left-near { --tree-x:-14%; --tree-width:36%; --tree-bottom:-19%; --tree-depth:-.72; --tree-drift:.16; --tree-duration:10s; --tree-delay:-3s; --tree-angle:.8deg; }
.cdf-tree-right-near { --tree-x:91%; --tree-width:29%; --tree-bottom:-19%; --tree-depth:-.82; --tree-drift:-.18; --tree-duration:12s; --tree-delay:-9s; --tree-angle:.7deg; }
/* Independent translate composes with breathing/sway transforms. Grounded
   objects share a depth so the cat and tower stay planted on the rocks. */
.cdf-scene { --cdf-scroll:0px; }
.cdf-sky,.cdf-pollen,.cdf-sun-haze { translate:0 calc(var(--cdf-scroll) * .35); }
.cdf-pollen,.cdf-embers { position:absolute; inset:0; }
.cdf-landscape,.cdf-water,.cdf-mist-back { translate:0 calc(var(--cdf-scroll) * .35); }
.cdf-landscape { bottom:-55px; }
.cdf-mist { translate:0 calc(var(--cdf-scroll) * .15); }
.cdf-near,.cdf-embers { translate:0 calc(var(--cdf-scroll) * -.2); }
.cdf-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#080e1a 0%,#080e1ab3 10%,#080e1a40 23%,transparent 36%,transparent 62%,#070e1a26 80%,#070e1a40 94%,#070e1a55 100%),linear-gradient(270deg,rgba(3,10,25,.68),transparent 63%); }
.cdf-copy { position:absolute; top:18%; right:max(6%,calc((100vw - 1400px)/2)); width:36%; max-width:540px; text-shadow:0 2px 25px #050d20; }
.cdf-brand { display:inline-flex; align-items:center; gap:12px; font-size:30px; font-weight:700; letter-spacing:-1px; text-decoration:none; }
.cdf-brand img { object-fit:contain; }
.cdf-eyebrow { font:10px/1.8 var(--mono,monospace); letter-spacing:.23em; color:#bdcadf; }
.cdf-copy .cdf-eyebrow { margin:22px 0 15px; }
.cdf-copy :is(h1,h2) { font-size:clamp(36px,4.4vw,72px); line-height:1.06; letter-spacing:-.045em; font-weight:500; margin:0 0 20px; }
.cdf-scroll-cue { display:none; position:absolute; left:50%; bottom:calc(var(--cdf-footer-height,170px) + 20px); translate:-50% 0; color:#d5dfec; font:9px/1.6 var(--mono,monospace); letter-spacing:.2em; opacity:calc(1 - var(--cdf-progress,0)); }
.cdf-scroll-cue span { display:block; text-align:center; font-size:22px; margin-top:8px; }
.cdf[data-cinematic="true"] .cdf-scroll-cue { display:block; }
.cdf-progress { position:absolute; z-index:3; bottom:var(--cdf-footer-height,170px); left:0; right:0; height:1px; background:linear-gradient(90deg,#f5ac55,#ffdb9a); transform:scaleX(var(--cdf-progress,0)); transform-origin:left; opacity:.5; }
.cdf-copy>p:not(.cdf-eyebrow) { font-size:14px; line-height:1.8; color:#c0cde1; }
.cdf-cta { display:inline-flex; align-items:center; gap:40px; border:1px solid #f8bd6a80; border-radius:5px; padding:12px 20px; margin-top:14px; background:#edaa4212; font-size:13px; transition:background .2s,border-color .2s; }
.cdf .cdf-cta:hover { background:#edaa422b; border-color:#ffc97f; text-decoration:none; }
.cdf-cta span { color:#ffc77f; font-size:20px; }
.cdf-motion { padding:6px 10px; background:#09122260; border:1px solid #bac8e130; border-radius:30px; cursor:pointer; font:10px/1.5 var(--mono,monospace); letter-spacing:.03em; color:#bec7d8; }
.cdf-motion:hover { color:white; border-color:#bac8e180; }
.cdf-bottom { position:absolute; z-index:2; bottom:0; left:0; right:0; padding:18px max(28px,calc((100% - 1260px)/2)) 10px; display:grid; grid-template-columns:210px 1fr; column-gap:48px; row-gap:14px; background:rgba(2,5,11,.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid #d9e4ff20; }
.cdf-signoff .cdf-brand { font-size:20px; }
.cdf-signoff .cdf-brand span { color:#eeb56c; margin-left:8px; font-size:20px; }
.cdf-signoff p { max-width:210px; margin:5px 0 0; font-size:11px; line-height:1.5; color:#99a8c0; }
.cdf-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cdf-nav>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; align-content:start; }
.cdf-nav h3 { grid-column:1/-1; margin:0 0 6px; color:#d8e1f0; text-transform:uppercase; font:9px/1.5 var(--mono,monospace); letter-spacing:.13em; }
.cdf-nav a { display:block; width:fit-content; padding:4px 0; font-size:11px; line-height:1.4; color:#b3bed0; }
.cdf-nav a:hover { color:#ffcd8c; }
.cdf-colophon { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:8px; border-top:1px solid #a3b4cd18; color:#94a2b9; font:10px/1.6 var(--mono,monospace); }
.cdf-footer-controls { display:flex; align-items:center; gap:18px; }
/* All motion is decorative and remains still until JS enables it in view. */
.cdf-animated { animation-play-state:paused !important; }
.cdf[data-moving="true"] .cdf-animated { animation-play-state:running !important; }
.cdf-sun-haze { position:absolute; left:6%; top:1%; width:47%; height:43%; border-radius:50%; background:radial-gradient(ellipse at 34% 40%,#29e5b328,transparent 63%),radial-gradient(ellipse at 70% 60%,#21b9dc20,transparent 60%); filter:blur(25px); mix-blend-mode:screen; transform-origin:top; animation:cdf-sun-haze 17s ease-in-out infinite alternate; }
.cdf-beacon { position:absolute; left:50%; top:10.6%; width:27%; aspect-ratio:1; translate:-50% -50%; pointer-events:none; }
.cdf-beacon i { position:absolute; inset:0; border:1px solid #ffd18b; border-radius:50%; box-shadow:0 0 8px #ffae5270,inset 0 0 6px #ff9a3940; opacity:.5; animation:cdf-ring 5s ease-out infinite; }
.cdf-beacon i:nth-child(2) { scale:.72; animation-delay:-2.5s; }
.cdf-beacon b { position:absolute; inset:-80%; border-radius:50%; background:radial-gradient(circle,#fff0c680 0%,#ffb44455 16%,#ff830a28 35%,#ff830a0a 52%,transparent 70%); mix-blend-mode:screen; animation:cdf-glow 4s ease-in-out infinite alternate; }
.cdf-beacon-canvas { position:absolute; left:50%; top:10.6%; width:160%; height:auto; aspect-ratio:1; translate:-50% -50%; pointer-events:none; mix-blend-mode:screen; }
.cdf[data-beacon-renderer="webgl"] .cdf-beacon { visibility:hidden; }
.cdf-lamp-bloom { position:absolute; left:65%; top:57.4%; width:29%; aspect-ratio:1; translate:-50% -50%; background:radial-gradient(circle,#ffc36550,#ff910d20 35%,transparent 70%); mix-blend-mode:screen; pointer-events:none; animation:cdf-glow 4s ease-in-out -1.2s infinite alternate; }
.cdf-mist { position:absolute; top:54%; left:38%; width:58%; height:15%; background:radial-gradient(ellipse,#a4c8fa25,transparent 68%); filter:blur(12px); animation:cdf-mist 26s ease-in-out infinite alternate; }
.cdf-mist-back { top:43%; left:26%; width:55%; height:9%; opacity:.6; animation-duration:36s; animation-delay:-12s; }
.cdf-water { position:absolute; left:61%; top:58%; width:21%; height:15%; background:repeating-linear-gradient(178deg,transparent 0 8px,#b8dcff18 9px,transparent 10px 17px); mask-image:radial-gradient(ellipse,#000,transparent 67%); animation:cdf-water 9s ease-in-out infinite alternate; }
.cdf-pollen i { position:absolute; width:2px; height:2px; background:#e0f4ff; border-radius:50%; box-shadow:0 0 5px #aed8ff; animation:cdf-pollen-drift var(--duration) ease-in-out infinite alternate; animation-delay:var(--delay); opacity:.15; }
.cdf-embers i { position:absolute; left:var(--x); top:var(--y); width:2px; height:2px; border-radius:50%; background:#ffc582; box-shadow:0 0 6px #ffae4b; opacity:0; animation:cdf-ember var(--duration) ease-out infinite; animation-delay:var(--delay); }
@keyframes cdf-sun-haze { to { transform:translate(4%,5%) skewX(-8deg) scaleY(1.13); opacity:.45; } }
@keyframes cdf-ring { 0% { transform:scale(.7); opacity:0; } 18% { opacity:.45; } 100% { transform:scale(2.5); opacity:0; } }
@keyframes cdf-glow { to { opacity:.45; transform:scale(.85); } }
@keyframes cdf-mist { to { transform:translateX(-12%) scaleX(1.12); opacity:.45; } }
@keyframes cdf-water { to { transform:translateY(5px) scaleX(1.08); opacity:.35; } }
@keyframes cdf-ember { 15%,55% { opacity:.6; } 100% { transform:translate(15px,-55px); opacity:0; } }
@keyframes cdf-sky { to { filter:brightness(1.13) saturate(1.12); } }
@keyframes cdf-tree-sway { from { transform:rotate(calc(var(--tree-angle) * -1)); } to { transform:rotate(var(--tree-angle)); } }
@keyframes cdf-breathe { to { transform:scale(1.012,1.018) rotate(-.3deg); } }
@media(max-width:760px) {
  .cdf-intro { padding:40px 20px; }
  .cdf-scene { height:100svh; min-height:780px; }
  .cdf[data-cinematic="true"] .cdf-scene { top:min(0px,calc(100svh - max(100svh,780px))); }
  .cdf[data-cinematic="true"] .cdf-sequence { height:190svh; min-height:1250px; }
  .cdf-scroll-cue { bottom:calc(var(--cdf-footer-height,270px) + 16px); font-size:8px; }
  .cdf-world { width:900px; height:520px; left:calc(50% + 130px); }
  .cdf-sky { left:-10%; width:140%; }
  .cdf-tower { width:20%; left:23.5%; bottom:19%; }
  .cdf-cat { width:12%; left:44%; bottom:17%; }
  .cdf-rocks { width:85%; bottom:-6%; }
  .cdf-tree-left-near { --tree-x:0%; --tree-width:22%; --tree-bottom:-17%; }
  .cdf-tree-left-mid { --tree-x:10%; --tree-width:14%; --tree-bottom:-10%; }
  .cdf-tree-left-far { --tree-x:19%; --tree-width:9%; --tree-bottom:-5%; }
  .cdf-tree-right-near { --tree-x:56%; --tree-width:23%; --tree-bottom:-17%; }
  .cdf-tree-right-mid { --tree-x:52%; --tree-width:14%; --tree-bottom:-10%; }
  .cdf-tree-right-far { --tree-x:48%; --tree-width:9%; --tree-bottom:-5%; }
  .cdf-copy { top:35px; left:24px; right:24px; width:auto; max-width:450px; }
  .cdf-copy :is(h1,h2) { font-size:36px; }
  .cdf-copy .cdf-eyebrow { margin:15px 0 12px; }
  .cdf-copy>p:not(.cdf-eyebrow) { font-size:13px; }
  .cdf-brand { font-size:26px; }
  .cdf-shade { background:linear-gradient(180deg,#080e1a 0%,#080e1ae0 22%,#080e1a80 40%,#080e1a26 52%,transparent 62%,transparent 72%,#070e1a26 85%,#070e1a55 100%); }
  .cdf-bottom { grid-template-columns:1fr; gap:12px; padding:14px 20px 10px; }
  .cdf-signoff { display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .cdf-signoff p { max-width:170px; margin:0; font-size:10px; }
  .cdf-nav { gap:14px; }
  .cdf-nav>div { grid-template-columns:1fr; }
  .cdf-nav a { padding:5px 0; }
  .cdf-colophon { flex-wrap:wrap; gap:8px; }
  .cdf-colophon>span:nth-child(2) { display:none; }
  .cdf-footer-controls { gap:12px; }
  .cdf-motion { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .cdf .cdf-animated { animation:none !important; } .cdf a { transition:none; } }
@media(prefers-reduced-motion:reduce) { .cdf-world>* { translate:none; } }
@media(prefers-reduced-motion:reduce) { .cdf-distance>* { translate:none; } }
@media(prefers-reduced-motion:reduce) { .cdf-sky-field>* { translate:none; } }
@media(prefers-reduced-motion:reduce) { .cdf-near { scale:.84; } }

/* Light belongs to the scene: all these surfaces share the beacon clock. */
.cdf-scene { --cdf-light:.12; }
.cdf-rock-light { aspect-ratio:1941/810; background:radial-gradient(ellipse at 44% 48%,#ffbc6290,transparent 60%); mask:url('layers/left-day/sunlit-overlook-rounded.png') center/100% 100% no-repeat; opacity:var(--cdf-light); mix-blend-mode:screen; }
.cdf-tree-light { position:absolute; inset:0; display:block; mask:var(--cdf-tree-mask) center/100% 100% no-repeat; background:linear-gradient(90deg,transparent 38%,#ffb24b77); opacity:calc(var(--cdf-light) * .65); mix-blend-mode:screen; transform-origin:50% 98%; animation:cdf-tree-sway var(--tree-duration) ease-in-out var(--tree-delay) infinite alternate; }
.cdf-tree-right-near .cdf-tree-light,.cdf-tree-right-mid .cdf-tree-light,.cdf-tree-right-far .cdf-tree-light { background:linear-gradient(90deg,#ffb24b77,transparent 62%); }
.cdf-cat>img { display:block; width:100%; height:auto; }
.cdf-cat-canvas { position:absolute; left:-5%; top:-5%; width:110%; height:110%; pointer-events:none; }
.cdf-cat[data-rig-ready="true"]>img { visibility:hidden; }
.cdf-lamp-bloom { animation:none; opacity:calc(.25 + var(--cdf-light) * .75); }

/* Keep the characters above the glass panel as its links reflow. */
.cdf-world { bottom:max(0px,calc(var(--cdf-footer-height,170px) - 80px)); }

/* Warm daylight atmosphere. Layer composition is defined in scene.css. */
.cdf-shade { background:linear-gradient(180deg,#080e1a 0%,#080e1a80 10%,transparent 30%,transparent 65%,#111c2220 85%,#111c2260 100%),linear-gradient(270deg,#152c4666,transparent 65%); }
.cdf-sun-haze { left:4%; top:20%; width:58%; height:55%; background:radial-gradient(ellipse at 40% 55%,#ffde942e,transparent 64%),radial-gradient(ellipse at 70% 65%,#ffe6c51c,transparent 65%); }

@keyframes cdf-daylight { to { filter:brightness(1.06) saturate(1.05); } }
.cdf-pollen i { width:2px; height:2px; background:#fff2c4; box-shadow:0 0 5px #ffe7a0; opacity:.12; }
@keyframes cdf-pollen-drift { to { transform:translate(12px,-20px); opacity:.45; } }
.cdf-mist { background:radial-gradient(ellipse,#ffe5bd35,transparent 68%); }
.cdf-water { background:repeating-linear-gradient(178deg,transparent 0 8px,#fff0c52e 9px,transparent 10px 17px); }
.cdf-copy { text-shadow:0 2px 18px #162d48,0 1px 4px #162d48; }
.cdf-copy .cdf-eyebrow,.cdf-copy>p:not(.cdf-eyebrow) { color:#fff1dd; }
.cdf-cta { background:#17283875; border-color:#ffe2a5a0; }
.cdf-bottom { background:rgba(10,16,16,.74); }
@media(max-width:760px) {
  .cdf-shade { background:linear-gradient(180deg,#080e1a 0%,#080e1ac9 18%,#213c5055 38%,transparent 55%,transparent 75%,#111c2255 100%); }
}