/*
 * Hero: "unwind the thread".
 *
 * In the editor this section is ordinary blocks (the "Hero: unwind the thread"
 * pattern). On the front, inc/hero.php turns those blocks into the markup
 * styled here and assets/js/hero.js runs the interaction.
 *
 * Colours come from the theme palette, so the hero follows Appearance >
 * Editor > Styles and the light/dark toggle.
 */

.jh {
  --jh-ink: var(--wp--preset--color--contrast);
  --jh-ink-2: var(--wp--preset--color--accent-4);
  --jh-thread: var(--wp--preset--color--contrast);
  --jh-bg: color-mix(in srgb, var(--wp--preset--color--accent-1) 14%, var(--wp--preset--color--base));
  --jh-soft: color-mix(in srgb, var(--wp--preset--color--accent-1) 45%, var(--wp--preset--color--base));
  --jh-track: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
  --jh-pad-x: 48px;
  --jh-area: 380px;
  --jh-h: 100svh;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* A full screen: the header floats over the top of the hero. */
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
  overflow: hidden;
  box-sizing: border-box;
  /* The tint fades into the page colour towards the bottom, so the next section follows without a seam. */
  background: linear-gradient(to bottom, var(--jh-bg) 0%, var(--jh-bg) 45%, var(--wp--preset--color--base) 100%);
  color: var(--jh-ink);
  font-family: var(--wp--preset--font-family--dm-sans);
  -webkit-font-smoothing: antialiased;
}
.jh *, .jh *::before, .jh *::after { box-sizing: border-box; }
/* The section itself spans the page (alignfull); nothing above or below should add a gap. */
.jh.jh { margin-block: 0; }
/* When the hero opens the page it runs up underneath the floating header. */
.wp-block-post-content > .jh.jh:first-child { margin-block-start: calc(-1 * var(--jl-header-h, 72px)); }
/* Finale: white text over the photo or video, in both light and dark mode. */
.jh.is-done { --jh-ink: #fff; --jh-ink-2: rgba(255, 255, 255, 0.88); }

/* Layers */
.jh__glow {
  position: absolute; inset: 0; z-index: -3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 70%, var(--wp--preset--color--base), color-mix(in srgb, var(--wp--preset--color--accent-2) 22%, var(--wp--preset--color--base)) 45%, transparent 80%);
  transition: opacity 2.5s ease;
}
.jh.is-done .jh__glow { opacity: 0.6; }

.jh__video {
  position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  opacity: 0; filter: blur(24px); transform: scale(1.08);
  transition: opacity 3s cubic-bezier(.4, 0, .2, 1) .3s, filter 3.4s ease .3s, transform 4s cubic-bezier(.2, .7, .2, 1) .3s;
}
.jh.is-done .jh__video { opacity: 1; filter: none; transform: none; }
.jh__video iframe, .jh__video video {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, calc(var(--jh-h) * 1.7778)); aspect-ratio: 16 / 9; height: auto;
  border: 0; object-fit: cover; max-width: none;
}
/* YouTube: enlarged so its title bar and logo, which can flash at the edges, fall outside the frame. */
.jh__video iframe { transform: translate(-50%, -50%) scale(1.25); }
/* A photo simply fills the hero, cropped from the centre. */
.jh__video .jh__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.jh__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  /* Darkest where the text sits (the upper part), so white text stays readable over a bright sky;
     lighter below, so the picture itself still feels open. */
  background: linear-gradient(180deg, rgba(18, 24, 21, 0.64), rgba(18, 24, 21, 0.5) 40%, rgba(18, 24, 21, 0.14) 72%, rgba(18, 24, 21, 0.45));
  transition: opacity 3s ease .3s;
}
.jh.is-done .jh__scrim { opacity: 1; }

