/* SECTION 03 — the Hidden Girgit (js/hide.js). The clay jungle covers the section; the copy is
   revealed in the dark clearing on the left once he's found. */

.hide {
  position: relative;
  isolation: isolate;
  height: calc(100svh - var(--nav-h));
  min-height: 36rem;
  overflow: hidden;
  background: #0F2416;
  color: var(--ivory);
  margin-inline: clamp(8px, 1.4vw, 20px);         /* a framed scene on the page, between ivory bridges */
  border-radius: clamp(1.25rem, 3vw, 2.5rem);
  font-family: var(--satoshi);
  touch-action: manipulation;
}
.hide-stage { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2000 / 1116; will-change: transform; }
.hide-video, .hide-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.hide-video { background: #0F2416 url('../assets/img/hide/jungle.webp') center / cover; }

/* ---------- Leaves: a slow sway; they lean in over him, stir when disturbed, part when he's found ---------- */
.leaf .lean, .leaf .sway { transform-box: fill-box; transform-origin: 50% 88%; }
.leaf .lean { transition: transform 1100ms cubic-bezier(0.22, 0.8, 0.24, 1) var(--pd, 0ms); }
.leaf.conceal .lean { transform: rotate(-4deg) scale(1.05); }
.leaf.part .lean { transform: rotate(18deg) translate(0, 10%); }   /* staggered by --pd (js/hide.js) */
.hg-glow { opacity: 0; transition: opacity 500ms; pointer-events: none; }

/* ---------- Torchlight: darkens the jungle except around the pointer (js/hide.js eases it) ---------- */
.hide-light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), transparent 0, transparent 8rem, rgb(3 10 6 / 0.25) 15rem, rgb(3 10 6 / 0.5) 30rem);
}

