/* ================================================
   POLINO — Daylight Studio Hero
   The cream field is the setting bed the tesserae are
   laid into; the artwork remains the signature moment.
   On a light ground an object separates by its cast
   shadow, not by a glow — every depth cue below is
   built from that, lit from the upper right.
   ================================================ */

.hero-section {
  min-height: 100svh;
  padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-16);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  background:
    radial-gradient(ellipse 70% 55% at 78% 26%, rgba(241,181,106,0.26), transparent 62%),
    radial-gradient(ellipse 90% 70% at 6% 98%, rgba(104,112,74,0.10), transparent 66%),
    linear-gradient(168deg, #FCF5E6 0%, #F4E8D2 44%, #EDDFC3 100%);
}

/* Where the studio light lands, kept faint — on cream a bloom reads as
   warmth in the paper, not as a lamp. */
.hero-section::before {
  content: '';
  position: absolute;
  width: min(58vw, 820px);
  aspect-ratio: 1;
  top: 50%;
  right: -10%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.55;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,229,0.62), rgba(241,181,106,0.10) 46%, transparent 72%);
  filter: blur(14px);
}

/* Warm paper shadow at the edges. Light layouts drift apart without
   containment; this is the vignette inverted, never grey. */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(150,120,78,0.09), transparent 46%),
    linear-gradient(180deg, rgba(150,120,78,0.07), transparent 20%, transparent 76%, rgba(140,112,72,0.13));
}

.hero-inner {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  gap: clamp(var(--space-10), 6vw, var(--space-24));
  align-items: center;
  position: relative;
  z-index: var(--z-above);
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: 720px;
}

.hero-eyebrow {
  color: var(--clay);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-wrap: balance;
}

.hero-title {
  margin: 0;
  max-width: 800px;
  color: var(--olive-dark);
  font-size: clamp(3.25rem, 6vw, 6.25rem);
  font-weight: var(--weight-regular);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero-title .line {
  display: block;
  opacity: 0;
  transform: translateY(42px);
  animation: hero-line-rise var(--duration-slower) var(--ease-out) forwards;
}
.hero-title .line:nth-child(1) { animation-delay: 0.08s; }
.hero-title .line:nth-child(2) {
  animation-delay: 0.20s;
  /* --terra measures 2.95:1 on the field's darker lower band — under AA even
     for display sizes. --clay is the same accent family at 5:1. */
  color: var(--clay);
  font-style: italic;
  font-weight: var(--weight-light);
}

@keyframes hero-line-rise {
  to { opacity: 1; transform: translateY(0); }
}

.hero-subtitle {
  max-width: 650px;
  margin: 0;
  color: var(--text-light);
  font-size: clamp(var(--text-base), 1.3vw, var(--text-lg));
  line-height: 1.75;
  text-wrap: pretty;
  opacity: 0;
  animation: hero-fade-up var(--duration-slow) var(--ease-out) 0.40s forwards;
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  opacity: 0;
  animation: hero-fade-up var(--duration-slow) var(--ease-out) 0.56s forwards;
}

.hero-buttons .btn {
  min-height: 48px;
  justify-content: center;
  cursor: pointer;
}
.hero-buttons .btn-primary {
  color: var(--white-mosaic);
  background: var(--olive-deep);
  box-shadow: 0 12px 30px rgba(63,74,50,0.20);
}
.hero-buttons .btn-primary:hover {
  color: var(--white-mosaic);
  background: var(--olive-dark);
  box-shadow: 0 14px 34px rgba(63,74,50,0.28);
}
.hero-buttons .btn-outline {
  color: var(--olive-deep);
  background: rgba(255,252,244,0.45);
  border-color: rgba(63,74,50,0.34);
}
.hero-buttons .btn-outline:hover {
  color: var(--white-mosaic);
  background: var(--terra);
  border-color: var(--terra);
}
.hero-buttons .btn:focus-visible { outline-color: var(--clay); }

/* ---- QUICK NAV ---------------------------------------------------
   Hidden while the header still shows its own nav. Below 1100px the
   header collapses to a burger, and this row takes over: same uppercase
   idiom and terracotta underline as .nav-link, so it reads as the site's
   navigation moved rather than a second, competing control.
   ------------------------------------------------------------------ */

.hero-quicknav {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--space-4);
  opacity: 0;
  animation: hero-fade-up var(--duration-slow) var(--ease-out) 0.68s forwards;
}

.hero-quicknav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-3);   /* ~44px tap target without a min-height */
  color: var(--olive-deep);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--duration-base) var(--ease-out);
}

