/* Gerard's — coming-soon placeholder
   Direction B (Cinematic Minimal): near-monochrome, photography-led, restrained.
   Palette is intentionally neutral so it won't clash with the shopping-bag-matched
   brand colours that get locked later. */

@font-face {
  font-family: "Boska";
  src: url("/fonts/Boska-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0a0a09;        /* warm off-black */
  --paper: #faf8f4;      /* warm white */
  --paper-dim: rgba(250, 248, 244, 0.72);
  --champagne: #b8a06f;  /* single restrained accent */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* ---- Hero stage ---- */
.hero {
  position: fixed;
  inset: 0;
  height: 100svh;
  width: 100vw;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero__img,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Canvas is revealed by the script only when WebGL initialises successfully. */
.hero__canvas { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.hero.is-rippling .hero__canvas { opacity: 1; }
.hero.is-rippling .hero__img { visibility: hidden; }

/* Legibility scrim: dark at the edges and bottom, light through the middle. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10,10,9,0.55) 0%,
      rgba(10,10,9,0.12) 32%,
      rgba(10,10,9,0.20) 60%,
      rgba(10,10,9,0.78) 100%),
    radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(10,10,9,0.45) 100%);
  pointer-events: none;
}

/* ---- Content ---- */
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 46rem;
}

.eyebrow {
  font-size: clamp(0.62rem, 1.6vw, 0.78rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-weight: 500;
  margin-bottom: clamp(1.1rem, 3vw, 1.8rem);
}

.wordmark {
  line-height: 0;
  margin: 0;
}
.logo {
  display: block;
  width: clamp(252px, 46vw, 580px);
  height: auto;
  margin: 0 auto;
}
/* Recolour points — swap these two when the shopping-bag palette is locked. */
.gl-letter { fill: var(--paper); }
.gl-wave { fill: var(--champagne); }

.tagline {
  font-family: "Boska", Georgia, serif;
  font-weight: 350;
  font-style: italic;
  font-size: clamp(1.05rem, 3.2vw, 1.6rem);
  letter-spacing: 0.01em;
  color: var(--paper);
  margin-top: clamp(1rem, 3vw, 1.6rem);
}

.coming {
  font-size: clamp(0.9rem, 2.2vw, 1.02rem);
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 32rem;
  margin: clamp(1.2rem, 3vw, 1.8rem) auto 0;
}

.cta {
  display: inline-block;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding: 0.95rem 2.2rem;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--paper);
  text-decoration: none;
  border: 1px solid rgba(184, 160, 111, 0.7);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.cta:hover,
.cta:focus-visible {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--ink);
  outline: none;
}

.meta {
  margin-top: clamp(1.8rem, 4vw, 2.4rem);
  font-size: clamp(0.66rem, 1.6vw, 0.76rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.meta a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(250,248,244,0.25); padding-bottom: 1px; }
.meta a:hover { color: var(--champagne); border-color: var(--champagne); }

/* Cycle indicator — only visible while flipping between heroes (←/→ or n). */
.hero__label {
  position: absolute;
  bottom: 1.1rem;
  right: 1.3rem;
  z-index: 3;
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: rgba(10, 10, 9, 0.4);
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(184, 160, 111, 0.4);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.hero__label.is-on { opacity: 1; }

/* ---- Entrance: a slow, elegant fade-up ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes reveal {
  to { opacity: 1; transform: none; }
}

/* "Sea · Land · Air" never breaks apart */
.eyebrow__loc { white-space: nowrap; }

/* ---- Mobile: legibility over bright water + clean eyebrow wrap ---- */
@media (max-width: 640px) {
  /* Gentle central darkening so copy reads over whitecaps/wake/sky */
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgba(10,10,9,0.55) 0%,
        rgba(10,10,9,0.30) 40%,
        rgba(10,10,9,0.42) 64%,
        rgba(10,10,9,0.84) 100%),
      radial-gradient(140% 80% at 50% 46%, rgba(10,10,9,0.06) 30%, rgba(10,10,9,0.5) 100%);
  }
  .eyebrow, .tagline, .coming, .meta { text-shadow: 0 1px 10px rgba(10,10,9,0.7); }
  .logo { filter: drop-shadow(0 2px 14px rgba(10,10,9,0.55)); }
  .cta {
    background: rgba(10,10,9,0.45);
    border-color: rgba(184,160,111,0.85);
    text-shadow: 0 1px 8px rgba(10,10,9,0.6);
  }
  /* Eyebrow: two clean centered lines instead of orphaning "Air" */
  .eyebrow { letter-spacing: 0.14em; font-size: 0.58rem; }
  .eyebrow__dot { display: none; }
  .eyebrow__loc { display: block; margin-top: 0.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .hero__canvas { transition: none; }
}