/* ==========================================================================
   Hero — the chewing goat.
   --------------------------------------------------------------------------
   The <section> is very tall (380vh); its stage is position:sticky, so the
   stage stays on screen while the page scrolls. js/hero.js converts the
   scroll progress (0 → 1) into: goat frame, headline lines, zoom, green
   circular wipe, logo line-drawing and the final seal "stamp".
   ========================================================================== */

.hero { position: relative; height: 380vh; } /* scroll length of the opening; timing in js/config.js */

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* First frame as a no-JS / pre-load fallback. */
  background: var(--color-hero-fallback) url("../assets/frames/goat/g001.webp") center 60% / cover no-repeat;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Darkens the edges so the headlines stay legible over the video. */
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, transparent 35%, rgba(12, 22, 14, .55) 100%),
    linear-gradient(to top, rgba(12, 22, 14, .75), transparent 45%);
}

/* --------------------------------------------------------------------------
   Headline lines (each fades in/out on its own scroll window)
   -------------------------------------------------------------------------- */
.hero__line { position: absolute; max-width: min(calc(46 * var(--vw)), 640px); will-change: transform, opacity; }
.hero__line .display { font-size: clamp(56px, calc(10 * var(--vw)), 168px); color: var(--color-paper); text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }
.hero__line .serif {
  display: block;
  margin-top: 14px;
  font-size: clamp(22px, calc(2.3 * var(--vw)), 36px);
  color: var(--color-paper);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.hero__line .mono { display: block; margin-bottom: 16px; color: var(--color-straw); opacity: .9; }
/* Opening label "Empório Agropecuário · Itu-SP · desde 2001": a bit larger than other labels. */
.hero__line--0 .mono { font-size: clamp(14px, calc(1.15 * var(--vw)), 17px); letter-spacing: .12em; }

/* Only the first line is visible before any scroll. */
.js .hero__line:not(.hero__line--0) { opacity: 0; }
/* Without JavaScript the opening can't play: show only the greeting over the
   first frame, as one screen, instead of every headline stacked. */
html:not(.js) .hero { height: 100vh; height: 100svh; }
html:not(.js) :is(.hero__line:not(.hero__line--0), .hero__wipe, .hero__animals, .hero__seal, .hero__outro, .scroll-hint--end, .intro-controls) { display: none; }

.hero__line--0 { left: var(--gutter); bottom: 12vh; }
.hero__line--1 { left: var(--gutter); top: 20vh; }
.hero__line--2 { right: var(--gutter); top: 16vh; text-align: right; }
.hero__line--3 { left: var(--gutter); bottom: 10vh; }
.hero__line--4 { right: var(--gutter); bottom: 11vh; text-align: right; max-width: min(calc(44 * var(--vw)), 600px); }
.hero__line--4 .display { font-size: clamp(46px, calc(7 * var(--vw)), 118px); }

/* "Scroll slowly, she is chewing" hint. */
.scroll-hint {
  position: absolute;
  right: var(--gutter);
  bottom: 5vh;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-straw);
}
.scroll-hint i {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--color-straw);
  transform-origin: top;
  animation: scroll-hint-drop 1.6s ease-in-out infinite;
}
/* End-of-intro hint: same look, hidden until the logo and seal are in place. */
.scroll-hint--end { right: 20px; bottom: 16px; opacity: 0; z-index: 4; }
@media (max-width: 720px) {
  .scroll-hint--end { right: 12px; bottom: 10px; }
  .scroll-hint--end .mono { font-size: 10px; }
}

@keyframes scroll-hint-drop {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Intro controls (bottom-left): "assistir abertura" plays the opening by
   scrolling on its own; "pular abertura" jumps straight to the first chapter. */
.intro-controls {
  position: absolute;
  left: var(--gutter);
  bottom: 5vh;
  z-index: 5; /* above the outro layers, which come later in the DOM */
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-straw);
}
.intro-controls__play,
.skip-intro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .8;
  transition: opacity .2s;
}
.intro-controls__play:hover,
.skip-intro:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--color-red); }
.intro-controls__play svg { width: 16px; height: 16px; fill: currentColor; }
.intro-controls__play .icon-pause,
.intro-controls__play[aria-pressed="true"] .icon-play { display: none; }
.intro-controls__play[aria-pressed="true"] .icon-pause { display: block; }
.intro-controls__play[aria-pressed="true"] { opacity: 1; color: #fff; }
.intro-controls__sep { opacity: .5; }
.skip-intro span { font-size: 16px; line-height: 1; }
@media (max-width: 720px) {
  .intro-controls { left: auto; right: var(--gutter); top: calc(env(safe-area-inset-top, 0px) + 86px); bottom: auto; gap: 10px; }
  /* Keep each control on one line on narrow phones. */
  .intro-controls__play, .skip-intro { white-space: nowrap; }
  .intro-controls .mono { letter-spacing: .08em; }
}
@media (max-width: 400px) {
  .intro-controls { gap: 6px; font-size: 11px; }
  .intro-controls .mono { font-size: 11px; letter-spacing: .04em; }
}
/* Without scroll animation there is nothing to "watch". */
@media (prefers-reduced-motion: reduce) {
  .intro-controls__play, .intro-controls__sep { display: none; }
}

/* --------------------------------------------------------------------------
   Outro: green wipe → logo animals drawn → seal stamped → brand line
   -------------------------------------------------------------------------- */
.hero__wipe,
.hero__animals,
.hero__seal,
.hero__outro { pointer-events: none; } /* decorative layers never block clicks */

.hero__wipe {
  position: absolute;
  inset: 0;
  background: var(--color-pasture);
  clip-path: circle(0% at 50% 62%);
}
/* Faint dotted pasture texture. */
.hero__wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: radial-gradient(var(--color-sprout) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

.hero__animals {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(calc(74 * var(--vw)), 860px);
  transform: translate(-50%, -50%);
  overflow: visible;
}
.hero__animals path { fill: var(--color-straw); fill-opacity: 0; stroke: var(--color-straw); stroke-width: 2.4; }

.hero__seal {
  position: absolute;
  top: 14vh;
  right: calc(var(--gutter) + calc(2 * var(--vw)));
  width: clamp(120px, calc(15 * var(--vw)), 210px);
  height: auto;
  aspect-ratio: 1;
  opacity: 0;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}

.hero__outro { position: absolute; left: 0; right: 0; bottom: 9vh; padding-inline: var(--gutter); text-align: center; opacity: 0; }
.hero__outro .display { font-size: clamp(40px, calc(6 * var(--vw)), 96px); color: var(--color-paper); }
.hero__outro .serif { display: block; margin-top: 10px; font-size: clamp(20px, calc(2 * var(--vw)), 30px); color: var(--color-straw); }

/* --------------------------------------------------------------------------
   Phones: goat on top (drawn by js), text stacked at the bottom
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero__line { max-width: none; left: var(--gutter) !important; right: var(--gutter) !important; text-align: left !important; }
  .hero__line--1 { top: auto; bottom: 14vh; }
  /* "Do pasto…" and "…ao sofá da sala" are on screen together: stack them. */
  .hero__line--2 { top: auto; bottom: calc(9vh + 200px); }
  .hero__line--2 .serif { display: none; }
  .hero__line--4 { bottom: 12vh; }
  .hero__seal { top: 12vh; right: var(--gutter); }
  .hero__animals { top: 40%; width: calc(88 * var(--vw)); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint i { animation: none; }
  .hero { height: auto; }
  .hero__stage { position: relative; height: 100svh; }
}