/* The title screen: a living sea behind the hero (canvases drawn by js/story/title-scene.js), the crew
   popping up from the seabed, a typing toy, and bouncy cartoon type. Tokens only: colours come from
   style.css and storybook.css. Every animation is decoration; reduced motion (html.reduced-motion, which
   main.js sets from the setting or the system) keeps every beat and drops the motion. */

.title-hero {
  position: relative;
  text-align: center;
  padding: clamp(72px, 8vw, 104px) 0 0; /* the sky above the waterline */
  --badge: 84px;
}

/* ---------- the sea: two full-bleed canvases (their size and offset are set by the scene) ---------- */
.title-water {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(var(--tw-top, transparent), var(--tw-bot, transparent));
  transition: opacity 0.7s ease;
}
.title-water.is-ready { opacity: 1; }
.title-raysbox { position: absolute; z-index: 0; overflow: clip; pointer-events: none; }
.title-rays {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
  visibility: hidden;
  animation: rays-sway 11s ease-in-out infinite alternate;
}
.title-rays.is-ready { visibility: visible; }
.title-strip {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.title-rays.is-1 { animation-duration: 15s; animation-direction: alternate-reverse; animation-delay: -4s; }
@keyframes rays-sway {
  0% { transform: translateX(-18px); opacity: 0.55; }
  50% { opacity: 1; }
  100% { transform: translateX(22px); opacity: 0.6; }
}
.title-sea, .title-toy {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.title-sea.is-ready, .title-toy.is-ready { opacity: 1; }
.title-sea { z-index: 0; }
.title-toy { z-index: 0; } /* above the sea, below the title, tagline and buttons */
.title-art, .title-name, .title-hero .lede, .title-cta-row, .title-more, .title-hint { position: relative; z-index: 1; }

/* the lane the Nautilus cruises through, and the keycaps that drift in it */
.title-art { width: 100%; height: clamp(138px, 16vw, 168px); margin: 0 auto 4px; }

.title-cap {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 14px;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  box-shadow: inset 0 -4px 0 var(--sb-card-2), var(--sb-pop);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: cap-drift 7.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.title-cap:nth-child(3n+1) { background: var(--sb-pink); color: var(--sb-outline); }
.title-cap:nth-child(3n+2) { background: color-mix(in srgb, var(--sb-sky) 45%, white); color: var(--sb-outline); }
.title-cap:hover { filter: brightness(1.06); }
.title-cap.is-squash { animation: cap-drift 7.5s ease-in-out infinite, cap-squash 0.5s var(--ease-spring); animation-delay: var(--d, 0s), 0s; }
/* drift and spin use the individual transform properties so the squash can use `scale` untouched */
@keyframes cap-drift {
  0%, 100% { translate: 0 0; rotate: var(--r, -6deg); }
  25% { translate: var(--dx, 8px) -9px; rotate: calc(var(--r, -6deg) * -0.4); }
  50% { translate: 0 -16px; rotate: calc(var(--r, -6deg) * -1); }
  75% { translate: calc(var(--dx, 8px) * -1) -7px; rotate: calc(var(--r, -6deg) * 0.4); }
}
@keyframes cap-squash {
  0% { scale: 1 1; }
  25% { scale: 1.22 0.68; }
  55% { scale: 0.86 1.18; }
  80% { scale: 1.06 0.96; }
  100% { scale: 1 1; }
}

/* ---------- the title: one span per letter ---------- */
.title-name {
  margin: 0 0 0.25em;
  font-size: clamp(2.8rem, 11.5vw, 6rem);
  line-height: 1.02;
  text-wrap: balance;
}
/* hidden (with its entrance paused) until Fredoka is in; one line on anything wider than a phone */
.title-name:not(.is-ready) { visibility: hidden; }
.title-name:not(.is-ready) .tl { animation-play-state: paused; }
@media (min-width: 700px) { .title-name:not(.is-fallback) { white-space: nowrap; } }
.tl-word { display: inline-block; white-space: nowrap; }
.title-name .tn-3 { color: var(--sb-pink); transform: rotate(-3deg); }
.tl {
  display: inline-block;
  transform-origin: 50% 85%;
  cursor: default;
  animation: tl-in 0.75s var(--ease-spring) both, tl-wave 7s ease-in-out infinite;
  animation-delay: calc(0.15s + var(--i) * 48ms), calc(3s + var(--i) * 75ms);
}
.tl:hover {
  animation: tl-in 0.75s var(--ease-spring) both, tl-wave 7s ease-in-out infinite, tl-hop 0.6s var(--ease-spring);
  animation-delay: calc(0.15s + var(--i) * 48ms), calc(3s + var(--i) * 75ms), 0s;
}
@keyframes tl-in {
  0% { opacity: 0; translate: 0 0.7em; scale: 0.4; rotate: -14deg; }
  60% { opacity: 1; translate: 0 -0.14em; scale: 1.1; rotate: 5deg; }
  100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
}
@keyframes tl-wave {
  0%, 20%, 100% { translate: 0 0; }
  5% { translate: 0 -0.17em; }
  11% { translate: 0 0.035em; }
}
@keyframes tl-hop {
  0% { rotate: 0deg; scale: 1; }
  20% { rotate: -9deg; scale: 1.18 0.86; }
  45% { rotate: 7deg; scale: 0.92 1.14; }
  70% { rotate: -3deg; scale: 1.05; }
  100% { rotate: 0deg; scale: 1; }
}

.title-hero .lede {
  font-size: 1.2rem;
  max-width: 34em;
  margin: 14px auto 1.3em;
  padding: 8px 20px;
  border-radius: 22px;
  color: var(--ink);
  font-weight: 600;
  background: color-mix(in srgb, var(--sb-card) 78%, transparent);
}
.title-cta-row, .title-more { justify-content: center; }
.title-cta { min-height: 68px; padding: 14px 40px; font-size: clamp(1.4rem, 5vw, 1.9rem); animation: cta-pulse 2.8s ease-in-out infinite; }
.title-cta .sb-icon { width: 1.1em; height: 1.1em; animation: cta-nudge 2.8s ease-in-out infinite; }
.title-cta::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 3px solid var(--sb-glow-color);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  animation: cta-ring 2.8s ease-out infinite;
}
.title-cta:hover { animation-play-state: paused; }
/* the pulse never moves the button's own box (automation and fingers both need a steady target) */
@keyframes cta-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.07); } }
@keyframes cta-nudge { 0%, 60%, 100% { translate: 0 0; } 75% { translate: 5px 0; } 90% { translate: -1px 0; } }
@keyframes cta-ring { 0%, 35% { opacity: 0; transform: scale(0.96); } 45% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.1, 1.28); } }
.title-more { margin-top: 18px; gap: 10px 14px; }

