/* My Future America · Welcome splash */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2'),
       url('../fonts/poppins-latin-700-normal.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2'),
       url('../fonts/poppins-latin-600-normal.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-800-normal.woff2') format('woff2'),
       url('../fonts/poppins-latin-800-normal.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-900-normal.woff2') format('woff2'),
       url('../fonts/poppins-latin-900-normal.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Garnett';
  src: url('../fonts/Garnett-Semibold.woff2') format('woff2'),
       url('../fonts/Garnett-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Garnett';
  src: url('../fonts/Garnett-Black.woff2') format('woff2'),
       url('../fonts/Garnett-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Garnett';
  src: url('../fonts/Garnett-Bold.woff2') format('woff2'),
       url('../fonts/Garnett-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --gold: #ffd448;
  --purple: #4e027c;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--gold);
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The reel is drawn on a fixed 2400 × 1800 stage, scaled to fit the window. */
#stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 2400px;
  height: 1800px;
  transform-origin: 50% 50%;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  user-select: none;
}
.is-ready #stage { opacity: 1; }

#stage div,
#stage img {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
#stage img {
  object-fit: cover;
  display: block;
}
#stage .t {
  white-space: pre;
  font-kerning: normal;
}

/* Screen-reader copy of the reel's words */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Play / pause / replay */
.playback {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px 10px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font: 600 15px/1 'Poppins', system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease, transform .15s ease;
  z-index: 2;
}
.is-ready .playback { opacity: .92; }
/* The "grade" reel has a label in the bottom-right corner, so its button sits bottom-left */
[data-reel="grade"] .playback { right: auto; left: max(16px, env(safe-area-inset-left)); }
/* Case study copy (November 4): the page shows its own play / pause / replay button next to the message pills,
   driven by MFASplash.toggle() and the state messages from setButton(), so this one stays hidden */
.playback { display: none !important; }
.playback:hover { opacity: 1; transform: translateY(-1px); }
.playback:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  opacity: 1;
}
.playback .icon { width: 20px; height: 20px; flex: none; }
.playback .icon path { fill: currentColor; }
.playback .i-play, .playback .i-replay { display: none; }
.playback[data-state="play"] .i-pause,
.playback[data-state="replay"] .i-pause { display: none; }
.playback[data-state="play"] .i-play { display: block; }
.playback[data-state="replay"] .i-replay { display: block; }

/* ---------- Call to action: "Find your future" ----------
   Matches Scene 5 of the Figma alt ending (node 3433:13199). Sizes use --u, one Figma pixel of the
   2400 × 1800 frame scaled to the window, with floors so the small copy stays readable on phones.
   Timing is relative to the cut at 7.64s in the Figma timeline. */
.cta {
  --u: min(calc(100vw / 2400), calc(100vh / 1800));
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px max(80px, env(safe-area-inset-bottom));
  background: var(--gold);
  color: var(--purple);
  text-align: center;
  z-index: 1;
  opacity: 0;
}
.cta[hidden] { display: none; }
.cta-in .cta { opacity: 1; }
.cta-in #stage { opacity: 0; transition: none; }

