@import '../tokens.css?v=349798aa';

/* ── HELLO interactive-eye hero + card ─────────────────────────────
 * Opt-in page stylesheet — pair with js/page/hero-eye.js, which owns
 * both blocks: the full-viewport homepage hero (initHeroEye) and the
 * card-scale replay used on project cards (initHeroEyeCard). Include
 * this <link> only on pages that use one of them. */

/* HELLO interactive-eye hero (homepage). Full-viewport stage; the SVG mark is
 * built + animated by js/page/hero-eye.js. Type fills with currentColor so it
 * themes; the subline + CTA sit beneath. Full-bleed to the viewport edges (same
 * trick as .featured-media) so the wide mark has room. */
.hero-eye {
  position: relative;
  box-sizing: border-box;
  /* Cancel .main's top padding so the hero is a true full-viewport block, and
   * go full-bleed to the viewport edges (same trick as .featured-media). */
  margin: calc(-1 * var(--space-32)) calc(50% - 50vw) 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top padding clears the fixed (white) header AND equals the mark's bottom
   * margin, so the distance from the top to the HELLO matches the distance from
   * the HELLO down to the name/role block. */
  padding: var(--space-20) var(--space-12) var(--space-12);
  text-align: center;
  /* Click-to-cycle brand-art schemes (set on :root by hero-eye.js). Plain state
   * leaves the var unset, so the fallback keeps the page surface showing through. */
  background-color: var(--hero-active-bg, transparent);
  transition: background-color 550ms var(--ease-smooth);
}
/* The stage grows to fill the height left after the foot; the SVG fills the
 * stage and scales to fit (preserveAspectRatio), centred, so the mark is as
 * large as the space allows and the vertical rhythm stays balanced. */
.hero-eye-stage {
  width: 100%;
  /* Width-driven so the mark stretches to the side margins; height-capped so the
   * subline + button stay in view on shorter screens (it then fits to height with
   * side breathing room instead of overflowing). */
  aspect-ratio: 3075 / 1580;
  max-height: calc(100svh - 21rem);
  margin-bottom: var(--space-20);   /* == padding-top → balanced rhythm */
  position: relative;
}
.hero-eye-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Figure of the figure-ground pair: the active scheme's fg, else page ink. */
  color: var(--hero-active-fg, var(--color-text-primary));
  transition: color 550ms var(--ease-smooth);
  overflow: visible;
}
/* Hover devices get the cursor affordance; touch shows nothing special until tap. */
@media (hover: hover) {
  .hero-eye-svg { cursor: crosshair; }
}
/* Subline + CTA grouped so the balance-gap sits above this block, not between
 * the two of them. */
.hero-eye-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  transition: opacity 700ms var(--ease-smooth);
}

/* While the eye is open (engaged), it centres on the viewport and overlaps the
 * foot — hide the subline until it closes back into HELLO. The CTA button
 * stays visible (and clickable) throughout. */
.hero-eye--open .hero-eye-sub {
  opacity: 0;
}

/* Hero wake-up. While the eye is waking, the nav + subline/CTA stay hidden and
 * the hero's colour FLASHES snap quickly; both are added pre-build by
 * hero-eye.js and removed at the "boom", when the eye expands into HELLO — the
 * chrome then fades in and colour resolves to black & white on the normal ease. */
.hero-waking .header,
.hero-waking .hero-eye-foot {
  opacity: 0;
  pointer-events: none;
}
.hero-waking .hero-eye {
  transition: background-color 320ms var(--ease-smooth);
}
.hero-waking .hero-eye-svg {
  transition: color 320ms var(--ease-smooth);
}
.hero-eye-sub {
  max-width: 42ch;
  margin: 0;
  font-size: var(--font-size-display-s);
  line-height: var(--line-height-display-s);
  letter-spacing: var(--letter-spacing-display-s);
  font-weight: var(--font-weight-display-s);
  /* Follows the active scheme's fg for legibility on saturated grounds; reverts
   * to the muted secondary ink in the plain state. */
  color: var(--hero-active-fg, var(--color-text-secondary));
  transition: color 550ms var(--ease-smooth),
              opacity 700ms var(--ease-smooth);
}
/* The CTA joins the figure-ground system while a scheme is active: a solid chip
 * of the scheme's fg labelled in its bg, inverting to an outline-style fill on
 * hover. Scoped to .hero-eye--themed so the plain hero keeps the accent button. */
.hero-eye--themed .btn-primary {
  background: var(--hero-active-fg);
  color: var(--hero-active-bg);
  border-color: var(--hero-active-fg);
}
.hero-eye--themed .btn-primary:hover {
  background: var(--hero-active-bg);
  color: var(--hero-active-fg);
  border-color: var(--hero-active-fg);
}
/* .main's top padding drops to --space-24 at ≤768px; match the hero's pull-up so
 * it stays a true full-viewport block and never tucks under the fixed nav. */
@media (max-width: 768px) {
  .hero-eye { margin-top: calc(-1 * var(--space-24)); }
}
/* Mobile: hero-eye.js swaps in the portrait mark (H full-height, E·L·L row, big
 * O); the stage takes the portrait aspect so it fills the narrow viewport. */
@media (max-width: 640px) {
  .hero-eye {
    padding: var(--space-20) var(--space-6) var(--space-8);
  }
  .hero-eye-stage {
    aspect-ratio: 2797 / 3583;        /* H·E·L·L row + full-width O circle */
    max-height: calc(100svh - 17rem); /* reserve room so the foot stays above the fold */
    margin-bottom: var(--space-10);
  }
  .hero-eye-sub {
    max-width: 40ch;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-small);
  }
}

/* ── Portfolio rebuild card — card-scale HELLO eye ─────────────
 * A scoped replay of the homepage hero mark (built + driven by
 * initHeroEyeCard in js/page/hero-eye.js). The figure-ground pair
 * reads from card-scoped custom props the JS sets while the eye is
 * met; the plain state leaves them unset, so the card falls back to
 * the shared media surface + page ink and themes automatically. */
.hero-eye-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-10);
  background: var(--hero-card-bg, var(--color-surface-tertiary));
  pointer-events: none;
  transition: transform var(--duration-luxury) var(--ease-smooth),
              background-color 550ms var(--ease-smooth);
}

.hero-eye-card-svg {
  width: 100%;
  height: 100%;
  color: var(--hero-card-fg, var(--color-text-primary));
  transition: color 550ms var(--ease-smooth);
  overflow: visible;
}

/* Opt the card's media surface into the shared card-hover scale
 * (the base .case-card hover system lives in styles.css). */
.case-card:hover .case-media > .hero-eye-card {
  transform: scale(1.02);
}