/*
 * Scroll hero for stefkanikolova.com
 *
 * One custom property drives everything: --p (0 → 1), the scroll progress
 * through the hero, set by hero.js. Each shape reads its own range
 * (--a start, --b end) and end offsets (--dx, --dy in px, --s scale, --o opacity).
 * Without JS, or with reduced motion, --p stays 0 and the hero is a static block.
 */

.sn-hero {
  --cream: #FBF6EE;
  --ink: #2E2A26;
  --ink-soft: #5E564E;
  --sage-deep: #56685D;
  --blush-deep: #9A5A52;
  --p: 0;
  position: relative;
  background: var(--cream);
  color: var(--ink);
}

/* The scroll runway exists only when JS is running and motion is allowed. */
.sn-hero.is-animated { height: 220vh; }

.sn-hero__stage {
  position: relative;
  min-height: min(100svh, 860px);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.sn-hero.is-animated .sn-hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}

/* ---------- Scene (SVG or video, always decorative) ---------- */

.sn-hero__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sn-hero__scene svg,
.sn-hero__scene img,
.sn-hero__scene video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.sn-hero__video { opacity: 0; transition: opacity .4s ease; }
.sn-hero.has-video .sn-hero__video { opacity: 1; }

.sn-shape {
  --a: 0; --b: 1; --dx: 0; --dy: 0; --s: 1; --o: 1; --r: 0;
  --t: clamp(0, (var(--p) - var(--a)) / (var(--b) - var(--a)), 1);
  transform-box: fill-box;
  transform-origin: center;
  transform:
    translate(calc(var(--t) * var(--dx) * 1px), calc(var(--t) * var(--dy) * 1px))
    rotate(calc(var(--t) * var(--r) * 1deg))
    scale(calc(1 + var(--t) * (var(--s) - 1)));
  opacity: calc(1 - var(--t) * (1 - var(--o)));
  will-change: transform, opacity;
}

/* Speech-bubble dots "type" in during the first part of the scroll. */
.sn-hero.is-animated .sn-dot { opacity: clamp(.25, (var(--p) - var(--a)) * 10 + .25, 1); }

/* The wave that carries the page into the next section. */
.sn-hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 18vh;
  transform: translateY(calc((1 - clamp(0, (var(--p) - .55) / .45, 1)) * 100%));
  pointer-events: none;
}
.sn-hero__wave svg { width: 100%; height: 100%; display: block; }

/* ---------- Text ---------- */

.sn-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 96px 24px;
  box-sizing: border-box;
  transform: translateY(calc(clamp(0, (var(--p) - .6) / .4, 1) * -48px));
}

.sn-hero__eyebrow {
  margin: 0 0 20px;
  font: 600 .875rem/1.4 Manrope, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blush-deep);
}

.sn-hero__title {
  margin: 0 0 22px;
  max-width: 13em;
  font: 500 clamp(2.3rem, 5.2vw, 4.25rem)/1.08 Lora, Georgia, serif;
  text-wrap: balance;
}

.sn-hero__lead {
  margin: 0 0 32px;
  max-width: 30em;
  font: 400 clamp(1.05rem, 1.6vw, 1.25rem)/1.7 Manrope, system-ui, sans-serif;
  color: var(--ink-soft);
}

.sn-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.sn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  border: 2px solid var(--sage-deep);
  font: 600 1.05rem/1 Manrope, system-ui, sans-serif;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.sn-btn--primary { background: var(--sage-deep); color: #fff; }
.sn-btn--primary:hover { background: #46564C; border-color: #46564C; }
.sn-btn--ghost { background: var(--cream); color: var(--sage-deep); }
.sn-btn--ghost:hover { background: #fff; }
.sn-btn:focus-visible,
.sn-hero__skip:focus-visible {
  outline: 3px solid var(--blush-deep);
  outline-offset: 4px;
}

/* Lets keyboard users jump past the scroll runway straight to the content. */
.sn-hero__skip {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  padding: 12px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 600 .95rem/1 Manrope, system-ui, sans-serif;
  transform: translateY(200%);
  opacity: 0;
}
.sn-hero__skip:focus { transform: none; opacity: 1; }

/* ---------- Phones ---------- */

@media (max-width: 720px) {
  .sn-hero.is-animated { height: 170vh; }
  .sn-hero__stage { align-items: flex-start; }
  .sn-hero__content { padding: 72px 20px 40vh; }
  .sn-hero__scene svg,
  .sn-hero__scene img,
  .sn-hero__scene video {
    top: auto;
    height: 52%;
    object-position: 85% 100%;
  }
  .sn-hero__scene svg { width: 100%; }
}

/* ---------- Reduced motion: static composition, no runway ---------- */

@media (prefers-reduced-motion: reduce) {
  .sn-hero.is-animated { height: auto; }
  .sn-hero.is-animated .sn-hero__stage { position: relative; height: auto; min-height: min(100svh, 860px); }
  .sn-shape, .sn-hero__content { transform: none !important; opacity: 1 !important; will-change: auto; }
  .sn-dot { opacity: 1; }
  .sn-hero__wave { transform: none; }
  .sn-hero__video { display: none; }
}