/* ============================================================
   STYLE2.CSS — home.html page-specific styles only
   Global vars/resets: global.css
   Reusable components: ui.css
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */

.hero-bg {
  position: relative;
  margin-top: calc(-1 * var(--nav-height));
  height: calc(80vh + var(--nav-height));
  background: var(--teal-primary) right center / cover no-repeat;
  isolation: isolate;
  overflow: hidden;
}

/* Full image layer — fades in once JS confirms load */
.hero-bg__img {
  position: absolute;
  inset: 0;
  background: url("assets/images/hero-bg-mobile.webp") right center / cover
    no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}

.hero-bg__img--loaded {
  opacity: 1;
}

@media (min-width: 768px) {
  .hero-bg {
    height: calc(75vh + var(--nav-height));
  }

  .hero-bg__img {
    background-image: url("assets/images/hero-bg.webp");
    background-position: left center;
  }
}

/* Teal tint */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--teal-primary);
  mix-blend-mode: soft-light;
  opacity: 1;
  pointer-events: none;
  filter: blur(6px) saturate(2.25);
  transform: scale(1.03);
}

/* Depth gradient — mobile */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    oklch(from var(--slate-dark) l c h / 1) 0%,
    oklch(from var(--slate-dark) l c h / 0.8) 35%,
    oklch(from var(--slate-dark) l c h / 0.2) 70%,
    oklch(from var(--slate-dark) l c h / 0) 100%
  );
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero-bg::after {
    background: var(--slate-dark);
    mix-blend-mode: multiply;
    opacity: 0.5;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding-top: 0;
}

.hero-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px var(--gap) calc(var(--gap) * 2);
}

.hero-text > .hero-actions {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .hero-content {
    width: min(1440px, 90%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: 0 var(--gap);
    padding-top: 0;
  }

  .hero-text {
    grid-column: 1 / 9;
    grid-row: 5 / 10;
    justify-content: center;
    gap: var(--gap);
    background: oklch(from var(--slate-dark) l c h / 0.5);
    border-left: var(--border-width) solid var(--teal-primary);
    padding: 40px;
    width: auto;
  }
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.hero-headline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-fluid-hero);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--gold-base);
  margin: 0;
  white-space: nowrap;

  /* Light-tracking gradient — driven by JS --lx / --ly */
  --lx: 0;
  --ly: 0;
  position: relative;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image:
    radial-gradient(
      circle at calc(50% + var(--lx) * 45%) calc(50% + var(--ly) * 45%),
      var(--gold-spec) 0%,
      color-mix(in oklch, var(--gold-spec) 70%, transparent) 14%,
      transparent 32%
    ),
    radial-gradient(
      circle at calc(50% + var(--lx) * 35%) calc(50% + var(--ly) * 35%),
      var(--gold-glow) 0%,
      transparent 65%
    ),
    linear-gradient(
      calc(120deg + var(--lx) * 20deg),
      transparent 35%,
      color-mix(in oklch, var(--gold-200) 80%, transparent) 50%,
      transparent 65%
    ),
    linear-gradient(var(--gold-base), var(--gold-base));
}

.hero-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-fluid-body);
  line-height: 1.6;
  color: var(--slate-200);
  max-width: 520px;
  text-wrap: pretty;
  margin: 0;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Home-specific section tweaks */
@media (min-width: 768px) {
  .services .section__inner {
    padding-top: 0 !important;
  }
}

/* ============================================================
   PAGE INTRO TRANSITION
   Staggered fade-up on hero + proof-bar elements.
   Elements start hidden; JS adds .page-ready to <body>
   once window load fires, triggering each animation.
   Also prevents the font-swap 3-line flash: hero-headline
   stays invisible until EB Garamond is loaded.
   ============================================================ */

:root {
  --timing-function: cubic-bezier(0.17, 0.67, 0.36, 1);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-eyebrow,
.hero-headline,
.hero-sub,
.hero-actions,
.proof-bar__inner,
.proof-slot {
  opacity: 0;
  transform: translateY(20px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-headline,
  .hero-sub,
  .hero-actions,
  .proof-bar__inner,
  .proof-slot {
    opacity: 1;
    transform: none;
  }
}

body.page-ready .hero-eyebrow {
  animation: fadeUp 0.6s var(--timing-function) 0.1s both;
}

body.page-ready .hero-headline {
  animation: fadeUp 0.7s var(--timing-function) 0.25s both;
}

body.page-ready .hero-sub {
  animation: fadeUp 0.7s var(--timing-function) 0.45s both;
}

body.page-ready .hero-actions {
  animation: fadeUp 0.6s var(--timing-function) 0.65s both;
}

body.page-ready .proof-bar__inner,
body.page-ready .proof-slot {
  animation: fadeUp 0.6s var(--timing-function) 0.85s both;
}