/* ═══════════════════════════════════════════════════════════════
   GRANDFLEET™ — Homepage (index.html)
   ═══════════════════════════════════════════════════════════════ */

/* ─── HERO ───────────────────────────────────────────────────────
   The wordmark is the hero. The entry animation is CSS only, so it
   always runs to the end whatever else loads. js/hero.js adds two
   things on top: --p (0 → 1 as the hero scrolls away) and the light
   that follows the cursor across the gold.                          */
.hero {
  --p: 0;
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: var(--nav-h);
  overflow: hidden;
}
.hero::before {            /* a low warm light behind the wordmark */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(58% 46% at 50% 40%, rgba(217, 182, 114, 0.13), transparent 72%);
}
.hero::after {             /* dims the hero as the next section slides over it */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--bg);
  opacity: calc(var(--p) * 0.8);
}
.hero-inner {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(32px, 6vh, 72px);
  transform: translateY(calc(var(--p) * -7vh));
}

.hero-mark {
  position: relative;
  width: 100%; aspect-ratio: 1578 / 293;
  /* --rx / --ry: the tilt toward the cursor, set by js/hero.js */
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(calc(1 + var(--p) * 0.14));
  transform-origin: 50% 60%;
  will-change: transform;
}
.hero-mark img {
  width: 100%; height: 100%;
  animation: mark-in 1.25s var(--ease) 0.15s both;
}
/* Light on the gold. Both layers are masked by the wordmark, so nothing
   glows outside the letters.
     ::after   a glint that sweeps across every few seconds
     ::before  a soft hotspot under the cursor (fine pointers; js/hero.js) */
.hero-mark::before, .hero-mark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../logo/GrandFleet_GOLDEN_Cropped.png") center / 100% 100% no-repeat;
          mask: url("../logo/GrandFleet_GOLDEN_Cropped.png") center / 100% 100% no-repeat;
}
.hero-mark::after {
  background: linear-gradient(105deg,
      transparent 42%,
      rgba(255, 240, 200, 0.35) 47%,
      rgba(255, 252, 240, 0.95) 50%,
      rgba(255, 240, 200, 0.35) 53%,
      transparent 58%) no-repeat;
  background-size: 260% 100%;
  background-position: 92% 0;
  animation: mark-glint 4.6s cubic-bezier(0.45, 0, 0.25, 1) 1.5s infinite;
}
.hero-mark::before {
  background: radial-gradient(circle 280px at var(--lx, 50%) var(--ly, 50%),
      rgba(255, 250, 232, 0.7) 0%,
      rgba(255, 236, 180, 0.25) 42%,
      transparent 72%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-mark.is-lit::before { opacity: 1; }
.hero.is-past .hero-mark::after { animation-play-state: paused; }

.hero-row {
  margin-top: clamp(24px, 4.5vh, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px clamp(32px, 6vw, 96px);
  align-items: center;
}
.hero-lede { animation: rise 0.9s var(--ease) 0.85s both; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; animation: rise 0.9s var(--ease) 1s both; }

.hero-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  animation: rise 0.9s var(--ease) 1.15s both;
}
.hero-meta div { padding: 18px 0 22px; }
.hero-meta dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
.hero-meta dd { margin-top: 4px; font-size: 0.95rem; color: var(--text); }

@keyframes mark-in   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mark-glint { 0% { background-position: 92% 0; } 45%, 100% { background-position: 8% 0; } }
@keyframes rise      { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* The hero stays put while the page slides up over it. Only where the whole
   hero fits on screen: a sticky hero taller than the viewport would hide its
   own lower half. */
.home main > :not(.hero) { position: relative; z-index: 1; background: var(--bg); }
@media (min-height: 700px) {
  .hero { position: sticky; top: 0; z-index: 0; }
  .home .hero + .section { box-shadow: 0 -1px 0 var(--line), 0 -48px 96px rgba(0, 0, 0, 0.55); }
}

@media (max-width: 860px) {
  .hero-row { grid-template-columns: minmax(0, 1fr); }
  .hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-meta div { padding: 14px 0; }
  .hero-meta div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .hero-actions .btn { flex: 1 1 100%; }
}
/* The hero carries the wordmark, so the nav's copy waits until it has gone.
   js/hero.js sets .mark-gone; without scripts the nav logo simply shows. */
.nav-logo { transition: opacity 0.4s ease; }
.js .home:not(.mark-gone) .nav-logo { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-mark::after, .hero-mark::before { display: none; }
  .hero-mark, .hero-inner { transform: none; }
}

/* ─── STUDIO ─────────────────────────────────────────────────── */
.home main > .studio { background: var(--surface); border-block: 1px solid var(--line); }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 112px); align-items: start; }
.studio-lead {
  margin-top: 18px;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: 1.45; color: var(--text);
  text-wrap: pretty;
}
.studio-text p + p { margin-top: 22px; color: var(--text-dim); max-width: 56ch; }
.facts { border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); padding-top: 4px; }
.facts dd { color: var(--text); }
@media (max-width: 860px) { .studio-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }

/* ─── SERVICES ───────────────────────────────────────────────── */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); border-top: 1px solid var(--line); }
.service { padding-top: 28px; }
.service-num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em; color: var(--gold); }
.service h3 { margin: 14px 0 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: 0.02em; }
.service p { color: var(--text-dim); font-size: 0.97rem; }
@media (max-width: 860px) {
  .services { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .service { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
  .service:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ─── CONTACT ────────────────────────────────────────────────── */
.home main > .contact { background: var(--surface); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.contact-text .display { margin-bottom: 20px; }
.contact-list { margin-top: 36px; border-top: 1px solid var(--line); }
.contact-list li { border-bottom: 1px solid var(--line); }
.contact-list a, .contact-list span.row {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding: 16px 0; overflow-wrap: anywhere;
}
.contact-list .k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); }
.contact-list a { transition: color 0.2s ease; }
.contact-list a:hover { color: var(--gold-hi); }
.form .btn { justify-self: start; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .form .btn { justify-self: stretch; min-height: 52px; }
}
@media (max-width: 480px) { .contact-list a, .contact-list span.row { grid-template-columns: 1fr; gap: 2px; } }