/* =============================================================
   css/home.css
   Hero section for the home page.

   Layout anatomy (desktop):
   ┌─────────────────────────────────────────────────────────┐
   │  home__hero-eyebrow  (full width, above the split)      │
   ├────────────────────────────┬────────────────────────────┤
   │                            │                            │
   │   home__hero-media         │   home__hero-content       │
   │   (2fr / canvas+medallion) │   (3fr / text)             │
   │                            │                            │
   │        ┌────────┐          │                            │
   │        │        │  ← medallion top = --section-space-md │
   │   ══════════════════       │                            │
   │        │        │  ← equator = canvas top              │
   │        └────────┘          │                            │
   │   [ canvas fills below ]   │                            │
   │                            │                            │
   └────────────────────────────┴────────────────────────────┘

   Geometry invariant:
     medallion top  = --section-space-md
     canvas top     = --section-space-md + --medallion-size / 2
     padding-top on .home__hero-media drives this via:
       calc(--section-space-md + --medallion-size / 2)

   Depends on: tokens/ (palette, typography, space-size, layout,
               motion, shape-shadow), theme-*.css
   ============================================================= */


/* ----------------------------------------------------------
   Geometry token
   ---------------------------------------------------------- */

.home__hero {
  --medallion-size: clamp(14rem, 22vw, 22rem);
}


/* ----------------------------------------------------------
   Section shell
   ---------------------------------------------------------- */

.home__hero {
  width: 100%;
  min-height: calc(100svh - var(--header-height));
  background: var(--color-bg);
  overflow: hidden;
}


/* ----------------------------------------------------------
   EYEBROW — full-width banner above the two-column split
   ---------------------------------------------------------- */

.home__hero-eyebrow {
  margin: 0;
  width: 100%;
  padding-block: var(--space-1);
  padding-inline: var(--page-padding-inline-desktop);

  /* Absorb the header fade-zone */
  padding-top: calc(var(--space-1) + var(--header-height) * 0.25);

  font-family: var(--font-family-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-logo);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  text-align: center;

  color: var(--color-primary);
}


/* ----------------------------------------------------------
   INNER — 2fr/3fr grid
   ---------------------------------------------------------- */

.home__hero-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: calc(
    100svh
    - var(--header-height)
    - var(--space-5) * 2
    - var(--header-height) * 0.25
  );
}


/* ----------------------------------------------------------
   LEFT: canvas panel
   position: relative is the containing block for the
   absolutely-positioned medallion.

   padding-top pushes the canvas image down by:
     --section-space-md        (breathing room above medallion)
   + --medallion-size / 2      (bottom half of the circle)
   so the canvas top edge sits exactly at the medallion equator.

   The mask fades the right edge; 80% solid keeps the centred
   medallion fully visible before the transparency starts.
   ---------------------------------------------------------- */

.home__hero-media {
  position: relative;
  overflow: hidden;
  min-height: 100%;

  padding-top: calc(var(--section-space-sm) + var(--medallion-size) / 3);

  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black 0%,
    black 80%,
    transparent 100%
  );
}


/* ----------------------------------------------------------
   MEDALLION — absolutely positioned within the media panel.
   left: 50% + translateX(-50%) centres it horizontally.
   top: --section-space-md gives breathing room; the circle's
   equator then lands exactly at the canvas top edge.
   z-index: 1 keeps it above the canvas image.
   ---------------------------------------------------------- */

.home__hero-medallion {
  position: absolute;
  left: 50%;
  top: var(--section-space-sm);
  transform: translateX(-50%);
  z-index: 1;

  width: var(--medallion-size);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);

  background: var(--color-bg);

  /*
  box-shadow:
    0 0 0 2px var(--color-border),
    var(--shadow-lg);
  */

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background var(--duration-base) var(--ease-standard);
}

.home__hero-psi {
  width: 76%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: screen;
}

:root[data-theme="day"] .home__hero-psi,
:root[data-theme="twilight"] .home__hero-psi {
  mix-blend-mode: multiply;
}


/* ----------------------------------------------------------
   Canvas — fills the full media panel from padding-top down.
   The medallion floats above it via z-index.
   ---------------------------------------------------------- */

.home__hero-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}


/* ----------------------------------------------------------
   RIGHT: content panel
   Fix: padding-inline-start and padding-inline-end are scoped
   to desktop (≥768px) only, so the 48px left indent never
   applies when the grid is single-column and the title would
   overlap the media panel.
   ---------------------------------------------------------- */

