/*
  ============================================================
  Robert Warren Lyons, Jr. — Personal Platform
  File: css/style.css
  Description: Split-panel landing page. Content left (solid
  black), cinematic slideshow right (diagonal clip-path divider
  with gradient softening). B&W dominant, gold accent.
  Author: Bezalel (design) + Hiram (structure)
  ============================================================
*/


/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --black:        #060606;
  --gray-dark:    #1C1C1C;
  --gray-mid:     #3A3A3A;
  --gray-muted:   #7A7A7A;
  --gray-soft:    #AAAAAA;
  --white:        #F0F0F0;
  --white-pure:   #FFFFFF;
  --gold:         #B8973A;
  --gold-light:   #D4B25A;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Lato', system-ui, sans-serif;
  --ease:         0.2s ease;
}


/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  height: 100%;
  background: var(--black);
  color: var(--white);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   HERO — SPLIT LAYOUT
   Left: solid black content panel (46% of viewport)
   Right: cinematic photo panel, fills the remainder,
          diagonal left edge + gradient fade at the seam
============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  background: var(--black);
  overflow: hidden;
}


/* ============================================================
   LEFT PANEL — content
============================================================ */
.hero-left {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 46%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 4rem clamp(2rem, 4vw, 4rem) 4rem clamp(2.5rem, 5vw, 5rem);
  background: var(--black);
}


/* ============================================================
   RIGHT PANEL — cinematic slideshow
   clip-path creates the diagonal left edge:
     top-left starts 14% inward (creates the angle)
     bottom-left is flush (0%) — diagonal leans like \
   The ::after gradient dissolves the seam so it reads as
   photographic emergence rather than a hard geometric cut.
============================================================ */
.hero-right {
  position: relative;
  flex: 1;
  min-height: 100vh;
  overflow: hidden;
  clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.hero-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(6, 6, 6, 1.00)  0%,
    rgba(6, 6, 6, 0.85) 10%,
    rgba(6, 6, 6, 0.40) 22%,
    transparent          42%
  );
  z-index: 3;
  pointer-events: none;
}


/* ============================================================
   STATIC IMAGE — rw-03.jpg
   Full color. No grayscale. Dark suit, red shirt, gold Α Ω
   backdrop. Position framed to show face, upper body, and
   the Α Ω symbols above — not too much floor.
   Minimal filter: slight brightness pull so the right edge
   doesn't blow out against the gradient fade.

   TO RESTORE KEN BURNS ROTATION: replace .hero-image with
   the 4-slide .hero-slide system and re-add JS controller.
============================================================ */
.hero-image {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/rw-03.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 8%;
  filter: contrast(1.05) brightness(0.88);
}


/* ============================================================
   SIGNATURE — letterhead position, top of content column
============================================================ */
.hero-signature {
  margin-bottom: -0.5rem;
}

.signature-img {
  width: 150px;
  opacity: 0.80;
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
  display: block;
}


/* ============================================================
   IDENTITY BLOCK
============================================================ */
.hero-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* "BISHOP · PASTOR · SCHOLAR · AUTHOR" */
.hero-eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.55rem, 0.9vw, 0.72rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Gold period on "I Train." — micro-detail, macro effect. */
.gold-period {
  color: var(--gold);
}

/* "I Train." — the declaration. Upright, weight 600.
   The period stays. It is a statement, not a category. */
.hero-statement {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(2.75rem, 4.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--white-pure);
}

/* Gold rule — left-anchored */
.hero-rule {
  width: 44px;
  height: 1px;
  background: var(--gold);
}

/* "Something is coming." — the setup, sits above the rule */
.hero-teaser {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--white);
  opacity: 0.88;
}


/* ============================================================
   COUNTDOWN
============================================================ */
.countdown {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.25rem, 1vw, 0.75rem);
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: clamp(3rem, 5.5vw, 5rem);
}

.countdown-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 5.5vw, 5rem);
  line-height: 1;
  color: var(--white-pure);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.countdown-label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.5rem, 0.7vw, 0.6rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.35rem;
}

.countdown-sep {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  padding-top: 0.05em;
  align-self: flex-start;
  user-select: none;
}


/* ============================================================
   LAUNCH DATE
============================================================ */
.hero-date {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.55rem, 0.8vw, 0.65rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-muted);
  margin-top: -1.25rem;
}


