/* SOL, LUNA, TERRA (W7, 4 Oct 2026). One sky in the hero: the Sun rising on Earth's limb under the Moon.
   Mounted by /site/sky/sky.js. The layer sits above .earth (z 0) and below .moon (z 1, later in the DOM) and the copy (z 3). */
.hero>.sky{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:strict}
.sky-c{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
/* the Sun's bloom and faint diffraction spikes: compositor-only layers centred on the Sun by --sx/--sy */
.sky-sol{position:absolute;left:0;top:0;width:var(--sb);height:var(--sb);margin:calc(var(--sb) / -2) 0 0 calc(var(--sb) / -2);
  transform:translate3d(var(--sx),var(--sy),0);opacity:0;transition:opacity 1.6s ease}
.sky.up .sky-sol{opacity:1}
.sky-sol i{position:absolute;inset:0;border-radius:50%;display:block}
.sky-corona{background:radial-gradient(circle,rgba(255,250,240,.34) 0,rgba(255,236,214,.16) 9%,rgba(190,214,255,.07) 26%,rgba(120,160,255,0) 50%);
  animation:sky-breathe 9s ease-in-out infinite}
.sky-rays{background:repeating-conic-gradient(from 7deg,rgba(255,248,236,.5) 0 .45deg,rgba(255,248,236,0) 1.4deg 45deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.55) 9%,rgba(0,0,0,.12) 24%,transparent 46%);
  mask:radial-gradient(circle,#000 0,rgba(0,0,0,.55) 9%,rgba(0,0,0,.12) 24%,transparent 46%);
  opacity:.55;animation:sky-turn 220s linear infinite}
.sky-rays+.sky-rays{background:repeating-conic-gradient(from 29deg,rgba(220,232,255,.42) 0 .3deg,rgba(220,232,255,0) 1deg 60deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.4) 6%,transparent 30%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.4) 6%,transparent 30%);
  opacity:.45;animation:sky-turn 340s linear infinite reverse}
@keyframes sky-breathe{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.045)}}
@keyframes sky-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sky-corona,.sky-rays,.sky-rays+.sky-rays{animation:none}.sky-sol{transition:none}}
.sky.off .sky-sol i{animation-play-state:paused}

/* THE RAINBOW (4 Oct 2026, Victor: "these 5 vertical colors/stripes, let's make them behave more like rainbow where it is
   almost impossible to tell the diff where one color starts and the other ends", with three photos of a real rainbow).
   One continuous wash across the width instead of five clipped columns: the five innovators in their order, each at
   its centre, blending through the space between in oklab so no muddy band or edge appears. Strength raised after Victor:
   "I cannot see any colors any longer ...", then 25% down again: "waaaay too bright ... go down by 25%". */
.holo{display:block;
  background:linear-gradient(90deg,rgba(245,206,52,.18) 10%,rgba(255,92,34,.225) 30%,rgba(47,120,255,.21) 50%,rgba(46,200,110,.18) 70%,rgba(150,80,225,.225) 90%);
  background:linear-gradient(in oklab 90deg,rgba(245,206,52,.18) 10%,rgba(255,92,34,.225) 30%,rgba(47,120,255,.21) 50%,rgba(46,200,110,.18) 70%,rgba(150,80,225,.225) 90%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.78),#000 48%,rgba(0,0,0,.7));mask-image:linear-gradient(180deg,rgba(0,0,0,.78),#000 48%,rgba(0,0,0,.7));
  animation:rb-breathe 11s ease-in-out infinite alternate}
.holo i{display:none}
@keyframes rb-breathe{from{opacity:.88}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.holo{animation:none}}

/* GLASS, NOT SEE-THROUGH (4 Oct 2026, Victor on the Try it firsthand card: "make the card glassmorphic NOT transparent,
   text is unreadable! increase contrast!"). With the brighter rainbow behind, near-transparent panels lost their text.
   Frosted glass: a dark body that is nearly opaque, a blur behind it, a light rim, brighter body text. */
.try{background:linear-gradient(135deg,rgba(227,200,120,.10),rgba(227,200,120,.02) 55%),rgba(10,11,26,.84);
  -webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);
  border-color:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 60px -30px rgba(0,0,0,.85)}
