/* =========================================================
   HOMEPAGE HERO V2: "scroll morph"
   Adapted from the 21st.dev React component "scroll-morph-hero";
   markup in templates/partials/hero-morph.html, motion in js/hero-morph.js.
   Tokens (colours, fonts, header heights) come from css/wfc.css.

   Base rules  = static layout: no JavaScript, reduced motion, or a very
                 short screen. The text, then a row of the photos.
   .is-fx      = added by hero-morph.js: the hero pins below the header
                 and the photos are placed by the script (a ring around
                 the headline, opening into an arch as the page scrolls).
   ========================================================= */

.wfc-morph {
  --gap: 8px;
  --radius: 20px;
  --pin: 200vh;                 /* scroll length of the pinned hero */
  --card-w: 46px;
  --card-h: 65px;
  position: relative;
  padding: var(--gap) var(--gap) 0;
}

.wfc-morph__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vw, 88px) var(--wfc-gutter);
  border-radius: var(--radius);
  background: var(--wfc-mist);
  text-align: center;
}

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

.wfc-morph__title {
  max-width: 18ch;
  margin: 0 auto;
  font-family: var(--wfc-display);
  font-weight: 800;
  font-stretch: 62%;
  font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4.5rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
  color: var(--wfc-ink);
  text-wrap: balance;
}

/* The scroll cue only makes sense in the pinned version. */
.wfc-morph__hint,
.wfc-morph__heading {
  display: none;
}

.wfc-morph__content {
  display: grid;
  justify-items: center;
  gap: 24px;
  margin-top: 24px;
}

.wfc-morph__text {
  max-width: 58ch;
  margin: 0;
  font-family: var(--wfc-text);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--wfc-slate);
}

.wfc-morph__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.wfc-morph__actions .wfc-btn {
  min-height: 52px;
  padding: 0 26px;
}

/* ---------- Photo cards ---------- */

.wfc-morph__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}

.wfc-morph__card {
  width: var(--card-w);
  height: var(--card-h);
  perspective: 600px;
}

/* On small screens the static row shows the first ten. */
@media (max-width: 575.98px) {
  .wfc-morph:not(.is-fx) .wfc-morph__card:nth-child(n + 11) {
    display: none;
  }
}

/* Front and back share one box; hovering turns it over. */
.wfc-morph__flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--wfc-ease);
}

.wfc-morph__front,
.wfc-morph__back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 10px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 6px 16px rgba(23, 35, 28, 0.18);
}

.wfc-morph__front {
  object-fit: cover;
  background: var(--wfc-line);
}

.wfc-morph__back {
  display: grid;
  place-items: center;
  background: var(--wfc-forest-deep);
  transform: rotateY(180deg);
}

.wfc-morph__back img {
  width: 62%;
  height: auto;
  max-height: none;
}

@media (hover: hover) and (pointer: fine) {
  .wfc-morph__card:hover {
    z-index: 2;
  }

  .wfc-morph__card:hover .wfc-morph__flip {
    transform: rotateY(180deg);
  }
}

@media (min-width: 768px) {
  .wfc-morph {
    --card-w: 60px;
    --card-h: 85px;
  }

  .wfc-morph__front,
  .wfc-morph__back {
    border-radius: 12px;
  }
}

@media (min-width: 992px) {
  .wfc-morph {
    --gap: 12px;
    --radius: 28px;
  }
}

/* ---------- Pinned version (added by hero-morph.js) ---------- */

/* The stage pins just below the sticky header. */
.wfc-morph.is-fx {
  height: calc(100svh - var(--wfc-header-h) - var(--gap) + var(--pin));
}

.wfc-morph.is-fx .wfc-morph__stage {
  position: sticky;
  top: calc(var(--wfc-header-h) + var(--gap));
  height: calc(100svh - var(--wfc-header-h) - 2 * var(--gap));
}

.wfc-morph.is-fx .wfc-morph__panel {
  height: 100%;
  padding: 0;
}

/* The headline sits in the middle of the ring; the script sets --morph-inner
   to the clear width inside it, and the type scales to fit. */
.wfc-morph.is-fx .wfc-morph__intro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(12px, 2vh, 20px);
  padding-bottom: var(--wfc-topbar-h); /* at the top of the page the contact bar pushes the stage down */
  opacity: 0;
  pointer-events: none;
}

.wfc-morph.is-fx .wfc-morph__title {
  max-width: var(--morph-inner, 380px);
  font-size: clamp(1.375rem, calc(var(--morph-inner, 380px) * 0.105), 2.75rem);
  line-height: 0.98;
}

.wfc-morph.is-fx .wfc-morph__hint {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-family: var(--wfc-text);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--wfc-slate);
}

.wfc-morph.is-fx .wfc-morph__hint i {
  font-size: 0.75rem;
  color: var(--wfc-forest);
  animation: wfc-morph-nudge 1.8s ease-in-out infinite;
}

@keyframes wfc-morph-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* The description and buttons fade in above the arch. They are only
   clickable once shown (.is-live, set by the script). */
.wfc-morph.is-fx .wfc-morph__content {
  position: absolute;
  top: clamp(28px, 9%, 88px);
  right: 0;
  left: 0;
  z-index: 3;
  gap: clamp(14px, 2.4vh, 24px);
  margin: 0;
  padding-inline: var(--wfc-gutter);
  opacity: 0;
  pointer-events: none;
}

.wfc-morph.is-fx .wfc-morph__content.is-live .wfc-btn {
  pointer-events: auto;
}

.wfc-morph.is-fx .wfc-morph__heading {
  display: block;
  max-width: 16ch;
  margin: 0;
  font-family: var(--wfc-display);
  font-weight: 800;
  font-stretch: 66%;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  line-height: 0.96;
  color: var(--wfc-ink);
  text-wrap: balance;
}

.wfc-morph.is-fx .wfc-morph__text {
  max-width: 54ch;
}

/* Every card starts at the centre of the stage; the script moves it from there. */
.wfc-morph.is-fx .wfc-morph__cards {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  margin: 0;
  pointer-events: none;
}

.wfc-morph.is-fx .wfc-morph__card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2);
  opacity: 0;
  pointer-events: auto;
  will-change: transform, opacity;
}

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

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

  .wfc-morph.is-fx .wfc-morph__hint i {
    animation: none;
  }
}