/* life.css - the motion & ambience layer for Chess Review.
   Loaded by standalone pages; the game template inlines the same tokens.
   Everything respects prefers-reduced-motion. */

:root { --lf-gold: #d5b26b; --lf-gold-hi: #ecd6a4; }

/* ---------- ambient aurora ---------- */
.lf-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lf-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.lf-aurora i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-18vw;background:radial-gradient(circle,rgba(213,178,107,.16),transparent 70%);animation:lfDrift1 26s ease-in-out infinite alternate}
.lf-aurora i:nth-child(2){width:44vw;height:44vw;right:-12vw;top:-8vw;background:radial-gradient(circle,rgba(143,184,240,.10),transparent 70%);animation:lfDrift2 32s ease-in-out infinite alternate}
.lf-aurora i:nth-child(3){width:40vw;height:40vw;left:24vw;bottom:-22vw;background:radial-gradient(circle,rgba(192,106,82,.09),transparent 70%);animation:lfDrift3 38s ease-in-out infinite alternate}
@keyframes lfDrift1{to{transform:translate(9vw,7vh) scale(1.12)}}
@keyframes lfDrift2{to{transform:translate(-7vw,9vh) scale(.92)}}
@keyframes lfDrift3{to{transform:translate(5vw,-7vh) scale(1.08)}}

/* ---------- page + entrance reveals ---------- */
body{animation:lfPage .5s ease both}
@keyframes lfPage{from{opacity:0}to{opacity:1}}
.lf-reveal{opacity:0;transform:translateY(14px)}
.lf-reveal.lf-in{animation:lfUp .62s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--lf-d,0)*70ms)}
@keyframes lfUp{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
/* structural blocks (page-section children) fade without translating: a
   translating block mid-stagger slides into its neighbours' slots and the
   page reads as overlapping text for the whole animation (or longer on
   throttled devices) */
.lf-fade{opacity:0}
.lf-fade.lf-in{animation:lfFade .45s ease both;animation-delay:calc(var(--lf-d,0)*70ms)}
@keyframes lfFade{from{opacity:0}to{opacity:1}}

/* ---------- hover micro-interactions ---------- */
.lf-lift{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s;will-change:transform}
.lf-lift:hover{transform:translateY(-4px)}
.lf-tilt{transform-style:preserve-3d;transition:transform .18s ease-out}

/* ---------- gold shimmer for headings ---------- */
.lf-shimmer{background:linear-gradient(100deg,#e8dcc3 12%,var(--lf-gold) 34%,var(--lf-gold-hi) 50%,var(--lf-gold) 66%,#e8dcc3 88%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lfShimmer 7s linear infinite}
@keyframes lfShimmer{to{background-position:-220% 0}}

/* ---------- floaty pieces ---------- */
.lf-float{animation:lfFloat 7s ease-in-out infinite;will-change:transform}
@keyframes lfFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-12px) rotate(1.4deg)}}

/* ---------- confetti particle ---------- */
.lf-conf{position:fixed;z-index:9999;pointer-events:none;width:8px;height:8px;border-radius:2px;
  animation:lfFall var(--lf-t,1.1s) cubic-bezier(.2,.6,.35,1) both}
@keyframes lfFall{from{transform:translate(0,0) rotate(0) scale(1);opacity:1}
  70%{opacity:1}to{transform:translate(var(--lf-x,0),var(--lf-y,60vh)) rotate(var(--lf-r,540deg)) scale(.5);opacity:0}}

/* ---------- reduced motion: everything off ---------- */
@media (prefers-reduced-motion: reduce){
  body{animation:none}
  .lf-reveal{opacity:1;transform:none}
  .lf-fade{opacity:1}
  .lf-aurora i{animation:none}
  .lf-float{animation:none}
  .lf-shimmer{animation:none;background:none;color:inherit}
  .lf-lift:hover{transform:none}
}

/* ---------- filter groups (gallery, puzzles, openings): a label always stays with its control ----------
   Flat label/control siblings used to wrap one by one, so labels and selects alternated sides on phones. */
.fg.fg{display:inline-flex;align-items:center;gap:8px;min-width:0;white-space:normal;cursor:auto}
.fg.fg .rg{display:inline-flex;align-items:center;gap:6px}
.fg.fg .dash{color:var(--muted,#a89d8a)}
@media (max-width:640px){
  /* two groups per line, the label above its control, controls fill their cell */
  .fg.fg{flex:1 1 calc(50% - 16px);flex-direction:column;align-items:stretch;gap:5px}
  .fg.fg select{width:100%}
  .fg.fg .rg .num{flex:1 1 0;width:auto;min-width:0}
  .fg.fg.range{flex-basis:calc(50% - 16px)}
}

/* ---------- ambient aurora: static on touch / small screens ----------
   Three full-screen blurred layers animating forever is a steady GPU and battery cost on phones for a decoration. The glow stays, it just no longer drifts. */
@media (pointer:coarse), (max-width:700px){
  .lf-aurora i{animation:none;will-change:auto}
}