/* One tessera between destinations — the studio's own separator. */
.hero-quicknav__link + .hero-quicknav__link::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-right: var(--space-4);
  flex-shrink: 0;
  background: var(--terra);
  opacity: 0.6;
}

.hero-quicknav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-3) - 3px);
  height: 1.5px;
  background: var(--terra);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}
/* Keep the rule off the tessera and its gutter. */
.hero-quicknav__link + .hero-quicknav__link::after {
  left: calc(4px + var(--space-4));
}

.hero-quicknav__link:hover { color: var(--terra); }
.hero-quicknav__link:hover::after { transform: scaleX(1); }
.hero-quicknav__link:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

.hero-visual {
  position: relative;
  min-height: 590px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

/* Ground shadow, thrown down-left by the upper-right light. Warm brown,
   never black — black on cream reads as a hole punched in the paper. */
.hero-visual::after {
  content: '';
  position: absolute;
  width: 68%;
  height: 16%;
  bottom: 3%;
  left: 18%;
  background: rgba(96,74,52,0.20);
  filter: blur(38px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

#mosaic-canvas {
  display: block;
  max-width: 100%;
  position: relative;
  z-index: 2;
  will-change: transform;
  filter:
    drop-shadow(0 3px 6px rgba(74,55,38,0.13))
    drop-shadow(-6px 22px 40px rgba(74,55,38,0.20));
}

.hero-photo-fallback {
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 2;
  display: none;
  border-radius: var(--radius-md);
  box-shadow: 0 3px 6px rgba(74,55,38,0.13), -6px 22px 40px rgba(74,55,38,0.20);
}
.no-js #mosaic-canvas { display: none; }
.no-js .hero-photo-fallback { display: block; }

.hero-badge {
  position: absolute;
  z-index: 3;
  top: 9%;
  right: 0;
  padding: var(--space-2) var(--space-4);
  color: var(--olive-deep);
  background: rgba(251,246,236,0.88);
  border: 1px solid rgba(63,74,50,0.16);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(74,55,38,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.hero-badge.visible { opacity: 1; transform: translateY(0); }

.btn-replay {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 50%;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  color: var(--olive-deep);
  /* Same pale chip as .hero-badge. Muted brown text alone was legible on the
     cream field this button was designed against, but on a phone it lands over
     the dark mosaic itself — and it only started showing at all once the loop
     stopped halting before its cue. */
  background: rgba(251,246,236,0.88);
  border: 1px solid rgba(63,74,50,0.16);
  border-radius: var(--radius-full);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: var(--text-xs);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity var(--duration-slow) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.btn-replay.visible { opacity: 1; }
.btn-replay:hover { color: var(--clay); }
.btn-replay:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

@media (max-width: 1100px) {
  .hero-section {
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--space-16));
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    text-align: center;
  }
  .hero-text {
    max-width: 850px;
    margin-inline: auto;
    align-items: center;
  }
  .hero-subtitle { max-width: 720px; }
  .hero-buttons { justify-content: center; }
  .hero-quicknav { display: flex; }
  .hero-visual {
    width: min(100%, 620px);
    min-height: 500px;
    margin-inline: auto;
  }
  .hero-badge { right: 4%; }
}

@media (max-width: 640px) {
  .hero-section {
    padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-16);
  }
  .hero-inner {
    padding-inline: var(--space-5);
    gap: var(--space-10);
  }
  .hero-text { gap: var(--space-5); }
  .hero-title {
    font-size: clamp(3rem, 14vw, 4.35rem);
    line-height: 0.98;
  }
  .hero-subtitle {
    font-size: var(--text-base);
    line-height: 1.65;
  }
  .hero-buttons {
    width: 100%;
    flex-direction: column;
  }
  .hero-buttons .btn { width: 100%; }
  .hero-quicknav { gap: 0 var(--space-3); }
  .hero-quicknav__link { font-size: var(--text-xs); }
  .hero-quicknav__link + .hero-quicknav__link::before { margin-right: var(--space-3); }
  .hero-quicknav__link + .hero-quicknav__link::after { left: calc(4px + var(--space-3)); }
  .hero-visual { min-height: 380px; }
  .hero-badge {
    top: 5%;
    right: 1%;
  }
  .btn-replay { bottom: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .line,
  .hero-subtitle,
  .hero-buttons,
  .hero-quicknav {
    opacity: 1;
    transform: none;
    animation: none;
  }
}