/* ==========================================================================
   California Beach Pansol — Coming Soon
   Coastal Sunrise (warm) palette. Vanilla CSS, mobile-first.
   ========================================================================== */

@font-face {
  font-family: "Benson Old Style";
  src: url("assets/BensonOldStyleOpti-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Coastal Sunrise — warm palette (brand canonical) */
  --color-espresso: #573829;
  --color-orange: #f88000;
  --color-gold: #e9c46a;
  --color-cream: #fffbf5;
  --color-ink: #241c17;
  --color-taupe: #847059;

  /* Derived */
  --shadow-soft: 0 0.125rem 1.25rem rgba(36, 28, 23, 0.55);
  --shadow-text: 0 0.0625rem 0.375rem rgba(36, 28, 23, 0.6);

  /* Spacing scale (rem) */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-cream);
  background-color: var(--color-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Hero — full-viewport, background photo with warm scrim
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-image: url("assets/hero-800.webp"); /* mobile-first: small + fast */
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-color: var(--color-ink);
  overflow: hidden;
}

/* Warm dark scrim so cream logo + text stay legible over the photo */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      120% 90% at 50% 38%,
      rgba(36, 28, 23, 0.28) 0%,
      rgba(36, 28, 23, 0.55) 55%,
      rgba(36, 28, 23, 0.75) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(36, 28, 23, 0.50) 0%,
      rgba(36, 28, 23, 0.28) 30%,
      rgba(36, 28, 23, 0.40) 70%,
      rgba(36, 28, 23, 0.82) 100%
    );
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */
.content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1.6vh, 1rem);
  text-align: center;
  padding: clamp(0.75rem, 3vh, 2rem) clamp(1rem, 5vw, 2rem);
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Logo SVG
   -------------------------------------------------------------------------- */
.logo {
  /* height-driven so the whole lockup shrinks to fit short viewports */
  width: auto;
  height: clamp(6rem, 26svh, 12rem);
  max-width: 88vw;
  color: var(--color-cream);
  filter: drop-shadow(0 0.125rem 0.75rem rgba(36, 28, 23, 0.7));
  overflow: visible;
}

/* The filled orange mark — painted on strictly left → right (see drawLTR) */
.logo-mark-fill {
  opacity: 1;
  clip-path: inset(0 100% 0 0); /* start fully clipped from the right edge */
}

/* The wordmark group */
.logo-wordmark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(6px);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 1.5vh, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  text-shadow: var(--shadow-text);
  max-width: 32rem;
}

.headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 5.5vh, 3.6rem);
  line-height: 1.07;
  letter-spacing: -0.01em;
  color: var(--color-cream);
  text-shadow: var(--shadow-text);
}

.lede {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.7vh, 1.0625rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 251, 245, 0.88);
  text-shadow: var(--shadow-text);
  max-width: 30rem;
}

/* --------------------------------------------------------------------------
   Contact — single row of icon-pill buttons
   -------------------------------------------------------------------------- */
.contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.4rem, 1vh, 0.625rem);
  margin-top: clamp(0.25rem, 1vh, 0.75rem);
}

.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(0.45rem, 1.1vh, 0.6rem) clamp(0.7rem, 2.2vw, 1rem);
  border-radius: 2rem;
  border: 1px solid rgba(255, 251, 245, 0.25);
  background: rgba(36, 28, 23, 0.40);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--color-cream);
  text-decoration: none;
  font-size: clamp(0.75rem, 1.5vh, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.contact__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-orange);
  transition: color 0.25s ease;
}

.contact__icon svg {
  width: 100%;
  height: 100%;
}

.contact__label {
  /* shown inline — keep it short */
}

/* Email address: show in full where there's room; cap only on tiny screens */
.contact__link:nth-child(2) .contact__label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(34ch, 82vw);
}

/* FB / IG icon-only pills — square and compact */
.contact__link--icon-only {
  padding: 0.6rem 0.75rem;
}
.contact__link--icon-only .contact__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.contact__link--icon-only .contact__label {
  display: none;
}

/* Interactive states */
.contact__link:hover,
.contact__link:focus-visible {
  background: rgba(248, 128, 0, 0.9);
  border-color: var(--color-orange);
  color: var(--color-ink);
  transform: translateY(-2px);
}

.contact__link:hover .contact__icon,
.contact__link:focus-visible .contact__icon {
  color: var(--color-ink);
}

.contact__link:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 2px;
}

.contact__link:active {
  transform: translateY(0);
  background: var(--color-orange);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(0.5rem, 1.6vh, 1.25rem);
  font-size: clamp(0.68rem, 1.4vh, 0.75rem);
  letter-spacing: 0.03em;
  color: rgba(255, 251, 245, 0.55);
  text-shadow: var(--shadow-text);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .hero {
    background-image: url("assets/hero-1600.webp"); /* sharper on larger screens */
  }

  .content {
    gap: clamp(0.6rem, 2vh, 1.25rem);
    padding: clamp(1rem, 4vh, 3rem) var(--space-lg);
  }

  .logo {
    height: clamp(8rem, 32svh, 16rem);
  }

  .eyebrow {
    font-size: clamp(0.78rem, 1.6vh, 0.9rem);
  }

  .lede {
    font-size: clamp(0.95rem, 1.9vh, 1.0625rem);
  }
}

@media (min-width: 64rem) {
  .logo {
    height: clamp(9rem, 36svh, 18rem);
  }
}

/* ==========================================================================
   ANIMATIONS — cinematic, unhurried
   ========================================================================== */

/*
  Sequence:
  0.35s — Triangle paints on, strictly left → right       (2.4s, clip sweep)
  2.5s  — Wordmark rises up and fades in                  (1.7s)
  3.2s  — Eyebrow fades up                                (1.8s)
  3.5s  — Headline fades up                               (1.8s)
  3.8s  — Lede fades up                                   (1.8s)
  4.1s  — Contacts fade up                                (1.8s)
  4.4s  — Footer fades up                                 (1.8s)
  4.7s  — Scroll cue fades in, then pulses                (1.0s)
*/

/* --- Mark: the orange triangle paints on strictly left → right --- */
@keyframes drawLTR {
  to { clip-path: inset(0 0 0 0); }
}
.logo-mark-fill {
  /* unhurried, steady hand-drawn pace — near-linear with a soft finish */
  animation: drawLTR 2.4s cubic-bezier(0.25, 0, 0.3, 1) 0.35s both;
}

/* --- Wordmark --- */
@keyframes wordmarkReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.logo-wordmark {
  animation: wordmarkReveal 1.7s cubic-bezier(0.16, 1, 0.3, 1) 2.5s both;
}

/* --- Staggered content items --- */
.reveal-item {
  opacity: 0;
  transform: translateY(14px);
  animation: revealUp 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-1 { animation-delay: 3.2s; }  /* eyebrow  */
.reveal-2 { animation-delay: 3.5s; }  /* headline */
.reveal-3 { animation-delay: 3.8s; }  /* lede     */
.reveal-4 { animation-delay: 4.1s; }  /* contacts */
.reveal-5 { animation-delay: 4.4s; }  /* footer   */

/* --- Reduced motion: skip all animations, show instantly --- */
@media (prefers-reduced-motion: reduce) {
  .contact__link { transition: none; }
  .contact__link:hover,
  .contact__link:focus-visible,
  .contact__link:active { transform: none; }

  .logo-mark-fill,
  .logo-wordmark,
  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    clip-path: none !important;
  }
}