/* ============================================================================
 * sidq-tod.css — Time-of-day theming (shared: index.html, library.html, story.html).
 * Parallel to the Customise system (sidq-theme.js). Palette + which ambient layer
 * shows are driven entirely by the data-sidq-tod attribute, with !important so they
 * win over sidq-theme.js's inline tokens (no flash, no JS token war). Removing
 * data-sidq-tod hands the look back to Customise.
 *  → TODO: reconcile precedence between time-of-day theming and the Customise panel.
 *    The single decision point lives in sidq-tod.js (apply() + the click handoff).
 * ========================================================================== */
/* --- palettes: clouds/leaves/stars mirror existing Customise palettes; dawn is new --- */
html[data-sidq-tod="dawn"]{
  --t-bg1:#C9E0F2!important;--t-bg2:#E9D7D6!important;--t-bg3:#F8D9B8!important;
  --t-text:#3A2A28!important;--t-text2:#6E574F!important;--t-textdim:#9C857A!important;
  --t-accent:#E68A4E!important;--t-accent2:#6FB0DE!important;--t-accentdeep:#CE7838!important;
  --t-onaccent:#FFFFFF!important;--t-glow:rgba(246,196,150,.16)!important;
  --t-line:rgba(58,42,40,.10)!important;--t-card:rgba(255,255,255,.5)!important;--t-cardline:rgba(255,255,255,.82)!important;
  --tod-mote:rgba(255,238,210,.96)!important;}
html[data-sidq-tod="clouds"]{
  --t-bg1:#EEF7FE!important;--t-bg2:#E2F0FB!important;--t-bg3:#D6E9F8!important;
  --t-text:#1B3A48!important;--t-text2:#456778!important;--t-textdim:#7C9CAD!important;
  --t-accent:#E89A4A!important;--t-accent2:#5CA9DA!important;--t-accentdeep:#D17F2E!important;
  --t-onaccent:#FFFFFF!important;--t-glow:rgba(232,154,74,.09)!important;
  --t-line:rgba(27,58,72,.09)!important;--t-card:rgba(255,255,255,.5)!important;--t-cardline:rgba(255,255,255,.8)!important;}
html[data-sidq-tod="leaves"]{
  --t-bg1:#F4EEE6!important;--t-bg2:#EDE5D8!important;--t-bg3:#E6DBCA!important;
  --t-text:#2A2230!important;--t-text2:#5E5466!important;--t-textdim:#8E8294!important;
  --t-accent:#B07A3C!important;--t-accent2:#7A5A8C!important;--t-accentdeep:#9E6A2E!important;
  --t-onaccent:#FFFFFF!important;--t-glow:rgba(176,122,60,.10)!important;
  --t-line:rgba(42,34,48,.1)!important;--t-card:rgba(42,34,48,.03)!important;--t-cardline:rgba(42,34,48,.12)!important;}
html[data-sidq-tod="stars"]{
  --t-bg1:#2E1D40!important;--t-bg2:#1C1129!important;--t-bg3:#120A1B!important;
  --t-text:#F6EFE6!important;--t-text2:#C9B3E8!important;--t-textdim:#8E7CA8!important;
  --t-accent:#F4C9A0!important;--t-accent2:#E59A8A!important;--t-accentdeep:#E8B98A!important;
  --t-onaccent:#2A1B3A!important;--t-glow:rgba(244,201,160,.10)!important;
  --t-line:rgba(201,179,232,.16)!important;--t-card:rgba(255,255,255,.045)!important;--t-cardline:rgba(255,255,255,.10)!important;}

/* --- dawn horizon glow (decor; above .sky, below the ambient layers) --- */
.tod-aux{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(125% 62% at 50% 110%, rgba(247,198,150,.6), rgba(247,198,150,.18) 42%, transparent 66%)}
html[data-sidq-ambient="motes"] .tod-aux{opacity:1}   /* Customise "Dawn" theme also lights the horizon glow */
html[data-sidq-tod] .tod-aux{opacity:0}               /* when time-of-day owns the look, glow shows only at dawn */
html[data-sidq-tod="dawn"] .tod-aux{opacity:1}

/* --- rising light motes (dawn ambient): sparse warm dust catching the dawn light --- */
/* .mote = rises (translateY) + twinkles (opacity); .drift child = gentle horizontal sway. Generated in JS for organic variation. */
.tod-motes{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .8s ease;overflow:hidden}
.tod-motes .mote{position:absolute;bottom:-8%;will-change:transform,opacity;
  animation:tod-mote-rise var(--rise,28s) linear infinite, tod-mote-tw var(--tw,5.5s) ease-in-out infinite;
  animation-delay:var(--dly,0s),var(--dly2,0s)}
.tod-motes .drift{display:block;width:var(--sz,6px);height:var(--sz,6px);border-radius:50%;will-change:transform;
  background:radial-gradient(circle,var(--tod-mote,rgba(255,238,210,.96)) 0%,color-mix(in srgb,var(--t-accent) 55%,transparent) 46%,transparent 74%);
  filter:blur(.5px);
  animation:tod-mote-sway var(--sway,7s) ease-in-out infinite alternate;animation-delay:var(--dly3,0s)}
@keyframes tod-mote-rise{0%{transform:translateY(0)}100%{transform:translateY(-118vh)}}
@keyframes tod-mote-sway{0%{transform:translateX(calc(var(--drift,16px) * -1))}100%{transform:translateX(var(--drift,16px))}}
@keyframes tod-mote-tw{0%,100%{opacity:0}16%{opacity:var(--maxo,.85)}50%{opacity:calc(var(--maxo,.85) * .45)}84%{opacity:var(--maxo,.85)}}

/* --- motes ambient for the Customise "Dawn" theme (data-sidq-ambient="motes") --- */
html[data-sidq-ambient="motes"] .starfield,html[data-sidq-ambient="motes"] .leaves,html[data-sidq-ambient="motes"] .clouds{opacity:0!important}
html[data-sidq-ambient="motes"] .tod-motes{opacity:1!important}

/* --- which ambient layer shows per time-of-day (defined after → data-sidq-tod wins when present; also beats data-sidq-ambient via !important) --- */
html[data-sidq-tod] .starfield,html[data-sidq-tod] .leaves,html[data-sidq-tod] .clouds,html[data-sidq-tod] .tod-motes{opacity:0!important}
html[data-sidq-tod="dawn"] .tod-motes{opacity:1!important}
html[data-sidq-tod="clouds"] .clouds{opacity:1!important}
html[data-sidq-tod="leaves"] .leaves{opacity:1!important}
html[data-sidq-tod="stars"] .starfield{opacity:1!important}

/* --- ambient motion OFF (Accessibility "Reduce motion" / prefers-reduced-motion default): palette stays, moving layers hide (defined LAST → wins opacity ties) --- */
html[data-sidq-motion="off"] .starfield,html[data-sidq-motion="off"] .leaves,html[data-sidq-motion="off"] .clouds,html[data-sidq-motion="off"] .tod-motes{opacity:0!important}

/* --- story page: while a story is actively playing, calm the moving ambient so it doesn't
       compete with the scene art + narration (palette/sky stays). Keyed on the player's
       existing body.playing state — index/library never set it, so this is story-only. --- */
body.playing .starfield,body.playing .leaves,body.playing .clouds,body.playing .tod-motes{opacity:0!important}
body.playing .starfield span,body.playing .leaves .leaf,body.playing .clouds .cloud,body.playing .tod-motes .mote,body.playing .tod-motes .drift{animation-play-state:paused}