/* ==========================================================================
   Home page hero: the emblem assembles over a static gray mountain range that
   runs edge to edge. Copy sits in the corners. The header is hidden until the
   hero scrolls away. Loaded after styles.css and emblem.css.
   ========================================================================== */

:root {
  --hf-pad: clamp(1.25rem, 3vw, 2.75rem);
}

/* ---- stage ---- */
.hero-full {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  background: var(--ink);
  color: var(--paper);
}

.hero-full-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 4rem var(--hf-pad) 7.5rem;   /* room for the brand above and the copy below */
  pointer-events: none;
}
.emblem-stage {
  height: min(100%, 100vw - 2 * var(--hf-pad));
  aspect-ratio: 1;
}
.emblem-stage .emblem { height: 100%; width: 100%; }

/* ---- copy in the corners ---- */
.hero-full-ui {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: var(--hf-pad);
  pointer-events: none;
}
.hero-full-ui > * { pointer-events: auto; }

.hf-brand {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  align-self: start;
  justify-self: start;
  animation: hf-fade 1s ease-out 0.4s both;
}
.hf-brand img { width: 44px; height: 44px; }
.hf-brand span { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); }
.hf-brand strong { font-size: 1.35rem; font-weight: 800; }
.hf-brand small { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--em-amber); margin-top: 0.2rem; }

.hf-title {
  grid-row: 3;
  grid-column: 1;
  align-self: end;
  margin: 0;
  max-width: 24ch;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 1.05;
  animation: hf-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) 3.4s both;
}
.hf-title em { font-style: normal; color: var(--em-amber); }

.hf-actions {
  grid-row: 3;
  grid-column: 2;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  animation: hf-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) 3.7s both;
}

@keyframes hf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hf-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* header appears once the hero has scrolled away */
.hero-full + .site-header { position: sticky; top: 0; }

/* ==========================================================================
   Sequence: the gray range is simply there. The ring rotates in and
   decelerates to a stop; as the disc lands, the mountain inside it turns amber
   while the range outside stays gray. Then the arm swings in over it, and the
   banner and wordmark finish the badge.
   ========================================================================== */

.em-range, .em-mountain-under { animation: none; opacity: 1; }
.em-mountain { animation: em-fade 1.4s ease-in-out 2.2s both; }

.em-ring-in   { animation-name: em-ring-in;   animation-duration: 3.4s; animation-delay: 1s; animation-timing-function: cubic-bezier(0.05, 0.6, 0.1, 1); }
.em-boom-in   { animation-name: em-boom-in;   animation-duration: 1.4s; animation-delay: 2.4s; }
.em-stick-in  { animation-name: em-stick-in;  animation-duration: 1.3s; animation-delay: 2.75s; }
.em-bucket-in { animation-name: em-bucket-in; animation-duration: 1.1s; animation-delay: 3.1s; }
.em-banner    { animation-name: em-rise;      animation-duration: 1.3s; animation-delay: 2.9s; }
.em-letter    { animation-name: em-letter-in; animation-duration: 0.7s; animation-delay: calc(3.6s + var(--i) * 0.055s); }

.em-ring-spin { animation: none; }
.em-boom-idle, .em-stick-idle, .em-bucket-idle { animation-delay: 4.8s; }

/* Pointer-driven arm (desktop). js/hero-immersive.js solves the boom and
   dipper angles so the bucket reaches for the cursor, and writes them here.
   Touch devices keep the gentle dig loop from emblem.css instead. */
@media (hover: hover) and (pointer: fine) {
  .hero-full .em-boom-idle, .hero-full .em-stick-idle, .hero-full .em-bucket-idle {
    animation: none;
    transition: none; /* smoothing is done per frame in js/hero-immersive.js */
  }
  .hero-full .em-boom-idle   { transform: rotate(var(--boom-rot, 0deg)); }
  .hero-full .em-stick-idle  { transform: rotate(var(--stick-rot, 0deg)); }
  .hero-full .em-bucket-idle { transform: rotate(var(--bucket-rot, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .hf-brand, .hf-title, .hf-actions, .em-mountain { animation: none !important; }
}

/* ---- responsive ---- */
@media (max-width: 1280px) {
  .hero-full-stage { padding-bottom: 10rem; }
}
@media (max-width: 900px) {
  .hero-full-stage { padding: 6rem var(--hf-pad) 13rem; }
  .hf-title { font-size: clamp(1.8rem, 6vw, 2.5rem); max-width: none; }
}
@media (max-width: 640px) {
  /* One column on phones: brand, emblem, headline, buttons. The copy becomes
     grid items of the hero itself so the emblem sits in normal flow between. */
  .hero-full {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
    gap: 0;
    padding: var(--hf-pad);
  }
  .hero-full-ui { display: contents; }
  .hero-full-stage, .hf-brand, .hf-title, .hf-actions { grid-column: 1; }
  /* Copy must paint above the emblem, whose range spills across the hero. */
  .hf-brand, .hf-title, .hf-actions { position: relative; z-index: 2; }
  .hero-full-stage {
    position: relative;
    z-index: 1;
    grid-row: 2;
    padding: 1.25rem 0;
    display: grid;
    place-items: center;
  }
  .emblem-stage { width: min(100%, calc(100svh - 24rem)); height: auto; }

  .hf-brand { grid-row: 1; margin-bottom: 0.5rem; }
  .hf-brand img { width: 38px; height: 38px; }
  .hf-brand strong { font-size: 1.15rem; }

  .hf-title { grid-row: 3; max-width: none; font-size: clamp(1.8rem, 7.6vw, 2.4rem); margin-bottom: 1.25rem; }

  .hf-actions {
    grid-row: 4;
    justify-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .hf-actions .btn { width: 100%; padding: 1rem 0.75rem; font-size: 1.05rem; }
}