/* ── Discover Tajikistan ──────────────────────────────────────────
     Black field. The LoveFrom serif title is split — "Discover" | "Tajikistan"
     — flanking a circular video portal (discover-tjk-vid.mp4) that stands in
     for the painted ceramic lagan of the mockup. A muted Inter caption sits
     below. On scroll-in the words drift in from the edges and the portal lifts
     out of a soft blur; the footage then leans a few px toward the pointer so
     the lens feels alive. Stacks to a single column under 820px. */
  .tjk{
    --tjk-orb: clamp(238px, 33vw, 432px);    /* portal diameter */
    position: relative;
    z-index: 1;                              /* paint above the fixed #gl shader */
    min-height: 100vh;                       /* fallback: iOS Safari < 15.4 lacks svh/dvh */
    min-height: 100svh;                      /* fallback for browsers without dvh */
    min-height: 100dvh;                      /* fill the *visible* viewport — grows as the mobile toolbar hides, so no neighbour peeks through */
    display: grid;
    grid-template-rows: 1fr auto 1fr;        /* portal centred in the middle band; caption pinned to the lower band */
    justify-items: center;
    text-align: center;
    /* horizontal padding floors on the side safe-areas so "Discover"/"Tajikistan"
       never slide under a landscape notch (env() is 0 in portrait / on desktop) */
    padding: clamp(34px, 6vh, 76px) max(clamp(24px, 4vw, 80px), env(safe-area-inset-left), env(safe-area-inset-right));   /* symmetric top/bottom keeps the orb dead-centre; small enough to let the caption ride low */
    background: #000;
    color: #F5F3EE;
    overflow: hidden;
  }
  /* the heading IS the layout row:  word · portal · word.
     1fr/auto/1fr keeps the portal dead-centre while the words sit out toward
     the frame edges, leaving the airy space around the orb the mockup has. */
  .tjk__stage{
    position: relative;
    grid-row: 2;                             /* the centred middle band */
    align-self: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(16px, 2vw, 40px);      /* minimum breathing room; the 1fr cols do the spread */
    width: 100%;
    max-width: 1500px;                       /* wider field → the two words sit further apart */
    margin: 0 auto;
    font-family: 'LF Serif', 'Fraunces', Georgia, 'Times New Roman', serif;
    font-optical-sizing: auto;
    font-weight: 432;
    /* cap nudged 66→72 for a touch more presence on large monitors; the vw term is
       UNCHANGED so the tablet/laptop flanking range stays put — its words already
       clear the portal by only ~23px there (1fr columns are starved if grown). The
       stacked layout below gets the real size-up, where there's room. */
    font-size: clamp(32px, 4.6vw, 72px);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .tjk__word{
    white-space: nowrap;
    text-shadow: 0 0 34px rgba(0,0,0,.55);   /* stay legible if the halo bleeds out */
  }
  .tjk__word--l{ justify-self: start; }      /* toward the left frame edge  */
  .tjk__word--r{ justify-self: end;   }      /* toward the right frame edge */

  /* the video sits plainly on the black field — no mask, no glow. Its own
     background is pure black, so the plate floats and the frame edges vanish
     into the section. */
  .tjk__orb{
    position: relative;
    display: block;
    line-height: 0;
  }
  .tjk__video{
    display: block;
    /* Portrait portal (720×1280): drive it by HEIGHT so its rendered WIDTH is
       predictable. That keeps the flanking words' 1fr grid columns from being
       starved by an over-wide auto track (which clipped "Discover"/"Tajikistan"
       at the screen edges in landscape), and lets short viewports shrink it so
       the caption below never gets pushed off the bottom. */
    height: clamp(260px, 74vh, 680px);
    width: auto;                          /* width follows the native aspect — never cropped */
    max-width: 86vw;                      /* safety: never wider than the screen */
  }

  .tjk__copy{
    grid-row: 3;                 /* the lower band */
    align-self: end;             /* pin to the very foot of the frame */
    margin-top: 0;
    max-width: 30em;
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-size: clamp(13px, 1.04vw, 15px);
    line-height: 1.7;
    color: rgba(245,243,238,.66);   /* lifted for legible contrast on the black field */
  }

  /* entrance — armed by JS (.tjk-ready), released on .is-in */
  .tjk.tjk-ready .tjk__word--l{ opacity:0; transform: translateX(-46px); filter: blur(6px); }
  .tjk.tjk-ready .tjk__word--r{ opacity:0; transform: translateX( 46px); filter: blur(6px); }
  .tjk.tjk-ready .tjk__orb    { opacity:0; transform: scale(.985); }
  .tjk.tjk-ready .tjk__copy   { opacity:0; transform: translateY(20px);   filter: blur(6px); }
  .tjk.tjk-ready .tjk__word,
  .tjk.tjk-ready .tjk__orb,
  .tjk.tjk-ready .tjk__copy{
    transition: opacity 1s ease, transform 1.15s cubic-bezier(.2,.7,.2,1), filter 1.1s ease;
  }
  .tjk.tjk-ready.is-in .tjk__word{ opacity:1; transform:none; filter: blur(0); }
  .tjk.tjk-ready.is-in .tjk__orb { opacity:1; transform:none; filter: blur(0); }
  .tjk.tjk-ready.is-in .tjk__copy{ opacity:1; transform:none; filter: blur(0); transition-delay:.18s; }
  .tjk.tjk-ready.is-in .tjk__word--r{ transition-delay:.06s; }

  @media (prefers-reduced-motion: reduce){
    .tjk__video{ transition:none; }
    .tjk.tjk-ready .tjk__word,
    .tjk.tjk-ready .tjk__orb,
    .tjk.tjk-ready .tjk__copy{ opacity:1; transform:none; filter:none; transition:none; }
  }
  /* stack the split title under 820px, where the words can't flank the orb */
  @media (max-width: 820px){
    .tjk__video{ height: clamp(220px, 52vh, 420px); }   /* portrait video can't dominate the stacked column */
    .tjk__stage{
      grid-template-columns: 1fr;
      justify-items: center;
      row-gap: clamp(18px, 4.4vw, 32px);
      max-width: 520px;
      /* stacked = single full-width column, so the words can be far bigger than the
         flanking layout allows. Sized so "Tajikistan" still clears the side padding
         down to 320px (≈4.5em wide; floor keeps margin even on the smallest phone). */
      font-size: clamp(40px, 13vw, 76px);
    }
    .tjk__word--l, .tjk__word--r{ justify-self: center; }
    .tjk.tjk-ready .tjk__word--l{ transform: translateY(-26px); }
    .tjk.tjk-ready .tjk__word--r{ transform: translateY( 26px); }
  }
  /* short / landscape viewports (e.g. a phone turned sideways): the tall portal
     would otherwise eat the whole height and push the caption off the bottom —
     shrink it and tighten the frame so the word · portal · word row AND the
     caption all stay on screen. */
  @media (max-height: 560px){
    .tjk{ padding-top: clamp(18px, 4vh, 40px); padding-bottom: clamp(18px, 4vh, 40px); }
    .tjk__video{ height: 46vh; }
    .tjk__copy{ font-size: 12px; line-height: 1.5; }
  }