/* ==========================================================================
   hero.css — the thesis screen.
   Three verbs, three companies, one sentence, over a living view of the farm
   water: a looping video if one is supplied, otherwise the tilapia photo on a
   slow drift, warmed by a low-sun wash with light rippling on the surface.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + var(--s-8)) var(--s-8);
  overflow: hidden;
  isolation: isolate;
}

/* --- Hero background -------------------------------------------------------
   A looping section of a YouTube video, sized to cover. Behind it, a water
   gradient shows while the video loads or if it can't play. The sun and shade
   sit above the video; the headline sits above everything. */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background: var(--c-night);
}

/* Fallback water — always present, covered by the video once it plays. */
.hero__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(130% 90% at 72% -12%, rgba(150, 196, 168, 0.26), transparent 52%),
    linear-gradient(178deg, #1c4a41 0%, #163d39 42%, #0f2c2b 78%, #0c2422 100%);
}

/* Self-hosted background video. Transparent until it can play, so the water
   gradient shows while it buffers; then it fades in and covers the hero. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 0;
  transition: opacity 1000ms var(--e-out);
}
.hero__video.is-playing { opacity: 1; }

/* Low sun: a warm bloom from the upper right, like light off the water. */
.hero__sun {
  position: absolute;
  z-index: 3;
  top: -18vh; right: -8vw;
  width: 62vw; height: 62vw;
  max-width: 780px; max-height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 149, 39, 0.26), rgba(217, 149, 39, 0.06) 42%, transparent 66%);
  filter: blur(20px);
  animation: aurora-shift 30s var(--e-out) infinite;
}

/* Shade: keeps the headline legible; lighter on the right so the video shows. */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(100deg, rgba(26, 20, 13, 0.92) 0%, rgba(26, 20, 13, 0.68) 32%, rgba(26, 20, 13, 0.22) 62%, rgba(18, 40, 38, 0.12) 100%),
    linear-gradient(to top, rgba(26, 20, 13, 0.88), transparent 46%);
}

/* --- Content -------------------------------------------------------------- */

.hero__inner {
  position: relative;
  width: 100%;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__head { display: grid; gap: var(--s-6); max-width: 20ch; }

/* --- Holding-company lockup ----------------------------------------------
   The parent identity, sized to read as the hero's anchor. It names the
   holding company plainly so the three verbs below are understood as the
   things it does through the companies it runs. */
.hero__lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0.5rem 1rem 0.5rem 0.55rem;
  border: 1px solid var(--line-night);
  border-radius: var(--r-pill);
  background: rgba(10, 29, 24, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: max-content;
  max-width: 100%;
}

.hero__mark { width: 40px; height: 40px; flex: none; }

.hero__lockup-text { display: grid; gap: 0.15rem; line-height: 1.05; }
.hero__lockup-text b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}
.hero__lockup-text span {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.hero__title {
  font-family: var(--f-display);
  font-size: var(--fs-4xl);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

/* Each line is masked separately so they arrive one after another. */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.hero__line span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1150ms var(--e-out);
}

.is-ready .hero__line span { transform: none; }
.hero__line:nth-child(1) span { transition-delay: 120ms; }
.hero__line:nth-child(2) span { transition-delay: 240ms; }
.hero__line:nth-child(3) span { transition-delay: 360ms; }

/* The verb owned by each company takes that company's accent. */
.hero__verb {
  font-style: italic;
  font-weight: 400;
  position: relative;
}
.hero__verb--capital { color: var(--c-capital); }
.hero__verb--land    { color: var(--c-land); }
.hero__verb--table   { color: var(--c-table); }

.hero__meta {
  display: grid;
  gap: var(--s-6);
  align-content: start;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 900ms var(--e-out) 620ms, transform 900ms var(--e-out) 620ms;
}
.is-ready .hero__meta { opacity: 1; transform: none; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

@media (min-width: 940px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: end;
    gap: var(--s-8);
  }
  .hero__head { max-width: none; }
  .hero__meta { padding-bottom: 0.6rem; }
}

/* --- Brand chips ---------------------------------------------------------- */

.hero__brands {
  display: grid;
  gap: var(--s-3);
}

.hero__brands-label {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.hero__brands-label::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  border: 1px solid var(--line-night);
  border-radius: var(--r-pill);
  background: rgba(10, 29, 24, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  transition: border-color var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-spring), background var(--d-mid) var(--e-out);
}
.chip:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--chip-accent, var(--c-kunyit)) 60%, transparent);
  background: rgba(10, 29, 24, 0.8);
}

.chip__badge {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.chip__dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--chip-accent) 16%, transparent);
  flex: none;
}
.chip__dot::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--chip-accent);
}

/* --- Scroll cue ----------------------------------------------------------- */

.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: var(--s-5);
  display: none;
  align-items: center;
  gap: var(--s-3);
  color: var(--t-night-faint);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
@media (min-width: 940px) { .hero__cue { display: flex; } }

.hero__cue-track {
  width: 1px; height: 46px;
  background: var(--line-night);
  position: relative;
  overflow: hidden;
}
.hero__cue-track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-kunyit);
  animation: cue-run 2.4s var(--e-out) infinite;
}
@keyframes cue-run {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}