/* ============================================================
   04-hero.css — hero section
   Module: <section id="hero">
   ============================================================ */

/* ---- Entrance animations ---- */
/* Each piece fades in and rises 20px. The eyebrow, h1 line 1, h1 line 2,
   lead paragraph, and actions stagger in sequence so the eye follows a
   natural reading path down the page. */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card slide-in from the right on load */
@keyframes hero-card-enter {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scroll-hint bounce — gentle vertical loop */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* Card glow pulse on focus-within */
@keyframes card-glow {
  0%   { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(30,58,95,0.18); }
  50%  { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(30,58,95,0.08); }
  100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(30,58,95,0.0); }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes hero-enter      { from { opacity: 0; } to { opacity: 1; } }
  @keyframes hero-card-enter { from { opacity: 0; } to { opacity: 1; } }
  @keyframes scroll-bounce   { 0%, 100% { transform: none; } }
  @keyframes card-glow       { 0%, 100% { box-shadow: var(--shadow-lg); } }
}

#hero {
  position: relative;
  background:
    linear-gradient(135deg, rgba(15,37,64,0.82) 0%, rgba(45,106,79,0.55) 100%),
    url("../images/nathan-onsite.jpg") center 22%/cover no-repeat,
    var(--c-timber);
  color: var(--c-white);
  padding: var(--s-9) 0 var(--s-8);
  overflow: hidden;
}
#hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(249,199,79,0.18) 0%, transparent 60%);
  pointer-events: none;
}
#hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-7);
  align-items: center;
}

/* ---- Hero copy — staggered entrance ---- */
.hero-copy h1 { color: var(--c-white); }
.hero-copy h1 em {
  font-style: normal;
  color: var(--c-yellow);
  text-shadow: 0 2px 12px rgba(15, 37, 64, 0.45);
}

.hero-eyebrow {
  display: inline-block;
  background: rgba(249,199,79,0.18);
  border: 1px solid rgba(249,199,79,0.5);
  color: var(--c-yellow);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  /* step 1 */
  animation: hero-enter 0.7s cubic-bezier(0.22, 0.85, 0.3, 1) both;
  animation-delay: 0.05s;
}

/* h1 and lead-in enter as a unit — step 2 */
.hero-copy h1 {
  animation: hero-enter 0.75s cubic-bezier(0.22, 0.85, 0.3, 1) both;
  animation-delay: 0.2s;
}

.hero-lead {
  font-size: 1.2rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  max-width: 540px;
  margin-bottom: var(--s-5);
  /* step 3 — the "Hi, I'm Nathan" paragraph */
  animation: hero-enter 0.75s cubic-bezier(0.22, 0.85, 0.3, 1) both;
  animation-delay: 0.38s;
}

.hero-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
  /* step 4 */
  animation: hero-enter 0.7s cubic-bezier(0.22, 0.85, 0.3, 1) both;
  animation-delay: 0.52s;
}

.hero-trust {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: var(--s-4);
  /* step 5 */
  animation: hero-enter 0.7s cubic-bezier(0.22, 0.85, 0.3, 1) both;
  animation-delay: 0.65s;
}
.hero-trust div strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.7rem;
  color: var(--c-yellow);
  line-height: 1;
}
.hero-trust div span {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- Right-side card (booking enquiry mini-form) ---- */
.hero-card {
  background: var(--c-white);
  color: var(--c-ink);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-lg);
  transition: box-shadow 0.3s ease;
  animation: hero-card-enter 0.8s cubic-bezier(0.22, 0.85, 0.3, 1) 0.15s both;
}
/* Soft glow when any field inside gains focus */
.hero-card:focus-within {
  box-shadow:
    var(--shadow-lg),
    0 0 0 3px rgba(30,58,95,0.12),
    0 8px 32px rgba(30,58,95,0.18);
  animation: card-glow 1.2s ease forwards;
}
.hero-card h3 {
  margin-bottom: var(--s-2);
}
.hero-card p {
  color: var(--c-muted);
  font-size: 0.95rem;
  margin-bottom: var(--s-4);
}
.hero-card .field {
  margin-bottom: var(--s-3);
}
.hero-card label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  margin-bottom: 6px;
}
.hero-card input,
.hero-card select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  font-size: 1rem;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.hero-card input:focus,
.hero-card select:focus {
  outline: none;
  border-color: var(--c-blue);
  background: var(--c-white);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.1);
}
.hero-card .btn {
  width: 100%;
  margin-top: var(--s-2);
}
.hero-card-foot {
  margin-top: var(--s-3);
  font-size: 0.82rem;
  color: var(--c-muted);
  text-align: center;
}

/* ---- Scroll hint ---- */
/* A small downward-pointing arrow below the hero that fades out once the
   user scrolls. JS in animations.js handles the fade-out via .is-scrolled. */
.hero-scroll-hint {
  position: absolute;
  bottom: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.55);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  animation: hero-enter 0.7s cubic-bezier(0.22, 0.85, 0.3, 1) 1.2s both;
  transition: opacity 0.5s ease;
}
.hero-scroll-hint.is-hidden {
  opacity: 0;
}
.hero-scroll-hint svg {
  width: 20px;
  height: 20px;
  animation: scroll-bounce 1.6s ease-in-out infinite;
}

/* ---- Inner-page hero variant ----
   Applied via class="module parallax hero-inner" on inner pages.
   Shorter vertical padding (one step down from full hero) so it reads
   as a confident page header, not a homepage splash. The copy stays
   left-aligned on desktop but the container goes single-column always
   (no card slot), giving the heading more horizontal room to breathe.

   Background uses the Nathan-and-Mac hoodie photo because it's a tighter
   shot of both of them (faces in the upper third, Mac on Nathan's lap) —
   the wide hero geometry only shows a thin slice of any portrait photo
   after cover-cropping (~14% of the image height), so the photo with the
   most central subject placement is the one that frames cleanly. The
   driveway shot kept either Nathan's head or Mac out of frame depending
   on the percentage. The gradient overlay opacity is reduced from 0.82
   to 0.65 so the photo actually reads through, not just a navy wash. */
#hero.hero-inner {
  padding: var(--s-8) 0 var(--s-7);
  background:
    linear-gradient(135deg, rgba(15,37,64,0.65) 0%, rgba(45,106,79,0.45) 100%),
    url("../images/nathan-and-mac-hoodie.jpg") center 32%/cover no-repeat,
    var(--c-timber);
}
#hero.hero-inner .container {
  grid-template-columns: 1fr;
  max-width: 820px;
}
#hero.hero-inner .hero-copy h1 {
  /* Slightly looser max-width so the headline doesn't compress too early */
  max-width: 740px;
}
#hero.hero-inner .hero-lead {
  max-width: 620px;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  #hero { padding: var(--s-7) 0 var(--s-7); }
  #hero .container { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Small phones — prevent h1 from going too tight */
@media (max-width: 480px) {
  #hero { padding: var(--s-6) 0 var(--s-7); }
  #hero.hero-inner { padding: var(--s-7) 0 var(--s-6); }
  .hero-lead { font-size: 1.05rem; }
  /* Tighten eyebrow to prevent overflow on very small screens */
  .hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.1em; }
  .hero-trust { gap: var(--s-3); }
  .hero-trust div strong { font-size: 1.4rem; }

  /* On a phone the inner-hero box has a different height-to-width ratio, so
     the visible band of the photo shifts. Bias slightly less aggressive
     so Nathan + Mac stay centred on small screens. */
  #hero.hero-inner {
    background-position: center 28%;
  }
}

@media (max-width: 380px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; text-align: center; }
}