/* ============================================================
   EMAIL CAPTURE — Netlify Forms
============================================================ */
.notify-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 400px;
}

.notify-label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-soft);
}

.notify-row {
  display: flex;
  width: 100%;
  border: 1px solid var(--gray-mid);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--ease);
}

.notify-row:focus-within {
  border-color: var(--gold);
}

.notify-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  outline: none;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.82rem;
  color: var(--white);
  letter-spacing: 0.02em;
  min-width: 0;
}

.notify-input::placeholder { color: var(--gray-muted); }

.notify-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--gray-dark) inset;
  -webkit-text-fill-color: var(--white);
}

.notify-btn {
  background: var(--gold);
  border: none;
  cursor: pointer;
  padding: 0.7rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
  transition: background var(--ease);
  flex-shrink: 0;
}

.notify-btn:hover  { background: var(--gold-light); }
.notify-btn:active { background: var(--gold); }


/* ============================================================
   RESPONSIVE — TABLET (below 900px)
   Reduce left panel width, keep split layout
============================================================ */
@media (max-width: 900px) {
  .hero-left {
    width: 52%;
  }
  .hero-right {
    clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}


/* ============================================================
   RESPONSIVE — MOBILE (below 680px)
   Stack vertically: image strip on top, content below.
   Ken Burns still runs, cropped to a 55vw tall banner.
============================================================ */
@media (max-width: 680px) {
  .hero {
    flex-direction: column;
  }

  .hero-left {
    width: 100%;
    min-height: auto;
    order: 2;
    padding: 2.5rem 1.5rem 3rem;
    gap: 1.75rem;
    justify-content: flex-start;
  }

  .hero-right {
    width: 100%;
    height: 75vw;
    min-height: 280px;
    max-height: 480px;
    order: 1;
    flex: none;
    clip-path: none;
  }

  .hero-image {
    background-position: center 22%;
  }

  .hero-right::after {
    background: linear-gradient(
      to bottom,
      transparent 40%,
      rgba(6, 6, 6, 0.9) 100%
    );
  }

  .hero-identity {
    align-items: flex-start;
  }

  .countdown {
    gap: 0.5rem;
  }

  .countdown-sep {
    display: none;
  }

  .notify-form {
    max-width: 100%;
  }

  .notify-row {
    flex-direction: column;
    border-radius: 2px;
  }

  .notify-input,
  .notify-btn {
    width: 100%;
    text-align: center;
  }

  .notify-btn {
    padding: 0.8rem 1rem;
  }
}


/* ============================================================
   ENTRANCE ANIMATION
   Content panel rises and fades in on load.
============================================================ */
@keyframes panelRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-left {
  animation: panelRise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-left { animation: none; }
}


/* ============================================================
   WHAT'S COMING — three-column teaser below hero
============================================================ */
.coming-section {
  background: var(--gray-dark);
  border-top: 1px solid rgba(184, 151, 58, 0.2);
  padding: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 8vw, 8rem);
}

.coming-inner {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.coming-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.coming-num {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  color: var(--gold);
}

.coming-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  color: var(--white-pure);
  line-height: 1;
}

.coming-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--gray-soft);
}

.coming-divider {
  width: 1px;
  height: 80px;
  background: var(--gray-mid);
  align-self: center;
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .coming-inner {
    flex-direction: column;
    gap: 2rem;
  }
  .coming-divider {
    width: 44px;
    height: 1px;
  }
}


/* ============================================================
   PRIVACY NOTE — below email capture form
============================================================ */
.privacy-note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--gray-muted);
  margin-top: -0.25rem;
}

.privacy-link {
  color: var(--gray-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ease);
}

.privacy-link:hover { color: var(--gold); }


/* ============================================================
   SITE FOOTER
============================================================ */
.site-footer {
  background: var(--black);
  border-top: 1px solid var(--gray-dark);
  padding: 1.25rem clamp(2.5rem, 5vw, 5rem);
  text-align: center;
}

.footer-privacy {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--gray-muted);
}


/* ============================================================
   SHARE BUTTON
============================================================ */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-soft);
  transition: color var(--ease);
}

.share-btn:hover  { color: var(--gold); }
.share-btn:active { color: var(--gold-light); }

.share-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}