/* Old Navy × Spider-Man "Fit Check" — mockup styles.
 * Co-brand system: Old Navy navy + classic Spider-Man red/blue, self-hosted
 * Lilita One display + Manrope body (both SIL OFL). Built for flat-mock
 * screenshots; reuses ACTV8me's chunky-sticker card component patterns.
 * Visuals conceptual — confirm the final brand kit before any build. */

@font-face {
  font-family: "Lilita One";
  src: url("../assets/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/Manrope-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* Old Navy brand */
  --on-navy: #003763;      /* Old Navy signature navy — page base */
  --navy-dk: #001a30;      /* deep navy — gradient end, borders, shadow */
  /* Spider-Man */
  --spidey-red: #e31c23;   /* primary accent / CTAs / poll winner */
  --spidey-red-dk: #b30f16;
  --spidey-blue: #0a4aa0;  /* secondary accent */
  --spidey-sky: #2f7fdc;

  --paper: #ffffff;
  --ink: #14213a;          /* near-navy body text */
  --muted: #5d6c7b;
  --tile: #f2efe7;         /* warm neutral tile — matches product photo bgs */

  --radius: 14px;
  --shadow-hard: 5px 5px 0 var(--navy-dk);
  --shadow-soft: 0 8px 24px rgba(0, 26, 48, 0.18);
  --ease-pop: cubic-bezier(0.2, 0.9, 0.3, 1.3);

  --font-head: "Lilita One", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--navy-dk); }

body {
  background: var(--on-navy);
  background: linear-gradient(180deg, #0a5083 0%, var(--on-navy) 42%, var(--navy-dk) 100%);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  position: relative; overflow-x: clip;
}
/* Contain the oversized web (350vw) so it never adds horizontal scroll or shifts
   the layout — clip (not hidden) avoids creating a scroll container. */
html { overflow-x: clip; }
/* Web is thrown out toward the viewer — starts large (near POV), then recedes
   and lands at its resting size, mirroring the Spider-Man logo's entrance. */
@keyframes web-expand {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(2.2); }
  55%  { opacity: .2; }
  84%  { transform: translate(-50%, -50%) scale(.98); }               /* slight settle past 1 */
  100% { opacity: .17; transform: translate(-50%, -50%) scale(1); }
}
.page, .hero-banner { position: relative; z-index: 1; }

body.modal-open { overflow: hidden; }
body.modal-open .back-fab { z-index: 40; pointer-events: none; }
img { max-width: 100%; display: block; }