.try-p,.try-why{color:#d9d5cb}
.try-k span{color:#b9b5ab}
.try-story{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.try-steps{color:#f2efe8}

/* THE DOCKED TV, A REAL MINI-PLAYER (4 Oct 2026, Victor: "still showing black pop out vid in navbar"). Cause: YouTube's
   Required Minimum Functionality: "Embedded players must have a viewport that is at least 200px by 200px" (read
   4 Oct 2026, developers.google.com/youtube/terms/required-minimum-functionality). The 86x48 navbar thumbnail is below
   that, so YouTube plays the sound and draws nothing. The dock is now a compliant 356x200 mini-player at the bottom
   left (Leo lives bottom right), growing to YouTube's recommended 480x270 on hover. */
html.tv-docked .frame-view{left:20px!important;right:auto!important;top:auto!important;bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;
  width:356px;height:200px;border-radius:14px;transition-delay:.35s}
html.tv-docked .frame-view:hover,html.tv-docked .frame-view:focus-within{left:20px!important;top:auto!important;bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;
  width:480px;height:270px;transition-delay:.08s}
html.tv-docked .frame-view::after{top:10px;right:10px}
.dock-t{font:700 13px Arial,"Helvetica Neue",Helvetica,sans-serif}
@media (max-width:959px){
  html.tv-docked .frame-view,html.tv-docked .frame-view:hover,html.tv-docked .frame-view:focus-within{left:12px!important;
    bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;width:min(356px,calc(100vw - 24px));height:200px}
}

/* the research line under the hero lede (4 Oct 2026, Victor: "Part of pre-doctoral research") */
.hero .hx-research{display:block;margin:-12px 0 22px;font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(227,200,120,.82)}

/* THE GARDEN, ALIVE (4 Oct 2026, Victor: "sexify this even more ... maybe each card moves in 3Dish ways eg very slightly
   sideways"). Every tile floats on its own slow 3D sway, out of step with its neighbours; mystery tiles carry a faint
   rim in one of the five innovator colours, in order; hover tilts a tile toward you and lights it. */
.g-grid{perspective:900px}
.g-grid>li{transform-style:preserve-3d;will-change:transform;
  animation:g-sway 7.5s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -1.15s);
  transition:box-shadow .35s,border-color .35s}
.g-grid>li:nth-child(5n+1){--gc:245,206,52}.g-grid>li:nth-child(5n+2){--gc:255,92,34}.g-grid>li:nth-child(5n+3){--gc:47,120,255}
.g-grid>li:nth-child(5n+4){--gc:46,200,110}.g-grid>li:nth-child(5n+5){--gc:150,80,225}
.g-grid>li.g-q{border-color:rgba(var(--gc),.28);box-shadow:inset 0 0 22px rgba(var(--gc),.07)}
.g-grid>li.g-q .g-qa{box-shadow:0 0 0 1px rgba(var(--gc),.22),0 10px 24px -10px rgba(var(--gc),.45)}
.g-grid>li:hover,.g-grid>li:focus-visible{animation-play-state:paused;transform:translateY(-4px) rotateX(6deg) rotateY(-6deg) scale(1.04);
  box-shadow:0 18px 40px -18px rgba(var(--gc),.7),inset 0 0 28px rgba(var(--gc),.12);border-color:rgba(var(--gc),.6);z-index:2;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
@keyframes g-sway{
  0%{transform:translate3d(-2px,0,0) rotateY(-5deg) rotateX(1.5deg)}
  50%{transform:translate3d(0,-3px,6px) rotateY(0deg) rotateX(-1deg)}
  100%{transform:translate3d(2px,0,0) rotateY(5deg) rotateX(1.5deg)}}
@media (prefers-reduced-motion:reduce){.g-grid>li{animation:none}.g-grid>li:hover{transform:none}}
.g-grid>li:nth-child(3n+2){animation-delay:-2.6s;animation-duration:8.3s}.g-grid>li:nth-child(3n+3){animation-delay:-5.1s;animation-duration:6.9s}
/* the mystery tiles keep their arrival, then join the sway (site.css's .g-grid li.g-q outranks .g-grid>li) */
.g-grid>li.g-q{animation:g-q-in .5s cubic-bezier(.2,.8,.2,1) backwards,g-sway 7.5s ease-in-out .7s infinite alternate;
  animation-delay:calc(var(--i,0) * 35ms + 120ms),calc(var(--i,0) * -1.15s)}
.g-grid>li.g-q:hover{animation-play-state:paused,paused}
@media (prefers-reduced-motion:reduce){.g-grid>li.g-q{animation:none}}

/* EARTHY GARDEN (4 Oct 2026, Victor: "i dont like diff colors here, keep it green, earthy colors, soil, and the card itself
   make it deep green or earthy, olive"). The five-colour rims are gone; every tile is deep green glass over soil, each
   in a slightly different natural tone (moss, olive, fern, pine, sage), with a warm soil band at the foot. */
.g-grid>li:nth-child(5n+1){--gc:110,140,62}.g-grid>li:nth-child(5n+2){--gc:128,136,58}.g-grid>li:nth-child(5n+3){--gc:72,128,78}
.g-grid>li:nth-child(5n+4){--gc:58,104,72}.g-grid>li:nth-child(5n+5){--gc:120,146,104}
.g-grid>li,.g-grid>li.g-q{
  background:linear-gradient(180deg,rgba(var(--gc),.30),rgba(var(--gc),.16) 58%,rgba(92,64,38,.42) 100%),
    radial-gradient(90% 70% at 50% 35%,rgba(var(--gc),.22),transparent 70%),#0f1a12;
  border:1px solid rgba(var(--gc),.42);border-style:solid;box-shadow:inset 0 1px 0 rgba(220,235,190,.10),inset 0 -14px 22px -14px rgba(60,38,20,.65)}
.g-grid>li.g-q .g-qa{background:radial-gradient(circle at 40% 35%,rgba(var(--gc),.45),rgba(24,36,22,.9) 70%);
  box-shadow:0 0 0 1px rgba(var(--gc),.45),0 10px 22px -10px rgba(0,0,0,.6)}
.g-grid>li.g-q .g-qm{color:rgba(232,220,170,.85);text-shadow:0 0 12px rgba(180,200,110,.35)}
.g-grid>li:hover,.g-grid>li:focus-visible{border-color:rgba(var(--gc),.75);box-shadow:0 18px 40px -18px rgba(70,110,50,.8),inset 0 0 26px rgba(var(--gc),.18)}

/* THE GARDEN IN DAYLIGHT (4 Oct 2026, Victor: "turn the background into a Claude style earthy light mode not royal deep
   dark blue, must be organic, earthy"). Warm oat paper, clay and moss ink, a soft linen grain; the tiles stay deep green
   over soil, like pots on a potting bench. */
.garden-dlg{--ink:#2b2418;--muted:#5d5242;--dim:#7d715f;--hair:rgba(80,64,40,.22);--line:rgba(80,64,40,.18);--gold:#a8742f;
  color:#2b2418;border-color:rgba(120,96,60,.28)!important;
  background:radial-gradient(120% 70% at 15% 0%,rgba(214,190,140,.35),transparent 60%),
    radial-gradient(90% 60% at 100% 100%,rgba(150,170,110,.18),transparent 65%),#f4efe4!important;
  box-shadow:0 40px 90px -30px rgba(40,30,15,.45),inset 0 1px 0 rgba(255,255,255,.7)}
.garden-dlg::backdrop{background:rgba(30,24,14,.45)}
.garden-dlg .label,.garden-dlg h3{color:#9a6a2a}
.garden-dlg .x{color:#2b2418;border-color:rgba(80,64,40,.3);background:rgba(255,255,255,.5)}
.garden-dlg .g-big{color:#2b2418}
.garden-dlg .g-head{color:#4a4032}.garden-dlg .g-rules,.garden-dlg .g-found p{color:#6b604f}.garden-dlg .g-found b{color:#2b2418}
.garden-dlg .g-found{--track:rgba(80,64,40,.14)}
.garden-dlg .g-grid>li,.garden-dlg .g-grid>li.g-q{box-shadow:0 10px 22px -14px rgba(40,30,15,.55),inset 0 1px 0 rgba(220,235,190,.14),inset 0 -14px 22px -14px rgba(60,38,20,.65)}
.garden-dlg .g-grid>li b{color:#f3ead6}.garden-dlg .g-grid>li small{color:#cfc4a8}