/* Top row: headline + supporting text */
.jh__top {
  position: relative; display: flex; flex-direction: row; justify-content: space-between;
  align-items: flex-end; gap: 40px; padding: calc(var(--jl-header-h, 72px) + 56px) var(--jh-pad-x) 0;
}
.jh .jh__stack {
  position: relative; display: grid; align-items: end; flex: 1; min-width: 0; max-width: 820px;
  margin: 0; padding: 0; font: inherit; color: inherit;
}
.jh .jh__line {
  grid-area: 1 / 1; display: block; width: 100%; max-width: 820px; margin: 0;
  font-family: var(--wp--preset--font-family--fraunces); font-weight: 400;
  font-size: clamp(52px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.025em;
  color: var(--jh-ink); text-wrap: balance; transform-origin: left bottom;
  opacity: 0; filter: blur(12px); transform: translateY(18px) scale(0.97);
  transition: opacity 1.6s ease, filter 1.6s ease, transform 1.8s cubic-bezier(.2, .7, .2, 1), color 2.4s ease .3s;
}
.jh .jh__line--last { font-size: clamp(64px, 8vw, 104px); }
.jh .jh__line.is-active { opacity: 1; filter: none; transform: none; }
.jh .jh__line.is-past { transform: translateY(-18px) scale(0.97); }

.jh__body { position: relative; width: 340px; max-width: 100%; height: 90px; margin-bottom: 8px; flex: none; }
.jh .jh__hint, .jh .jh__final {
  position: absolute; left: 0; bottom: 0; margin: 0; font-size: 17px; line-height: 1.55;
  color: var(--jh-ink-2); text-wrap: pretty;
}
.jh .jh__hint { opacity: 1; transition: opacity 1.2s, color 2.4s ease .3s; }
.jh .jh__final { opacity: 0; transform: translateY(8px); transition: opacity 1.6s ease .8s, transform 1.6s ease .8s, color 2.4s ease .3s; }
.jh.is-done .jh__hint { opacity: 0; }
.jh.is-done .jh__final { opacity: 1; transform: none; }

/* Interaction area */
.jh__area { position: relative; flex: 1; min-height: var(--jh-area); cursor: crosshair; touch-action: none; -webkit-user-select: none; user-select: none; }
.jh__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 1; transition: opacity 2s ease; }
.jh.is-done .jh__svg { opacity: 0; }
.jh__soft, .jh__path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.jh__soft { stroke: var(--jh-soft); stroke-width: 16; }
.jh__path { stroke: var(--jh-thread); stroke-width: 2.2; }

.jh__bar {
  position: absolute; left: var(--jh-pad-x); right: var(--jh-pad-x); bottom: 36px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.jh__meter { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1; color: var(--jh-ink-2); opacity: 1; transition: opacity 1.2s; }
.jh.is-done .jh__meter { opacity: 0; }
.jh__progress { width: 160px; height: 6px; border-radius: 999px; background: var(--jh-track); overflow: hidden; }
.jh__fill { height: 100%; width: 0; border-radius: 999px; background: var(--jh-thread); }
.jh .jh__reset {
  appearance: none; border: 0; background: transparent; margin: 0; cursor: pointer; border-radius: 999px;
  padding: 14px 18px; font: 500 14px/1 var(--wp--preset--font-family--dm-sans); color: var(--jh-ink-2);
  opacity: 0; pointer-events: none; transition: opacity 1.2s 2s, color 2.4s;
}
.jh .jh__reset:hover { color: var(--jh-ink); }
.jh .jh__reset:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.jh.is-done .jh__reset { opacity: 1; pointer-events: auto; }

/* Tablet */
@media (max-width: 1099px) {
  .jh { --jh-pad-x: 40px; --jh-area: 440px; }
  .jh__top { flex-direction: column; align-items: stretch; gap: 28px; padding-top: calc(var(--jl-header-h, 72px) + 48px); }
  .jh .jh__line { font-size: 68px; }
  .jh .jh__line--last { font-size: 88px; }
  .jh__body { width: 440px; height: 56px; margin-bottom: 0; }
}

/* Mobile */
@media (max-width: 699px) {
  .jh { --jh-pad-x: 24px; --jh-area: 420px; }
  .jh__top { gap: 20px; padding-top: calc(var(--jl-header-h, 66px) + 28px); }
  .jh .jh__line { font-size: clamp(40px, 12vw, 54px); }
  .jh .jh__line--last { font-size: clamp(48px, 15vw, 64px); }
  .jh__body { width: 100%; height: 78px; }
  .jh .jh__hint, .jh .jh__final { font-size: 16px; }
  .jh__bar { bottom: 28px; }
  .jh__progress { width: 120px; }
  .jh__pct { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jh *, .jh *::before, .jh *::after { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}