/* --- co-brand hero ---------------------------------------------------- */
.hero-banner {
  position: relative; width: 100%;
  background: transparent;
  aspect-ratio: 40 / 33;
  display: grid; place-items: center; text-align: center;
  color: #fff;
}
.hero-inner { position: relative; z-index: 1; padding: 1.4rem 1rem 1.5rem; width: 100%; }
.cobrand {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .75rem; margin-bottom: .9rem;
}
.cobrand-logo { display: block; width: auto; }
/* Old Navy wordmark ships navy — invert to white for the dark hero. */
.cobrand-on { height: 17px; filter: brightness(0) invert(1); }
.cobrand-marvel { height: 26px; }
.cobrand-x { font-family: var(--font-body); font-weight: 800; opacity: .8; font-size: .95rem; color: #fff; }
.hero-title {
  font-family: var(--font-head); font-weight: 400; line-height: .92;
  margin: 0; color: #fff;
  font-size: clamp(2.6rem, 13vw, 3.4rem);
  text-shadow: 0 3px 0 var(--spidey-red-dk), 0 5px 14px rgba(0,0,0,.35);
}
/* Logo sits centered on the web: the web bursts from .logo-wrap's center. */
.logo-wrap { position: relative; display: block; width: min(78%, 320px); margin: 0 auto .1rem; }
.logo-wrap::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 350vw; height: 350vw; transform: translate(-50%, -50%); pointer-events: none;
  background: url("../assets/img/web-full.svg") center / contain no-repeat; opacity: .17;
  animation: web-expand .45s cubic-bezier(.2, .8, .3, 1) both;
}
.spidey-wordmark { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.hero-tag { margin: .7rem auto 0; max-width: 20rem; font-weight: 600; font-size: 1rem; color: #dbe7f2; }

/* --- page ------------------------------------------------------------- */
.page {
  width: 100%; max-width: 480px; margin: 0 auto; padding: 1.25rem 1.25rem 2rem;
  display: flex; flex-direction: column; flex: 1 0 auto;
}
/* Pull sub-screen content up so the H1 sits on the back button's line
   (the back FAB is fixed at top:1rem; the centered title clears it on the left). */
body.nav-mode .page { padding-top: 1.25rem; }
body.nav-mode .hero-banner { display: none; }

/* --- floating back button --------------------------------------------- */
.back-fab {
  position: fixed; z-index: 65; top: 1rem; left: .9rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 3px solid var(--navy-dk); background: var(--paper); color: var(--navy-dk);
  font-family: var(--font-head); font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-hard); transition: transform .12s var(--ease-pop);
}
.back-fab:active { transform: scale(.92); }
.back-fab[hidden] { display: none; }

/* --- landing CTAs ----------------------------------------------------- */
.actions { display: flex; flex-direction: column; gap: .8rem; margin-top: .25rem; }
.actions .cta { animation: rise-in .4s var(--ease-pop) both; }
.actions .cta:nth-child(1) { animation-delay: .06s; }
.actions .cta:nth-child(2) { animation-delay: .14s; }

.cta {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; text-align: left; text-decoration: none;
  padding: .85rem 1.1rem; border: 3px solid var(--navy-dk);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-hard); cursor: pointer; font-family: var(--font-head);
  transition: transform .12s var(--ease-pop), box-shadow .12s ease;
}
.cta:active { transform: translate(3px, 3px) scale(.985); box-shadow: 3px 3px 0 var(--navy-dk); }
.cta-icon {
  position: relative;
  flex: 0 0 auto; width: 2.7rem; height: 2.7rem; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--spidey-red); color: #fff; border: 3px solid var(--navy-dk);
}
.cta-icon svg { width: 1.5rem; height: 1.5rem; display: block; }
.cta-text { display: flex; flex-direction: column; line-height: 1.15; }
.cta-title { font-size: 1.3rem; font-weight: 400; letter-spacing: .01em; color: var(--navy-dk); }
.cta-sub { font-family: var(--font-body); font-size: .85rem; color: var(--muted); font-weight: 600; }