.home__hero-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding-block-start: var(--section-space-sm);
  padding-block-end:   var(--section-space-md);
}

@media (min-width: 768px) {
  .home__hero-content {
    padding-inline-start: var(--space-12);
    padding-inline-end:   var(--page-padding-inline-desktop);
  }
}

/* H1 */
.home__hero-title {
  margin: 0 0 var(--space-6);

  font-family: var(--font-family-display);
  font-size: var(--text-display-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);

  color: var(--color-text);
}

/* Lede */
.home__hero-lede {
  margin: 0 0 var(--space-8);

  font-family: var(--font-family-sans);
  font-size: var(--text-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);

  color: var(--color-text-muted);
}

/* CTA row */
.home__hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Button base */
.home__hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--control-height-md);
  padding-inline: var(--space-6);
  border-radius: var(--radius-pill);

  font-family: var(--font-family-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-decoration: none;
  white-space: nowrap;

  transition:
    background  var(--duration-fast) var(--ease-standard),
    color       var(--duration-fast) var(--ease-standard),
    opacity     var(--duration-fast) var(--ease-standard),
    transform   var(--duration-base) var(--ease-emphasized),
    box-shadow  var(--duration-base) var(--ease-emphasized);
}

.home__hero-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-glow);
}
.home__hero-btn--primary:hover {
  background: var(--color-primary-hover);
  transform: scale(1.04);
}
.home__hero-btn--primary:active {
  background: var(--color-primary-active);
  transform: scale(0.98);
}

.home__hero-btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: var(--border-width-thin) solid var(--color-border);
}
.home__hero-btn--ghost:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  transform: scale(1.04);
}
.home__hero-btn--ghost:active {
  transform: scale(0.98);
}


/* ----------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .home__hero-btn { transition: none; }
}


/* ----------------------------------------------------------
   Responsive — below 768px
   ---------------------------------------------------------- */

@media (max-width: 767px) {
  .home__hero-eyebrow {
    font-size: var(--text-lg);
    padding-inline: var(--page-padding-inline-mobile);
    text-align: center;
  }

  .home__hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  /* Mobile: same equator pattern as desktop.
     Canvas starts at the mobile medallion's equator.
     Mask swapped to fade the bottom edge for the stacked layout. */
  .home__hero-media {
    max-height: 22rem;
    padding-top: calc(var(--space-6) + clamp(10rem, 40vw, 14rem) / 2);
    padding-bottom: 0;

    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 72%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 72%,
      transparent 100%
    );
  }

  /* Medallion stays absolutely centred horizontally;
     top shifts to the mobile breathing-room token. */
  .home__hero-medallion {
    top: var(--space-6);
    width: clamp(10rem, 40vw, 14rem);
  }

  /* iOS Safari fix: remove ALL viewport-based sizing on mobile.
     Safari's address bar animation causes relayout when elements
     use vh/svh/dvh + overflow:hidden, making the canvas rescale.
     On mobile the hero doesn't need to fill the screen anyway. */
  .home__hero {
    min-height: auto;
    overflow: visible;
  }

  .home__hero-inner {
    min-height: auto;
  }

  .home__hero-media {
    min-height: auto;
  }

  /* Fix canvas zoom on scroll: force the canvas into its own
     compositing layer and fix its dimensions so the browser
     never recalculates during scroll. */
  .home__hero-media .hero-carousel-wrap {
    height: auto;
    transform: translateZ(0); /* Force GPU layer */
  }

  .home__hero-media .hero-carousel-wrap > img,
  .home__hero-media > .home__hero-canvas {
    height: auto;
    transform: translateZ(0); /* Force GPU layer */
  }

  .home__hero-content {
    padding-inline: var(--page-padding-inline-mobile);
    padding-block: var(--section-space-sm);
  }

  .home__hero-title {
    font-size: var(--text-display-sm);
  }
}


/* ----------------------------------------------------------
   Hero carousel
   - Psi logo: JS fades in-place (no extra elements)
   - Canvas: JS wraps in .hero-carousel-wrap with a back layer
   ---------------------------------------------------------- */

/* Canvas wrapper: inherits the flow position of the original img */
.hero-carousel-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-carousel-wrap > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-carousel-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .home__hero-psi,
  .home__hero-canvas,
  .hero-carousel-back {
    transition: none !important;
  }
}