/* =========================================================
   Hero shell
   ========================================================= */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--paper-warm);
}

/* Layer 1 — the room, and the room waking up ------------- */

/* Both layers and both anchors carry the identical transform, so the
   hotspot and the handwriting stay welded to the artwork. */
.hero__media,
.hero__anchors {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--push, var(--hero-push)));
  transition: transform 900ms var(--ease-soft);
  will-change: transform;
}

.hero__media { z-index: 0; }
.hero__anchors { z-index: 5; pointer-events: none; }

.hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The crossfade. Both layers are always present — there is no swap,
   only opacity, so a cut can never be seen. */
.hero__layer--alive {
  opacity: 0;
  transition: opacity var(--fade-out) var(--ease-soft);
}
.hero.is-alive .hero__layer--alive {
  opacity: 1;
  transition: opacity var(--fade-in) var(--ease-out);
}

/* =========================================================
   Layer 2 — drifting hand-drawn marks
   ========================================================= */

.marks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.mark {
  position: absolute;
  color: var(--ink);
  opacity: 0;
  will-change: transform;
}
.is-ready .mark { opacity: 0.26; transition: opacity 1600ms var(--ease-out) 900ms; }

.mark--leaf { width: 2.25rem; top: 24%; left: 7%;  color: var(--green-deep); animation: drift-a 17s ease-in-out infinite; }
.mark--dots { width: 5.5rem;  top: 66%; left: 11%; animation: drift-b 21s ease-in-out infinite; }
.mark--sun  { width: 2.5rem;  top: 17%; right: 9%; color: var(--sun-deep); animation: drift-a 23s ease-in-out infinite reverse; }

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(4px, -9px, 0) rotate(3deg); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-7px, 6px, 0); }
}

/* =========================================================
   Layer 3 — navigation
   ========================================================= */

.hero__nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.1rem, 2.6vw, 2rem) var(--gutter);
}

.wordmark {
  margin-right: auto;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow:
    0 0 16px rgba(246, 239, 225, 0.95),
    0 0 5px rgba(246, 239, 225, 0.9);
}

/* =========================================================
   Capsules — the whole interface layer, in one treatment.
   Glass so the painting keeps showing through them.
   ========================================================= */

.capsule {
  position: absolute;
  z-index: 7;

  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(252, 248, 240, 0.22);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 8px 26px rgba(28, 43, 58, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);

  color: var(--ink);
  font-family: var(--font-hand);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition:
    background var(--fade-ui) var(--ease-soft),
    border-color var(--fade-ui) var(--ease-soft),
    box-shadow var(--fade-ui) var(--ease-soft),
    transform 420ms var(--ease-out);
}

.capsule:hover,
.capsule:focus-visible {
  background: rgba(252, 248, 240, 0.34);
  border-color: rgba(255, 255, 255, 0.68);
  box-shadow:
    0 12px 30px rgba(28, 43, 58, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Where the blur is unavailable, lean on opacity instead so labels are
   never left unreadable on the artwork. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .capsule { background: rgba(250, 245, 235, 0.82); }
  .capsule:hover, .capsule:focus-visible { background: rgba(250, 245, 235, 0.9); }
}

/* --- Sound, bottom right ------------------------------- */

.sound {
  right: var(--gutter);
  bottom: var(--capsule-baseline);
}

.sound__note { font-size: 1.05em; transition: transform 500ms var(--ease-out); }
.sound.is-on .sound__note { transform: translateY(-1px) rotate(-8deg); color: var(--green-deep); }

.sound__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.75rem;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width 420ms var(--ease-out), opacity 420ms var(--ease-out);
}
.sound__bars i {
  width: 2px;
  height: 100%;
  background: var(--green-deep);
  transform-origin: bottom center;
  transform: scaleY(0.35);
  border-radius: 1px;
}
.sound.is-on .sound__bars { width: 0.85rem; opacity: 1; }
.sound.is-on .sound__bars i { animation: pulse 1400ms var(--ease-soft) infinite; }
.sound.is-on .sound__bars i:nth-child(2) { animation-delay: 220ms; }
.sound.is-on .sound__bars i:nth-child(3) { animation-delay: 440ms; }

@keyframes pulse {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}

.sound__label { letter-spacing: 0.01em; }

/* =========================================================
   Layer 4 — the hotspot over him
   Invisible by design: the artwork is the affordance.
   Its box is measured in video coordinates by hero.js.
   ========================================================= */

.hotspot {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  visibility: hidden;
}
.hero.is-placed .hotspot { visibility: visible; }

.hotspot__cue {
  position: absolute;
  left: 50%;
  bottom: -1.7rem;
  transform: translateX(-50%);
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--ink-faint);
  text-shadow: 0 0 12px rgba(246, 239, 225, 0.95), 0 0 4px rgba(246, 239, 225, 0.9);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 700ms var(--ease-soft);
  pointer-events: none;
}
@media (hover: none) {
  .is-ready .hotspot__cue { opacity: 1; }
}
.hotspot.has-played .hotspot__cue { opacity: 0 !important; }

/* =========================================================
   Layer 5 — the handwritten hello
   ========================================================= */

.annotation {
  position: absolute;   /* left / top are set by hero.js */
  margin: 0;
  width: min(18rem, 56vw);
  color: var(--ink);
  pointer-events: none;
  visibility: hidden;
}
.hero.is-placed .annotation { visibility: visible; }