/* Primary = red filled (Fit Check). Secondary = white card (Shop). */
.cta-primary { background: var(--spidey-red); border-color: var(--navy-dk); }
.cta-primary .cta-title, .cta-primary .cta-sub { color: #fff; }
.cta-primary .cta-sub { opacity: .9; }
.cta-primary .cta-icon { background: #fff; color: var(--navy-dk); }

/* --- screens ---------------------------------------------------------- */
.screen[hidden] { display: none; }
.screen { animation: screen-in .28s var(--ease-pop) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.screen-title {
  font-family: var(--font-head); font-weight: 400; color: #fff;
  font-size: clamp(1.6rem, 6.5vw, 2.1rem); text-align: center;
  margin: .1rem 0 .35rem; padding-inline: 1.75rem; text-shadow: 0 2px 0 var(--navy-dk);
}
.screen-sub { text-align: center; color: #cfe0ee; margin: 0 auto 1.4rem; max-width: 22rem; font-weight: 600; font-size: .98rem; }
.screen-sub .accent { color: #fff; display: block; }

/* --- product / fit grid (2-up cards) ---------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.product-card {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  background: var(--paper); border: 3px solid var(--navy-dk);
  border-radius: var(--radius); box-shadow: var(--shadow-hard);
  padding: .7rem; cursor: pointer; gap: .55rem;
  transition: transform .12s var(--ease-pop);
  animation: rise-in .42s var(--ease-pop) both;
  animation-delay: calc(var(--i, 0) * 55ms);
  position: relative;
}
.product-card:active, .product-card.is-pressed { transform: scale(.97); }
.product-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center;
  border-radius: 10px; background: var(--tile);
}
.product-meta { display: flex; flex-direction: column; gap: .1rem; }
.product-name {
  font-family: var(--font-body); font-weight: 800; font-size: .9rem;
  line-height: 1.2; color: var(--ink);
}
.product-price { font-family: var(--font-body); font-weight: 800; font-size: .9rem; color: var(--spidey-red); }

/* --- Fit Check voting grid -------------------------------------------- */
.fit-grid .product-card { padding-bottom: .7rem; }
.fit-badge {
  position: absolute; top: .55rem; left: .55rem; z-index: 2;
  font-family: var(--font-head); font-size: .8rem; line-height: 1;
  color: #fff; background: var(--navy-dk); border-radius: 999px;
  padding: .28rem .55rem; letter-spacing: .02em;
}
.vote-btn {
  margin-top: .1rem; width: 100%; border: 2.5px solid var(--navy-dk);
  background: var(--spidey-red); color: #fff; cursor: pointer;
  font-family: var(--font-head); font-size: .95rem; letter-spacing: .03em;
  border-radius: 10px; padding: .5rem; box-shadow: 3px 3px 0 var(--navy-dk);
  transition: transform .12s var(--ease-pop);
}
.vote-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--navy-dk); }
.fit-hint { text-align: center; color: #cfe0ee; font-weight: 600; font-size: .9rem; margin: 1.1rem 0 0; }

/* --- Poll results ----------------------------------------------------- */
.poll { display: flex; flex-direction: column; gap: .95rem; margin-top: .3rem; }
.poll-you {
  text-align: center; color: #fff; font-family: var(--font-body); font-weight: 800;
  margin: .9rem auto 1.7rem; max-width: 27rem;
  font-size: .98rem; line-height: 1.5;
}
.poll-you strong { color: #ffd0d2; }
.poll-row {
  position: relative;
  background: var(--paper); border: 3px solid var(--navy-dk); border-radius: var(--radius);
  box-shadow: var(--shadow-hard); padding: .7rem .8rem;
  display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .75rem;
  animation: rise-in .42s var(--ease-pop) both; animation-delay: calc(var(--i,0) * 90ms);
}
.poll-thumb { width: 3rem; height: 3rem; border-radius: 8px; object-fit: cover; object-position: top center; background: var(--tile); border: 2px solid var(--navy-dk); }
.poll-mid { min-width: 0; }
.poll-name { font-family: var(--font-body); font-weight: 800; font-size: .82rem; line-height: 1.15; color: var(--ink); margin: 0 0 .35rem; }
.poll-track { height: 12px; border-radius: 999px; background: #e7ebf0; overflow: hidden; }
.poll-fill { height: 100%; border-radius: 999px; background: var(--spidey-blue); width: 0; transition: width .9s var(--ease-pop); }
.poll-pct { font-family: var(--font-head); font-size: 1.15rem; color: var(--navy-dk); min-width: 2.6rem; text-align: right; }
.poll-row.is-winner { border-color: var(--spidey-red); }
.poll-row.is-winner .poll-fill { background: var(--spidey-red); }
.poll-row.is-winner .poll-pct { color: var(--spidey-red); }
.poll-row.is-winner .poll-thumb { border-color: var(--spidey-red); }
.poll-crown {
  position: absolute; top: -.7rem; right: .7rem; z-index: 2;
  font-size: .72rem; font-family: var(--font-head);
  color: #fff; background: var(--spidey-red); border: 2px solid var(--paper);
  border-radius: 999px; padding: .1rem .55rem; letter-spacing: .04em;
}
/* The fit the user voted for — blue, mirroring the winner's red treatment.
   Both badges can show at once when your pick is also the winner. */
.poll-row.is-yours:not(.is-winner) { border-color: var(--spidey-blue); }
.poll-row.is-yours:not(.is-winner) .poll-thumb { border-color: var(--spidey-blue); }
.poll-you-badge {
  position: absolute; top: -.7rem; left: .7rem; z-index: 2;
  font-size: .72rem; font-family: var(--font-head);
  color: #fff; background: var(--spidey-blue); border: 2px solid var(--paper);
  border-radius: 999px; padding: .1rem .55rem; letter-spacing: .04em;
}
.poll-cta { margin-top: 1.5rem; }

/* --- sticky bottom CTA ------------------------------------------------ */
.sticky-cta { position: sticky; bottom: 0; z-index: 1; margin: 1.4rem -1.25rem -2rem; padding: 1rem 1.25rem 1.3rem; }
.sticky-cta .cta { justify-content: center; }

/* --- modal / cart ----------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.25rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 14, 28, .6); }
.modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 360px;
  background: var(--paper); border: 3px solid var(--navy-dk);
  border-radius: var(--radius); box-shadow: var(--shadow-hard);
  padding: 1.5rem 1.25rem; text-align: center;
}
.modal-close {
  position: absolute; top: .5rem; right: .6rem; z-index: 2;
  width: 2rem; height: 2rem; border-radius: 50%; border: none;
  background: #e6ebf1; color: var(--ink); font-size: 1.3rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.modal-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 400; margin: 0 0 .2rem; color: var(--navy-dk); }

/* Bigger packshot now that size/color are gone — straight through to Old Navy. */
.cart-img {
  display: block; object-fit: cover; object-position: top center;
  width: 100%; max-width: 16rem; aspect-ratio: 4 / 5;
  margin: 0 auto 1rem; background: var(--tile);
  border: 3px solid var(--navy-dk); border-radius: var(--radius);
}
.cart-title { margin-bottom: .2rem; }

.cart-actions { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.2rem; }
.onnav-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; min-height: 3.3rem; padding: .7rem 1rem; cursor: pointer;
  border: 3px solid var(--navy-dk); border-radius: var(--radius);
  background: var(--on-navy); color: #fff; box-shadow: var(--shadow-hard);
  transition: transform .12s var(--ease-pop);
}
.onnav-btn:active { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--navy-dk); }
.onnav-word { font-family: var(--font-head); letter-spacing: .06em; font-size: 1.05rem; }
.onnav-cart-ico { width: 1.3rem; height: 1.3rem; }
/* Old Navy wordmark on the navy button — invert to white. */
.onnav-logo { height: 15px; width: auto; filter: brightness(0) invert(1); }
.wallet-btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; line-height: 0; }
.wallet-badge { display: block; height: 3rem; width: auto; margin: 0 auto; }
.wallet-reminder { margin: .25rem 0 -.3rem; text-align: center; color: var(--ink); font-weight: 700; font-size: .8rem; line-height: 1.3; }
.wallet-note { margin: .35rem 0 0; text-align: center; color: var(--muted); font-size: .72rem; }

/* --- Old Navy wordmark (recreated) ------------------------------------ */
.on-word {
  font-family: var(--font-body); font-weight: 800; letter-spacing: .04em;
  color: #fff; line-height: 1; white-space: nowrap;
}
.on-word .on-navy-txt { color: #fff; }

/* --- toast ------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--navy-dk); color: #fff; padding: .75rem 1.25rem; border-radius: 999px;
  font-weight: 700; box-shadow: var(--shadow-soft); z-index: 60; max-width: 90vw;
}
.toast[hidden] { display: none; }

/* --- footer ----------------------------------------------------------- */
.site-footer { margin-top: auto; padding-top: 1.5rem; text-align: center; }
.legal { color: #fff; opacity: .72; font-size: .72rem; line-height: 1.4; margin: 0; }

/* --- entrance: web bursts (0s) → logo zooms in from camera (~.4s) →
       co-brand, FIT CHECK, tagline and CTAs cascade in afterward --- */
.hero-inner > * { animation: pop-in .5s cubic-bezier(.2, 1.25, .35, 1) both; }
.hero-title { animation: none; }               /* its children animate on their own */
.spidey-wordmark { animation: logo-zoom .5s cubic-bezier(.2, 1, .3, 1) .32s both; }
.fit-line   { display: block; animation: pop-in .5s cubic-bezier(.2, 1.25, .35, 1) .82s both; }
.cobrand    { animation-delay: .74s; }
.hero-tag   { animation-delay: .96s; }
.screen-landing .actions .cta:nth-child(1) { animation: shoot-in-left  .5s cubic-bezier(.2, 1.25, .35, 1) 1.04s both; }
.screen-landing .actions .cta:nth-child(2) { animation: shoot-in-right .5s cubic-bezier(.2, 1.25, .35, 1) 1.12s both; }
@keyframes pop-in         { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes shoot-in-left  { 0% { opacity: 0; transform: translateX(-46px) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes shoot-in-right { 0% { opacity: 0; transform: translateX(46px) scale(.97); } 100% { opacity: 1; transform: none; } }
/* Logo flies in from the "camera": huge → snaps to place over the web center. */
@keyframes logo-zoom {
  0%   { opacity: 0; transform: scale(3.6); }
  55%  { opacity: 1; }
  84%  { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}

/* Spidey-face icon on the Spidey Shop CTA (white mask, fills the red circle). */
/* Spidey-face icon as a currentColor mask so it inverts like the shirt SVG:
   red on the primary (white circle), white on the secondary (red circle). */
.cta-face {
  position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("../assets/img/spidey-face.png") center / 112% no-repeat;
          mask: url("../assets/img/spidey-face.png") center / 112% no-repeat;
}

@media (min-width: 481px) {
  .hero-banner { border-radius: 0 0 var(--radius) var(--radius); max-width: 480px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}