/* Seasonal home hero scenes (layouts/_partials/hero-seasons/, chosen by
   data/seasons.yaml). Each scene is one 1942×809 stage anchored to the
   bottom of the hero, with every layer placed in percentages of it, so
   the art keeps its own proportions and the props stay planted. Motion
   reuses the day scene's clock: --cdf-scroll for depth, --cdf-push for the
   near group, .cdf-animated for anything that loops. */
.cdf-hero[data-layout] .cdf-scene { background:var(--cds-night); }
.cds-sky-field { mask-image:none; }
.cds-sky { position:absolute; left:0; top:-2%; width:100%; height:104%; object-fit:cover; object-position:var(--cds-sky-x,50%) 0; translate:0 calc(var(--cdf-scroll) * .06); }
/* The stage is as wide as the world, so on very wide screens it would rise
   past the top; it sinks instead, keeping its top 15% below the hero's. */
.cds-world { container-type:size; }
.cds-stage { position:absolute; left:0; bottom:min(var(--cds-lift,0%), calc(85cqh - 100cqw * 809 / 1942)); width:100%; aspect-ratio:1942/809; }
.cds-stage img { position:absolute; display:block; max-width:none; }
.cds-far { translate:0 calc(var(--cdf-scroll) * .1); }
.cds-near { position:absolute; inset:0; scale:var(--cdf-push,1); transform-origin:70% 80%; translate:0 calc(var(--cdf-scroll) * -.18); }
.cds-ground { left:0; top:0; width:100%; height:100%; }
.cds-prop { height:auto; }
.cds-cat { transform-origin:50% 95%; animation:cdf-breathe 5s ease-in-out infinite alternate; }
.cds-tower { position:absolute; }
.cds-stage .cds-tower > img { position:relative; width:100%; height:auto; }
.cds-tower .cdf-beacon, .cds-tower .cdf-beacon-canvas { top:var(--cds-lamp-y); }
/* Framing pieces in front of everything, each with its own depth. */
.cds-tree, .cds-ice { position:absolute; translate:calc(var(--cdf-scroll) * var(--drift)) calc(var(--cdf-scroll) * var(--depth)); }
.cds-stage .cds-tree img, .cds-stage .cds-ice img { position:relative; width:100%; height:auto; }
.cds-tree img { transform-origin:50% 98%; animation:cdf-tree-sway var(--tree-duration) ease-in-out var(--tree-delay) infinite alternate; }

/* The woods (Halloween, autumn): tower up the leaf-strewn path on the
   right, the cat on the log below the copy, looking across at it. */