.cta__logo {                                  /* Figma: Garnett Bold 138, top 150 */
  margin: 0 0 max(32px, calc(176 * var(--u)));
  font: 700 max(36px, calc(138 * var(--u)))/1.4 'Garnett', 'Poppins', sans-serif;
}
.cta__title {                                 /* Figma: Garnett Black 400, 84% line height, -4% tracking */
  position: relative;
  margin: 0;
  font: 900 calc(400 * var(--u))/.84 'Garnett', 'Poppins', sans-serif;
  font-size: max(48px, min(calc(400 * var(--u)), calc((100vw - 32px) / 5.65)));
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.cta__words { display: flex; flex-direction: column; align-items: center; }
.cta__sticker {                               /* Figma: Garnett Black 120, 894 × 211, radius 34, 8px stroke, 12px hard shadow, rotated 4° */
  position: absolute;
  z-index: 1;
  left: calc(50% - 1.038em);
  top: .11em;
  translate: -50% -50%;
  rotate: 4deg;
  padding: .017em .3em .083em;
  border: max(2px, .067em) solid var(--purple);
  border-radius: .283em;
  background: #f28be0;
  box-shadow: 0 .1em 0 var(--purple);
  font-size: .3em;
  line-height: 1.39;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* The sticker is also a link (same place as Get started): hover lifts it onto a deeper shadow */
a.cta__sticker {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
a.cta__sticker:hover { transform: translateY(-.08em); box-shadow: 0 .18em 0 var(--purple); }
a.cta__sticker:active { transform: translateY(.04em); box-shadow: 0 .04em 0 var(--purple); transition-duration: .08s; }
.cta__sub {                                   /* Figma: Garnett Semibold 60, 130% line height */
  margin: max(20px, calc(70 * var(--u))) 0 0;
  max-width: 40ch;
  font: 600 max(17px, calc(60 * var(--u)))/1.3 'Garnett', 'Poppins', sans-serif;
}
.cta__button {                                /* Figma: Garnett Semibold 58, padding 34 / 72 / 36 */
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 48px;
  margin-top: max(24px, calc(80 * var(--u)));
  padding: .586em 1.241em .62em;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font: 600 max(18px, calc(58 * var(--u)))/1.4 'Garnett', 'Poppins', sans-serif;
  text-decoration: none;
  box-shadow: 0 0 0 #2a0045;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
/* Hover: the button grows and lifts onto a hard purple shadow, and the arrow nudges forward.
   (transform, not scale: the entrance animation holds the scale property.) */
.cta__button > span { display: inline-block; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.cta__button:hover,
.cta__button:focus-visible { transform: translateY(-.12em) scale(1.08); box-shadow: 0 .16em 0 #2a0045; }
.cta__button:hover > span,
.cta__button:focus-visible > span { transform: translateX(.3em); }
.cta__button:active { transform: translateY(0) scale(.97); box-shadow: 0 0 0 #2a0045; transition-duration: .08s; }
.cta__button:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 4px;
}
@media (max-width: 599px) { .cta__br { display: none; } }

/* Entrance, keyframed from the Figma alt ending */
.cta-in .cta__logo  { animation: cta-scale-in .35s cubic-bezier(0,0,.58,1) both; }
.cta-in .cta__words { animation: cta-fade .2s cubic-bezier(0,0,.58,1) both, cta-zoom .4s cubic-bezier(0,0,.58,1) both; }
.cta-in .cta__sticker {
  animation: cta-show .01s linear .42s both,
             cta-sticker-scale .33s cubic-bezier(.45,1.45,.8,1) .42s both,
             cta-sticker-rotate .33s cubic-bezier(0,0,.58,1) .42s both,
             cta-sticker-wiggle 5s ease-in-out 2s infinite;   /* a little shake every 5 seconds, first one at 2s */
}
.cta-in .cta__sub    { animation: cta-rise .3s cubic-bezier(0,0,.58,1) .65s both; }
.cta-in .cta__button { animation: cta-show .01s linear .9s both, cta-button 1.56s .9s both; }
/* The arrow keeps nudging right and back (uses translate, so the hover nudge still adds on top) */
.cta-in .cta__button > span { animation: cta-arrow 1.4s ease-in-out 1.6s infinite; }

@keyframes cta-show     { from { opacity: 0; } to { opacity: 1; } }
@keyframes cta-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes cta-scale-in { from { scale: .6; } to { scale: 1; } }
@keyframes cta-zoom     { from { scale: 1.25; } to { scale: 1; } }
@keyframes cta-sticker-scale  { from { scale: .2; } to { scale: 1; } }
@keyframes cta-sticker-rotate { from { rotate: 18deg; } to { rotate: 4deg; } }
@keyframes cta-arrow {
  0%, 55%, 100% { translate: 0 0; }
  25%           { translate: .3em 0; }
}
/* START HERE: a quick wiggle and bump, then it rests at its 4° tilt until the next one */
@keyframes cta-sticker-wiggle {
  0%   { rotate: 4deg;  scale: 1; }
  3%   { rotate: -4deg; scale: 1.08; }
  6%   { rotate: 11deg; scale: 1.08; }
  9%   { rotate: -2deg; scale: 1.06; }
  12%  { rotate: 8deg;  scale: 1.03; }
  15%  { rotate: 2deg;  scale: 1; }
  18%  { rotate: 5deg; }
  21%, 100% { rotate: 4deg; scale: 1; }
}
@keyframes cta-rise {
  from { opacity: 0; transform: translateY(calc(30 * var(--u))); }
  to   { opacity: 1; transform: none; }
}
@keyframes cta-button {                       /* pop in, rest, then one gentle pulse */
  0%     { scale: .6;   animation-timing-function: cubic-bezier(.45,1.45,.8,1); }
  19.23% { scale: 1;    animation-timing-function: linear; }
  67.95% { scale: 1;    animation-timing-function: cubic-bezier(.42,0,.58,1); }
  83.97% { scale: 1.06; animation-timing-function: cubic-bezier(.42,0,.58,1); }
  100%   { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-in .cta__logo, .cta-in .cta__words, .cta-in .cta__sticker, .cta-in .cta__sub, .cta-in .cta__button { animation: none; }
  .cta__button, .cta__button > span { transition: box-shadow .2s ease; }
  .cta__button:hover, .cta__button:focus-visible, .cta__button:active { transform: none; }
  .cta__button:hover > span, .cta__button:focus-visible > span { transform: none; }
  .cta-in .cta__button > span { animation: none; }
}