.title-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 5px 14px 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sb-card) 78%, transparent);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  animation: sb-bob 3.2s ease-in-out infinite;
}
.title-hint .sb-icon { color: var(--accent); }

/* ---------- the crew: rises from the seabed, in turn ---------- */
.title-crew {
  position: relative;
  z-index: 2;
  height: 178px;
  margin-top: 4px;
  overflow: hidden;
  /* the row's bottom edge runs through the sand: fade it, so the crew rise out of the sand, not from a line */
  mask-image: linear-gradient(#000 calc(100% - 12px), transparent);
  pointer-events: none;
  text-align: left;
  --crew-lift: -10px;
}
.tc-member {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 24px; /* the tail, and the badge's ring as it swells while speaking */
  max-width: calc(100% - 20px);
  translate: 0 110%;
  opacity: 0;
  transition: translate 0.55s var(--ease-spring), opacity 0.35s ease;
}
/* lifted a little so the badge (scaled up while speaking) stands in the sand, clear of the hero's edge */
.tc-member.is-up { translate: 0 var(--crew-lift); opacity: 1; }
.tc-member.is-left { left: 8px; flex-direction: row-reverse; }
.tc-member.is-right { right: 8px; flex-direction: row; }
.tc-member .comp-badge { --who-ink: var(--sb-outline); }
.tc-member .comp-badge.is-speaking { transform: scale(1.1); }

.tc-bubble {
  --who: var(--sb-sea);
  position: relative;
  width: max-content;
  max-width: min(250px, calc(100vw - 32px - var(--badge) - 40px));
  margin-bottom: 28px;
  padding: 20px 16px 11px;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 24px;
  box-shadow: var(--sb-pop);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.32;
  text-wrap: pretty;
  opacity: 0;
  scale: 0.5;
  transition: opacity 0.18s ease, scale 0.18s ease;
}
.tc-bubble.is-in { opacity: 1; scale: 1; transition: opacity 0.2s ease, scale 0.5s var(--ease-spring); }
[data-who="conseil"] .tc-bubble { --who: var(--sb-sea); transform-origin: 0 100%; }
[data-who="ned"] .tc-bubble { --who: var(--sb-orange); transform-origin: 100% 100%; }
[data-who="nemo"] .tc-bubble { --who: var(--sb-sun); transform-origin: 0 100%; }
.tc-who {
  position: absolute;
  top: -13px;
  left: 14px;
  padding: 1px 12px 2px;
  border: 2.5px solid var(--sb-outline);
  border-radius: 999px;
  background: var(--who);
  color: var(--sb-outline);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: nowrap;
}
.tc-text { display: block; }
/* the tail points at the speaker's badge */
.tc-bubble::after {
  content: '';
  position: absolute;
  bottom: 18px;
  width: 18px;
  height: 18px;
  background: var(--sb-card);
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-top: 0;
  border-right: 0;
}
.is-left .tc-bubble::after { left: -10px; transform: rotate(45deg); border-radius: 0 0 0 5px; }
.is-right .tc-bubble::after { right: -10px; transform: rotate(-135deg); border-radius: 0 0 0 5px; }
.is-right .tc-bubble::after { border: var(--sb-outline-w) solid var(--sb-outline); border-top: 0; border-right: 0; }

/* wide screens: the crew stands in the side margins of the full-bleed sea, bubble above badge */
@media (min-width: 1200px) {
  .title-hero { padding-bottom: 72px; }
  .title-crew {
    position: absolute;
    left: var(--bleed-left, 0);
    width: var(--bleed-w, 100%);
    bottom: 0;
    height: 300px;
    margin: 0;
  }
  .tc-member { flex-direction: column; align-items: center; gap: 0; width: 252px; }
  .tc-member.is-left { left: max(10px, calc(50% - 560px - 80px)); flex-direction: column; }
  .tc-member.is-right { right: max(10px, calc(50% - 560px - 80px)); flex-direction: column; }
  .title-crew { --crew-lift: -16px; }
  .tc-bubble { margin: 0 0 30px; max-width: 252px; }
  .tc-bubble::after, .is-left .tc-bubble::after, .is-right .tc-bubble::after {
    left: 50%;
    right: auto;
    bottom: -11px;
    margin-left: -9px;
    transform: rotate(-45deg);
    border: var(--sb-outline-w) solid var(--sb-outline);
    border-top: 0;
    border-left: 0;
    border-radius: 0 0 5px 0;
  }
}

/* the seabed runs on past the hero and fades into the page, so the sea has no hard bottom edge */
.title-shore {
  position: absolute;
  z-index: 0;
  top: 100%;
  left: var(--bleed-left, 0);
  width: var(--bleed-w, 100%);
  height: 120px;
  pointer-events: none;
  background: linear-gradient(var(--tw-shore, transparent), transparent);
}

/* ---------- the four worlds ---------- */
.title-worlds-head { text-align: center; margin: 44px 0 18px; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.title-worlds-head, .title-worlds { position: relative; z-index: 1; } /* above the shore */
.title-worlds { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 18px; }
.title-worlds .world-card {
  --tilt: -1.6deg;
  animation: card-in 0.6s var(--ease-spring) both;
  animation-delay: calc(0.5s + var(--i, 0) * 0.1s);
  transition: transform 0.28s var(--ease-spring), box-shadow 0.28s ease;
}
.title-worlds .world-card:nth-child(even) { --tilt: 1.6deg; }
.title-worlds .world-card:hover, .title-worlds .world-card:focus-visible {
  transform: translateY(-9px) rotate(var(--tilt)) scale(1.02);
  box-shadow: inset 0 8px 0 var(--wt), 0 9px 0 var(--sb-outline), 0 18px 26px rgb(20 33 61 / 0.22);
}
.title-worlds .world-card:active { transform: translateY(0) scale(0.99); }
.title-worlds .world-card:hover .emblem, .title-worlds .world-card:focus-visible .emblem {
  animation: emblem-wiggle 0.7s ease-in-out infinite;
}
/* subgrid: emblem, name, tagline and authors share rows across a grid row, so the author lines start level */
@supports (grid-template-rows: subgrid) {
  .title-worlds .world-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 4px; align-content: start; }
  .title-worlds .world-card > p { align-self: start; }
  .title-worlds .world-card > h3 { align-self: end; } /* a shorter name sits on its tagline, not above a gap */
}
@keyframes card-in { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 640px) {
  .title-cap { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 12px; }
  .title-hero .lede { font-size: 1.1rem; padding: 6px 14px; }
  .title-hero { --badge: 72px; }
  @supports (grid-template-rows: subgrid) { .title-worlds .world-card { grid-row: span 3; } } /* emblem sits beside the text */
  .title-crew { height: 170px; }
  .title-worlds-head { margin-top: 30px; }
}

/* ---------- reduced motion: a still, composed scene; the beats stay, the motion goes ---------- */
html.reduced-motion .tl,
html.reduced-motion .tl:hover,
html.reduced-motion .title-cap,
html.reduced-motion .title-cap.is-squash,
html.reduced-motion .title-cta,
html.reduced-motion .title-cta .sb-icon,
html.reduced-motion .title-cta::after,
html.reduced-motion .title-hint,
html.reduced-motion .title-worlds .world-card,
html.reduced-motion .title-worlds .world-card:hover .emblem { animation: none; }
html.reduced-motion .title-cta::after { display: none; }
html.reduced-motion .title-rays { animation: none; opacity: 0.8; }
html.reduced-motion .title-cap { rotate: var(--r, -6deg); }
html.reduced-motion .tc-member,
html.reduced-motion .tc-member.is-up { translate: 0 var(--crew-lift); opacity: 0; transition: opacity 0.3s ease; }
html.reduced-motion .tc-member.is-up { opacity: 1; }
html.reduced-motion .tc-bubble { scale: 1; transition: opacity 0.3s ease; }
html.reduced-motion .tc-bubble.is-in { transition: opacity 0.3s ease; }
html.reduced-motion .title-strip, html.reduced-motion .title-water, html.reduced-motion .title-sea, html.reduced-motion .title-toy { transition: none; }
html.reduced-motion .title-worlds .world-card:hover,
html.reduced-motion .title-worlds .world-card:focus-visible { transform: none; }