.cdf-hero[data-layout="woods"] { --cds-night:#0c0a22; --cds-sky-x:0%; --cds-lift:9%; }
[data-layout="woods"] .cds-far { left:-5%; top:5%; width:110%; height:100%; }
[data-layout="woods"] .cds-tower { left:62%; top:-2.9%; width:16%; --cds-lamp-y:9.5%; }
[data-layout="woods"] .cds-log { left:10%; top:54%; width:36%; }
/* Seated on the log's mossy top, measured from log.png: the surface sits
   about 40% down the image through the middle of the trunk. */
[data-layout="woods"] .cds-cat { left:26%; top:43.5%; width:12%; }
[data-layout="woods"] .cds-pumpkin-1 { left:18.3%; top:59.9%; width:5%; }
[data-layout="woods"] .cds-pumpkin-2 { left:22.6%; top:63.2%; width:3.5%; }
[data-layout="woods"] .cds-pumpkin-3 { left:64%; top:47%; width:2%; }
[data-layout="woods"] .cds-pumpkin-4 { left:75%; top:54%; width:2.8%; }
[data-layout="woods"] .cds-tree-left { left:-10%; bottom:-14.6%; width:36%; --depth:-.72; --drift:.16; --tree-duration:10s; --tree-delay:-3s; --tree-angle:.6deg; }
[data-layout="woods"] .cds-tree-right { right:-11%; bottom:-14.6%; width:36%; --depth:-.82; --drift:-.18; --tree-duration:12s; --tree-delay:-9s; --tree-angle:.5deg; }
/* The day pollen becomes fireflies low in the woods. */
[data-layout="woods"] .cdf-pollen { top:42%; }
[data-layout="woods"] .cdf-pollen i { width:3px; height:3px; background:#ffd98a; box-shadow:0 0 7px 1px #ffa938; opacity:.25; }

/* The Antarctic (Christmas, winter): drawn with the tower on the left,
   mirrored so the tower, cat and presents sit to the right of the copy and
   the tree below it. */
.cdf-hero[data-layout="antarctic"] { --cds-night:#0a1330; --cds-lift:6%; }
[data-layout="antarctic"] .cds-stage { scale:-1 1; }
[data-layout="antarctic"] .cds-far { left:-3%; top:4%; width:106%; height:100%; }
[data-layout="antarctic"] .cds-tower { left:11%; top:4.2%; width:20%; --cds-lamp-y:6.7%; }
[data-layout="antarctic"] .cds-cat { left:28%; top:53%; width:10%; }
[data-layout="antarctic"] .cds-presents { left:38%; top:69%; width:7%; }
[data-layout="antarctic"] .cds-xmas-tree { left:79%; top:36.8%; width:14%; }
[data-layout="antarctic"] .cds-ice-left { left:-8%; bottom:-10%; width:35%; --depth:-.72; --drift:.16; }
[data-layout="antarctic"] .cds-ice-right { right:-15%; bottom:-9%; width:34%; --depth:-.82; --drift:-.18; }
/* Snow instead of pollen; no embers on the ice. */
[data-layout="antarctic"] .cdf-pollen i { width:3px; height:3px; background:#fff; box-shadow:0 0 5px #e6f2ff; opacity:0; animation-name:cds-snow; animation-timing-function:linear; animation-direction:normal; animation-duration:calc(var(--duration) * 3); }
[data-layout="antarctic"] .cdf-embers { display:none; }
@keyframes cds-snow { 0% { transform:translate(0,-35vh); opacity:0; } 12%,88% { opacity:.75; } 100% { transform:translate(40px,65vh); opacity:0; } }

/* The night (the painting that closed the home page as its footer, parked
   in footer-night/): drawn with the tower on the left, mirrored like the
   Antarctic so the tower and the cat sit to the right of the copy. The
   rocky overlook is drawn into the left of its own full-size image; the
   tower and the cat stand on it where the footer stood them. Fireflies
   become faint cold sparks. No dates yet: ?season=night previews it. */
.cdf-hero[data-layout="night"] { --cds-night:#070e1a; --cds-lift:4%; }
[data-layout="night"] .cds-stage { scale:-1 1; }
[data-layout="night"] .cds-far { left:-3%; top:6%; width:106%; height:100%; }
[data-layout="night"] .cds-ground { left:5%; top:41%; width:59%; height:auto; }
[data-layout="night"] .cds-tower { left:23%; top:14%; width:17%; --cds-lamp-y:10.6%; }
[data-layout="night"] .cds-cat { left:41%; top:44%; width:10%; }
[data-layout="night"] .cds-tree-left { left:-12%; bottom:-20%; width:30%; --depth:-.72; --drift:.16; --tree-duration:10s; --tree-delay:-3s; --tree-angle:.8deg; }
[data-layout="night"] .cds-tree-right { right:-10%; bottom:-20%; width:26%; --depth:-.82; --drift:-.18; --tree-duration:12s; --tree-delay:-9s; --tree-angle:.7deg; }
[data-layout="night"] .cdf-pollen i { background:#dfe8ff; box-shadow:0 0 5px #bcd0ff; opacity:.2; }

/* Phones: a wider stage, lifted clear of the bottom fade and slid so the
   tower and the cat both fit beside each other under the copy. */
@media(max-width:760px) {
  .cdf-hero[data-layout="woods"] { --cds-sky-x:27%; --cds-lift:25%; }
  .cdf-hero[data-layout="woods"] .cdf-world { width:760px; left:calc(50% + 2px); }
  .cdf-hero[data-layout="antarctic"] { --cds-lift:22%; }
  .cdf-hero[data-layout="antarctic"] .cdf-world { width:800px; left:calc(50% - 131px); }
  .cdf-hero[data-layout="night"] { --cds-lift:22%; }
  .cdf-hero[data-layout="night"] .cdf-world { width:820px; left:calc(50% - 120px); }
}
@media(prefers-reduced-motion:reduce) {
  .cds-near { scale:1; }
  .cds-sky, .cds-far, .cds-near, .cds-tree, .cds-ice { translate:none; }
  [data-layout="antarctic"] .cdf-pollen i { opacity:.6; }
}