/* ---------- The copy: in the clearing, revealed when he's found ---------- */
.hide-copy { position: absolute; z-index: 2; left: clamp(1.25rem, 6vw, 7rem); top: 24%; max-width: min(30rem, 32vw); text-shadow: 0 2px 24px rgb(6 18 10 / 0.55); }   /* stays in the dark clearing */
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0.12em 0.16em; margin: -0.14em -0.12em -0.16em;   /* room for the whole letter: tight tracking and line-height otherwise shave its edges */ }
.hw > span { display: inline-block; }
.hide-title {
  margin: 0 0 1rem; color: var(--ivory);
  font: 900 clamp(2.6rem, 5.4vw, 6.2rem)/0.86 var(--satoshi); letter-spacing: -0.055em; text-transform: uppercase;
}
.hide-sub { margin: 0; max-width: 28ch; color: #E8E3D3; font: 500 clamp(1.05rem, 1.4vw, 1.35rem)/1.45 var(--satoshi); }
/* While searching, the words wait out of sight (still in the page for screen readers). On reveal
   the headline rises word by word, then the line fades up. */
.js .hide[data-state="search"] .hide-copy { pointer-events: none; }
.js .hide .hw > span { transition: translate 800ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(700ms + var(--i) * 110ms); }
.js .hide[data-state="search"] .hw > span { translate: 0 150%; transition-duration: 300ms; transition-delay: 0ms; }   /* 150%: clear of the clip box's extra room below, so no letter tops peek out */
.js .hide .hide-sub { transition: opacity 700ms var(--ease) 1150ms, translate 900ms var(--ease) 1150ms; }
.js .hide[data-state="search"] .hide-sub { opacity: 0; translate: 0 0.8rem; transition-duration: 250ms; transition-delay: 0ms; }

/* ---------- Hint and button: always reachable, no precise pointer needed ---------- */
.hide-ui { position: absolute; z-index: 3; left: clamp(1.25rem, 6vw, 7rem); bottom: clamp(1rem, 5svh, 2.6rem); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.hide-hint { margin: 0; padding: 0.55rem 0.95rem; border-radius: 999px; background: rgb(11 26 16 / 0.74); color: var(--ivory); font: 600 0.9rem/1.3 var(--satoshi); }
.hide-btn {
  padding: 0.75rem 1.15rem; border: 0; border-radius: 999px; background: var(--ivory); color: var(--black); cursor: pointer;
  font: 700 0.76rem/1 var(--satoshi); letter-spacing: 0.1em; text-transform: uppercase;
}
.hide-btn:hover { background: var(--acid); }
.hide-btn:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .leaf .sway { animation: hide-sway 5.5s ease-in-out infinite alternate; }
  .leaf:nth-child(3n) .sway { animation-duration: 6.8s; animation-delay: -2s; }
  .leaf:nth-child(3n + 1) .sway { animation-duration: 4.6s; animation-delay: -3.5s; }
  .leaf.rustle .sway { animation: hide-rustle 1.6s cubic-bezier(0.3, 0.6, 0.3, 1) var(--rd, 0ms) both; }
  @keyframes hide-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
  /* One soft, settling wobble: a push, a smaller swing back, rest. */
  @keyframes hide-rustle { 0% { transform: rotate(0); } 22% { transform: rotate(5deg); } 48% { transform: rotate(-2.6deg); } 72% { transform: rotate(1.1deg); } 100% { transform: rotate(0); } }
  /* Found: his eyes flash first. */
  .hide.is-flash .hg-glow { animation: hide-flash 900ms ease-out; }
  @keyframes hide-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
  /* Not found after a while: his eyes glint and the button pulses. */
  .hide.is-hinting .hg-glow { animation: hide-glint 1.8s ease-in-out infinite; }
  .hide.is-hinting .hide-btn { animation: hide-pulse 1.8s ease-in-out infinite; }
  @keyframes hide-glint { 50% { opacity: 1; } }
  @keyframes hide-pulse { 50% { box-shadow: 0 0 0 8px rgb(67 255 24 / 0.35); } }
}
@media (prefers-reduced-motion: reduce) {
  .leaf .lean, .js .hide .hw > span, .js .hide .hide-sub { transition: none; }
  .hide-light { display: none; }
  .hide.is-hinting .hg-glow { opacity: 0.8; }
}

/* ---------- Phones: the words sit at the top; the camera follows him (js/hide.js) ---------- */
@media (max-width: 760px) {
  .hide-copy { top: 1.4rem; left: var(--gutter); right: var(--gutter); max-width: none; text-shadow: 0 2px 20px rgb(0 0 0 / 0.5); }
  .hide-title { font-size: clamp(2.3rem, 12vw, 3.4rem); margin-bottom: 0.6rem; }
  .hide-sub { font-size: 1rem; }
  .hide-ui { left: var(--gutter); right: var(--gutter); }
}

/* ---------- Refinements: the question in the clearing, eyeshine, found-time ---------- */
.hg-shine { opacity: 0.32; pointer-events: none; }                 /* the two yellow eyes catch the light */
.hide-ask { position: absolute; z-index: 2; left: clamp(1.25rem, 6vw, 7rem); top: 24%; max-width: min(30rem, 32vw); pointer-events: none; text-shadow: 0 2px 24px rgb(6 18 10 / 0.55); }
.hide-ask-title { margin: 0 0 1rem; color: rgb(244 239 229 / 0.92); font: 900 clamp(2.2rem, 4.4vw, 5rem)/0.9 var(--satoshi); letter-spacing: -0.05em; text-transform: uppercase; }
.hide-ask-sub { margin: 0; max-width: 26ch; color: rgb(232 227 211 / 0.8); font: 500 clamp(1rem, 1.25vw, 1.2rem)/1.45 var(--satoshi); }
.hide-ask { transition: opacity 400ms var(--ease), translate 500ms var(--ease); }
.hide[data-state="found"] .hide-ask { opacity: 0; translate: 0 -1rem; }
html:not(.js) .hide-ask { display: none; }
@media (max-width: 760px) {
  .hide-ask { top: 1.4rem; left: var(--gutter); right: var(--gutter); max-width: none; }
  .hide-ask-title { font-size: clamp(1.9rem, 9vw, 2.8rem); }
}