.annotation__text {
  display: block;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.25;
  transform: rotate(-3.2deg);
  transform-origin: left center;
  /* a soft paper halo instead of a box — it reads as written on */
  text-shadow:
    0 0 18px rgba(246, 239, 225, 0.98),
    0 0 8px rgba(246, 239, 225, 0.95),
    0 0 3px rgba(246, 239, 225, 0.9);

  opacity: 0;
  translate: 0 10px;
  transition: opacity 1000ms var(--ease-out), translate 1000ms var(--ease-out);
}
.hero.is-alive .annotation__text {
  opacity: 1;
  translate: 0 0;
  transition-delay: 380ms;   /* he waves first, then the greeting lands */
}

.annotation__arrow {
  width: clamp(4.5rem, 7vw, 6.5rem);
  display: block;
  margin: 0.35rem auto 0 -0.25rem;   /* hugs its left edge, nearest to him */
  transform: scaleX(-1);             /* mirrored: the curve points down-left */
  color: var(--ink);
  opacity: 0.7;
}
.annotation__arrow path {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  /* Transitioned rather than animated, so it retracts as smoothly as
     it drew itself when the cursor leaves. */
  transition: stroke-dashoffset 620ms var(--ease-soft);
}
.hero.is-alive .annotation__arrow-line { stroke-dashoffset: 0; transition-delay: 620ms; }
.hero.is-alive .annotation__arrow-head { stroke-dashoffset: 0; transition-duration: 320ms; transition-delay: 1120ms; }


/* =========================================================
   The two portals — bottom left, side by side
   ========================================================= */

.portals {
  position: absolute;
  left: var(--gutter);
  bottom: var(--capsule-baseline);
  z-index: 7;
  display: flex;
  gap: 0.5rem;
}

/* .portal inherits every glass property from .capsule; it only needs
   its own position reset and its entrance. */
.portal {
  position: relative;
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 800ms var(--ease-out),
    translate 800ms var(--ease-out),
    background var(--fade-ui) var(--ease-soft),
    border-color var(--fade-ui) var(--ease-soft),
    box-shadow var(--fade-ui) var(--ease-soft);
}

.is-ready .portal { opacity: 1; translate: 0 0; }
.is-ready .portal:nth-child(1) { transition-delay: 850ms, 850ms, 0ms, 0ms, 0ms; }
.is-ready .portal:nth-child(2) { transition-delay: 980ms, 980ms, 0ms, 0ms, 0ms; }

.portal__arrow {
  width: 1.15rem;
  flex: none;
  opacity: 0.75;
  transition: transform 420ms var(--ease-out), opacity 420ms var(--ease-out);
}
.portal:hover .portal__arrow,
.portal:focus-visible .portal__arrow { transform: translateX(3px); opacity: 1; }

/* =========================================================
   Layer 6 — scroll cue
   ========================================================= */

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 2.5vh, 2rem);
  z-index: 6;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-hand);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--ink-soft);
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(246, 239, 225, 0.85);
  opacity: 0;
  transition: opacity 900ms var(--ease-out) 1700ms, color var(--fade-ui) var(--ease-soft);
}
.is-ready .scroll-cue { opacity: 0.85; }
.scroll-cue:hover { color: var(--ink); }
.hero.is-scrolled .scroll-cue { opacity: 0; transition-delay: 0ms; }

/* Nothing below the hero to scroll to — hero.js sets this */
.scroll-cue[hidden] { display: none; }

.scroll-cue::before {
  content: "";
  position: absolute;
  inset: -0.7rem -1.6rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 68% at 50% 50%, rgba(246, 239, 225, 0.92), rgba(246, 239, 225, 0) 74%);
}

.scroll-cue__arrow {
  display: inline-block;
  animation: cue 3.4s var(--ease-soft) infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0);   opacity: 0.7; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* =========================================================
   Responsive
   The hotspot and the handwriting are placed by hero.js from the
   video's own coordinates, so they follow the crop at every size.
   Only the things that are not welded to the artwork change here.
   ========================================================= */

@media (max-width: 1024px) {
  .annotation { width: min(15rem, 46vw); }
}

@media (max-width: 760px) {
  .annotation { width: min(15rem, 62vw); }
  .annotation__arrow {
    margin: 0.15rem 0 0 auto;
    margin-right: 0.75rem;
    width: 4rem;
    transform: scaleX(1) rotate(34deg);
  }

  .mark--leaf { top: 14%; left: 4%; }
  .mark--sun  { top: 12%; right: 5%; }
}

@media (max-width: 760px) {
  /* Three capsules have to share one line, so tighten them */
  .capsule { padding: 0.45rem 0.8rem; font-size: 0.95rem; gap: 0.35rem; }
  .portals { gap: 0.4rem; }
  .portal__arrow { width: 0.95rem; }
}

@media (max-width: 400px) {
  .wordmark { font-size: 0.95rem; }
  .sound__label { font-size: 0.95rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .scroll-cue { display: none; }
}

/* =========================================================
   Reduced motion — calm, but still complete
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.is-reduced .mark,
.is-reduced .scroll-cue__arrow,
.is-reduced .sound__bars i { animation: none !important; }

/* No parallax, and no push-in on top of the crossfade */
.is-reduced .hero__media,
.is-reduced .hero__anchors {
  transform: scale(var(--hero-push)) !important;
  transition: none !important;
}

/* The crossfade stays — it is the interaction — but it is brisk
   and never accompanied by movement. */
.is-reduced .hero__layer--alive { transition-duration: 320ms !important; }

.is-reduced .portal {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0ms;
}
.is-reduced .portal__arrow { transform: none !important; }

.is-reduced .annotation__text { translate: 0 0; transition-delay: 0ms; }
.is-reduced .hero.is-alive .annotation__arrow path,
.is-reduced .annotation__arrow path { transition-delay: 0ms; }
.is-reduced .scroll-cue { opacity: 0.85; transition: none; }
.is-reduced .mark { opacity: 0.26; transition: none; }