/* home.css — homepage: big name animation + portrait.
   Colour tokens live in base.css (light default + dark override); this file owns
   only the homepage's locked-hero layout and its dark-mode artwork tweaks. */
body[data-page="home"] {
  /* Locked one-screen hero — no scrolling. position:fixed + inset:0 pins the
     body to the viewport and removes it from flow, so there is nothing to
     scroll (overflow:hidden alone only stops the scrollbar, not programmatic
     or edge scrolling). body is the vertical frame — nav on top, .home main
     filling the rest — so the art pins to the true bottom of the viewport
     with no magic offset, and anything taller is clipped, not scrolled. */
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Footer would steal height from the locked frame — never on home. */
body[data-page="home"] #site-footer { display: none; }

.home {
  --name-w: min(90vw, 1100px);
  /* Tulsi_morph_horizontal_loop.gif's ink occupies the middle ~38% of its
     canvas height (measured across all frames, same 1080x480 canvas as the
     retired name-morph.gif), so -9% of the rendered width rides under the
     nav without reaching the lettering. Tulsi_morph_stacked_loop.gif (mobile)
     is a taller 900x700 two-line canvas whose worst-case frame (stacked
     Devanagari) only leaves ~9% blank top/bottom — the same -9% pull would
     clip its lettering, so mobile uses a proportionally smaller pull below. */
  --name-pull: -0.09;
  /* How far the art's top overlaps UP into the name's lower blank band. The art
     paints on top of the name (z-index), so this reclaims the gif's blank canvas
     below the lettering as extra art height: a taller box lets the bottom-
     anchored cover show more of the art's top (mountains / the figure's head)
     before it crops, instead of losing them on wide/short desktop frames. Sized
     to stop just below the ink (rows 148–330 of 480), never over it. (Overridden
     gentler on mobile, whose stacked gif has a much smaller blank band.) */
  --art-lift: -0.13;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
}
.home-name {
  display: flex; justify-content: center; width: 100%;
  /* top: name rises into the nav's blank band; bottom (negative): the art
     that follows overlaps up into the name's lower blank band. */
  margin-top: calc(var(--name-w) * var(--name-pull));
  margin-bottom: calc(var(--name-w) * var(--art-lift));
}
/* The art fills every pixel between the name and the bottom of the locked
   frame: flex:1 claims all remaining column height, and the img inside is
   object-fit:cover so it zooms and bleeds (crops the overflow) to fill that box
   exactly at any viewport aspect ratio — no gap, no letterbox, no scroll. As
   the frame gets relatively taller (narrower screens) the art simply zooms in
   more; as it gets wider/shorter it zooms out. Width is edge-to-edge full-bleed
   up to a 1200px cap, then a centred block on wider screens — min(100vw,1200px)
   beats the full-bleed at the cap and align-items:center on .home centres it. */
.home-portrait {
  flex: 1; min-height: 0;
  width: min(100vw, 1000px);
  overflow: hidden;
  /* paint the art on top of the name where they overlap */
  position: relative;
  z-index: 1;
}
.name-gif { width: var(--name-w); }
.portrait-img {
  width: 100%;
  /* Render ~11% taller than the frame and anchor to the BOTTOM, so the source's
     blank bottom band (the last ~10% — empty white below the grass) always hangs
     past the frame and is clipped by .home-portrait's overflow:hidden, at every
     aspect ratio. 70% horizontal keeps the reclining figure (focal point,
     centre-right) framed when a tall/narrow viewport forces a horizontal crop;
     bottom vertical keeps the books/camera at the lower edge and crops sky. */
  height: calc(100% / 0.88);
  object-fit: cover; object-position: 70% bottom;
  display: block;
}
/* Decorative line-art cloud (assets/gifs/cloud_home.gif, 1001x142). It is a pure
   overlay — position:absolute + pointer-events:none keep it out of flow so the
   nav and name are untouched, exactly as required. It's anchored to the body
   box (body is position:fixed, so this is the viewport) and parked on the LEFT
   in the white band between the centered nav links and the name.

   The gif is ink line-art on an OPAQUE white canvas (no alpha), so the trick
   that lets it "live through the white gaps" is mix-blend-mode:multiply: white
   multiplied against the paper (or the name/nav gifs' own white canvas) leaves
   the backdrop unchanged, while the grey strokes multiply down and show — so the
   cloud reads as drawn straight onto the page and passes cleanly through the
   blank areas of both the nav and the name it overlaps. z-index:2 lays it over
   the nav/name (both z-index:1). Vars below make position/size easy to nudge. */
.home-cloud {
  position: absolute;
  left: var(--cloud-left, 12vw);
  top: var(--cloud-top, clamp(58px, 11vh, 132px));
  width: var(--cloud-w, clamp(240px, 32vw, 480px));
  height: auto;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  user-select: none;
  /* Slow horizontal drift. translateX doesn't touch `left`, so positioning is
     unaffected; `alternate` eases back and forth for a seamless loop with no
     hard reset jump. Distance/time are vars so the drift is easy to retune. */
  animation: cloud-drift var(--cloud-drift-time, 32s) ease-in-out infinite alternate;
}
@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--cloud-drift-dist, 6vw)); }
}
/* Second cloud (cloud_home_2.gif, 602x102): identical overlay/blend/drift
   behaviour, only re-anchored to the top-RIGHT so it rides through the nav's
   blank top padding beside the centered links. It overrides just placement and
   the drift vars (opposite direction + slower, so the two clouds never move in
   lockstep); everything else is inherited from .home-cloud. */
.home-cloud--2 {
  left: auto;
  right: var(--cloud-right, 15vw);
  top: var(--cloud-top-2, clamp(4px, 2.5vh, 32px));
  width: var(--cloud-w-2, clamp(180px, 26vw, 380px));
  --cloud-drift-dist: -5vw;   /* drifts the opposite way to the left cloud */
  --cloud-drift-time: 22s;    /* slower pace so they desync */
}

/* Dark mode: the clouds are the same ink-on-white line-art as everything else,
   but they sit via mix-blend-mode:multiply, which collapses to black (invisible)
   on the dark ground. Invert them to white strokes and switch to screen so the
   now-black canvas drops out over black while the strokes lighten through — the
   cloud reads as drawn straight onto the dark page, exactly as multiply did on
   white. (base.css transitions the filter for a smooth toggle.) */
:root[data-theme="dark"] .home-cloud { filter: invert(1); mix-blend-mode: screen; }

/* Honour reduced-motion: hold the clouds still (matches the gif-swap policy). */
@media (prefers-reduced-motion: reduce) {
  .home-cloud { animation: none; }
}

@media (max-width: 640px) {
  /* mobile name uses the stacked gif (taller canvas, ~9% blank band), so both
     pulls are gentler to avoid reaching its two-line lettering. The tall mobile
     frame already has room, so the art needs only a small upward overlap. */
  .home { --name-w: 94vw; --name-pull: -0.045; --art-lift: -0.05; }
  /* smaller, higher clouds so they stay in the tighter mobile nav/name gaps */
  .home-cloud { --cloud-w: clamp(150px, 50vw, 260px); --cloud-top: clamp(52px, 8vh, 92px); --cloud-left: -6vw; }
  .home-cloud--2 { --cloud-w-2: clamp(120px, 42vw, 210px); --cloud-top-2: clamp(2px, 1.5vh, 16px); --cloud-right: -6vw; }
}