/* ============================================================
   VIBE FOR GOOD — AI Hackathon 2026
   Aesthetic: Y2K retro-computing × comic-boom energy
   Paper white · electric blue · black ink outlines
   ============================================================ */

:root {
  --paper:   #efece3;
  --paper-2: #e7e3d7;
  --ink:     #14131a;
  --blue:    #2323f0;
  --blue-d:  #1414c4;
  --blue-l:  #6a6aff;
  --white:   #fbfaf6;
  --shadow:  0 6px 0 var(--ink);

  --f-display: "Rubik Mono One", monospace;
  --f-title:   "Russo One", "Rubik Mono One", sans-serif; /* hero title */
  --f-pixel:   "Silkscreen", monospace;
  --f-mono:    "Space Mono", monospace;
  --f-sans:    "Space Grotesk", sans-serif;

  --edge: 3px;
  --maxw: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue); color: var(--white); }

a { color: inherit; text-decoration: none; }

/* ---------- accessibility ---------- */
/* anchor jumps clear the fixed nav */
#about, #prize, #timeline, #details, #register { scroll-margin-top: 100px; }

/* consistent keyboard focus, matching the hover language */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px;
}
.btn--primary:focus-visible, .nav__cta:focus-visible, .stickybar__btn:focus-visible {
  outline-color: var(--ink);
}

/* skip link: hidden until focused */
.skip {
  position: fixed; top: 10px; left: 10px; z-index: 10001;
  background: var(--blue); color: var(--white);
  font-family: var(--f-mono); font-weight: 700; font-size: 15px;
  padding: 12px 18px; border: 2px solid var(--ink);
  transform: translateY(-200%); transition: transform .2s;
}
.skip:focus { transform: none; }
strong { color: var(--blue-d); }
em { font-style: normal; color: var(--blue); font-weight: 700; }

/* ---------- grain overlay ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px clamp(20px, 5vw, 64px);
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.scrolled {
  background: rgba(239,236,227,.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 var(--edge) 0 var(--ink);
}
.nav__brand {
  font-family: var(--f-pixel); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: 1px; display: flex; align-items: center; gap: 12px;
}
.nav__slash { color: var(--blue); }
.nav__dot {
  width: 15px; height: 15px; background: var(--blue);
  border: 2px solid var(--ink); border-radius: 50%;
  animation: blink 1.4s steps(1) infinite;
}
@keyframes blink { 0%,60%{opacity:1} 61%,100%{opacity:.25} }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.nav__links a { font-family: var(--f-mono); font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; position: relative; }
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px;
  background: var(--blue); transition: width .25s;
}
.nav__links a:not(.nav__cta):hover::after { width: 100%; }
.nav__cta {
  background: var(--blue); color: var(--white) !important;
  border: 2px solid var(--ink); padding: 12px 22px;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s;
  white-space: nowrap;
}
.nav__cta:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.nav__cta:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; padding: 120px 20px 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(35,35,240,.10), transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(20,19,26,.045) 39px),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(20,19,26,.045) 39px);
}

.hero__center { position: relative; z-index: 5; max-width: 900px; }

.hero__kicker {
  font-family: var(--f-pixel); font-size: clamp(16px, 1.6vw, 22px); letter-spacing: 4px;
  color: var(--blue); margin-bottom: 22px;
}

.hero__title {
  font-family: var(--f-title);
  font-size: clamp(58px, 15vw, 200px);
  line-height: .9; letter-spacing: 0; color: var(--blue);
  text-shadow: var(--edge) var(--edge) 0 var(--ink);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .2em .34em;
}
.hero__title span { display: inline-block; }
.hero__title-g { position: relative; }

/* slightly larger than Russo One's lowercase "o" (0.55em) so the face reads clearly */
.smiley { display: inline-flex; width: .62em; height: .62em; vertical-align: -.035em; }
.smiley svg {
  width: 100%; height: 100%; animation: bob 3.2s ease-in-out infinite;
  /* hard offset only, matching the title text-shadow */
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.sm-face  { fill: var(--blue); stroke: none; }
.sm-eye   { fill: var(--white); }
.sm-mouth { fill: none; stroke: var(--white); stroke-width: 7; stroke-linecap: round; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-6px) rotate(3deg)} }

.hero__tag {
  font-size: clamp(17px, 2.3vw, 24px); max-width: 640px; margin: 26px auto 0;
  color: var(--ink); font-weight: 500;
}
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* buttons */
.btn {
  font-family: var(--f-mono); font-weight: 700; font-size: 16px;
  padding: 14px 26px; border: 2px solid var(--ink);
  display: inline-block; transition: transform .12s, box-shadow .12s;
  box-shadow: 4px 4px 0 var(--ink); cursor: pointer;
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--ghost   { background: var(--white); color: var(--ink); }
.btn:hover  { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,2px);  box-shadow: 1px 1px 0 var(--ink); }
.btn--big { font-size: 19px; padding: 18px 36px; }

/* speech bubbles — anchored to the four corners of the duck card (.crt-wrap) */
.boom {
  position: absolute; z-index: 4; width: clamp(180px, 17vw, 240px);
  font-family: var(--f-sans); font-weight: 600; line-height: 1.3;
  transform: rotate(var(--rot, -3deg));
}
.boom__inner {
  position: relative;
  background: var(--white); border: 2.5px solid var(--ink);
  border-radius: 22px;
  padding: 18px 22px; font-size: clamp(14px, 1.35vw, 17px);
  box-shadow: 4px 5px 0 rgba(20,19,26,.14);
  transition: opacity .28s ease;
  text-wrap: balance;
}
/* reserve height so rotating between short/long messages doesn't jump */
.boom__inner[data-rotate] {
  min-height: 4.4em;
  display: flex; flex-direction: column; justify-content: center;
}
/* speech-bubble tail: a small triangle with matching ink outline */
.boom__inner::before,
.boom__inner::after {
  content: ""; position: absolute; width: 0; height: 0;
  border-style: solid;
}
/* four corners of the duck artwork — %-offsets track the visible silhouette
   inside the square image (monitor / tower / keyboard / mouse) at any size */
.boom--1 { right: 70%; top: -4%;    --rot: -4deg; } /* upper-left, by the monitor  */
.boom--2 { left:  62%; top: -6%;    --rot: 4deg;  } /* upper-right, by the tower   */
.boom--3 { left:  70%; bottom: -2%; --rot: 3deg;  } /* lower-right, by the keyboard */
.boom--4 { right: 74%; bottom: -4%; --rot: -3deg; } /* lower-left, by the mouse    */

/* --- tails: every tail aims at the duck in the centre --- */
/* bubble 1 (upper-left): tail at bottom-right, apex down-right */
.boom--1 .boom__inner::before {
  right: 34px; bottom: -17px;
  border-width: 17px 0 0 15px; border-color: var(--ink) transparent transparent transparent;
}
.boom--1 .boom__inner::after {
  right: 38px; bottom: -11px;
  border-width: 12px 0 0 10px; border-color: var(--white) transparent transparent transparent;
}
/* bubble 2 (upper-right): tail at bottom-left, apex down-left */
.boom--2 .boom__inner::before {
  left: 34px; bottom: -17px;
  border-width: 17px 15px 0 0; border-color: var(--ink) transparent transparent transparent;
}
.boom--2 .boom__inner::after {
  left: 38px; bottom: -11px;
  border-width: 12px 10px 0 0; border-color: var(--white) transparent transparent transparent;
}
/* bubble 3 (lower-right): tail at top-left, apex up-left */
.boom--3 .boom__inner::before {
  left: 34px; top: -17px;
  border-width: 0 15px 17px 0; border-color: transparent transparent var(--ink) transparent;
}
.boom--3 .boom__inner::after {
  left: 38px; top: -11px;
  border-width: 0 10px 12px 0; border-color: transparent transparent var(--white) transparent;
}
/* bubble 4 (lower-left): tail at top-right, apex up-right */
.boom--4 .boom__inner::before {
  right: 34px; top: -17px;
  border-width: 0 0 17px 15px; border-color: transparent transparent var(--ink) transparent;
}
.boom--4 .boom__inner::after {
  right: 38px; top: -11px;
  border-width: 0 0 12px 10px; border-color: transparent transparent var(--white) transparent;
}

/* duck-in-a-CRT hero image (framed photo card) with bubble anchors */
.crt-wrap {
  position: relative; z-index: 3;
  margin: 56px auto 24px;
  width: clamp(260px, 34vw, 420px);
}
.crt {
  position: relative; z-index: 3; width: 100%;
  animation: crtFloat 6s ease-in-out infinite;
}
.crt__img {
  display: block; width: 100%; height: auto;
  /* soft offset shadow following the cutout silhouette, poster-style */
  filter: drop-shadow(12px 14px 0 rgba(20,19,26,.16));
}
@keyframes crtFloat {
  0%,100% { transform: translateY(0) rotate(-.6deg); }
  50%     { transform: translateY(-8px) rotate(.6deg); }
}
.cursor { animation: blink 1s steps(1) infinite; }

.scrolldown {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-size: 18px; color: var(--blue); z-index: 6;
  animation: bounce 1.8s ease-in-out infinite;
}
@keyframes bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

.float { will-change: transform; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  background: var(--blue); color: var(--white);
  border-top: var(--edge) solid var(--ink); border-bottom: var(--edge) solid var(--ink);
  overflow: hidden; padding: 12px 0;
}
.marquee__track {
  display: flex; white-space: nowrap; width: max-content;
  animation: slide 60s linear infinite;
  font-family: var(--f-pixel); font-size: 19px; letter-spacing: 2px;
}
@keyframes slide { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============================================================
   ABOUT
   ============================================================ */
.tag {
  display: inline-block; font-family: var(--f-pixel); font-size: 15px; letter-spacing: 2px;
  background: var(--ink); color: var(--paper); padding: 7px 13px; margin-bottom: 18px;
}
section { padding: clamp(70px, 10vw, 130px) clamp(20px, 6vw, 80px); }

.about { max-width: var(--maxw); margin: 0 auto; }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.about__lead h2 {
  font-family: var(--f-display); font-size: clamp(34px, 5.5vw, 66px);
  line-height: .96; color: var(--ink); letter-spacing: -1px;
}
.about__body { font-size: clamp(17px, 1.9vw, 22px); align-self: end; }

.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 64px; }
.card {
  position: relative; overflow: hidden;
  background: var(--white); border: var(--edge) solid var(--ink);
  padding: 28px 24px 30px; box-shadow: 6px 6px 0 var(--ink);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
/* sweeping highlight — one-shot animation, plays only while hovering this card */
.card::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(35,35,240,.10), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
.card:hover::before { animation: cardSweep .6s ease forwards; }
@keyframes cardSweep {
  0%   { left: -60%; opacity: 1; }
  100% { left: 130%; opacity: 1; }
}
.card:hover { transform: translate(-3px,-4px); box-shadow: 10px 12px 0 var(--blue); }
.card__icon {
  position: absolute; top: 16px; right: 18px;
  width: auto; height: 56px;
  transform: rotate(6deg);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card__icon { transform: rotate(-6deg) scale(1.12); }
.card__no {
  font-family: var(--f-display); font-size: 40px; color: var(--blue);
  display: block; margin-bottom: 12px; -webkit-text-stroke: 1px var(--ink);
}
.card h3 { font-family: var(--f-sans); font-size: 23px; margin-bottom: 8px; }
.card p { font-size: 17px; color: #3a3944; }

/* ============================================================
   PRIZE
   ============================================================ */
.prize {
  background: var(--blue); color: var(--white); text-align: center;
  border-top: var(--edge) solid var(--ink); border-bottom: var(--edge) solid var(--ink);
  position: relative; overflow: hidden;
}
.prize::before {
  content: ""; position: absolute; inset: 0; opacity: .12;
  background: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 22px);
}
.prize__stars { font-size: 22px; letter-spacing: 14px; margin-bottom: 18px; opacity: .8; }
.prize__label { font-family: var(--f-pixel); font-size: clamp(15px, 1.4vw, 18px); letter-spacing: 3px; }
.prize__amount {
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
  margin: 10px 0 14px; position: relative; z-index: 2;
}
.prize__cur { font-family: var(--f-display); font-size: clamp(24px,4vw,46px); }
.prize__num {
  font-family: var(--f-display); font-size: clamp(80px, 18vw, 230px); line-height: 1;
  text-shadow: 5px 6px 0 var(--ink);
}
.prize__sub { font-size: clamp(16px,2vw,20px); opacity: .92; position: relative; z-index: 2; }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { max-width: var(--maxw); margin: 0 auto; }
.timeline__head { text-align: center; margin-bottom: 56px; }
.timeline__head h2 {
  font-family: var(--f-display); font-size: clamp(30px,5vw,58px); letter-spacing: -1px;
}
.track {
  position: relative;
  list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px;
  counter-reset: step;
}
.step { position: relative; z-index: 1; }
.step__date {
  font-family: var(--f-pixel); font-size: 15px; letter-spacing: 1px;
  background: var(--blue); color: var(--white); border: 2px solid var(--ink);
  padding: 9px 10px; text-align: center; margin-bottom: 14px; position: relative;
}
/* arrow connectors */
.step:not(.step--last) .step__date::after {
  content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  color: var(--ink); font-family: var(--f-mono); font-weight: 700; font-size: 18px;
  background: var(--paper); padding: 0 2px; z-index: 2;
}
.step__body {
  border: var(--edge) solid var(--ink); background: var(--white);
  padding: 20px 18px 22px; min-height: 150px;
  box-shadow: 5px 5px 0 var(--ink); transition: transform .18s, box-shadow .18s;
}
.step:hover .step__body { transform: translateY(-4px); box-shadow: 5px 9px 0 var(--blue); }
.step__body h3 { font-size: 19px; margin-bottom: 8px; }
.step__body p { font-size: 16px; color: #3a3944; }

/* ============================================================
   EVENT DETAILS
   ============================================================ */
.details { max-width: var(--maxw); margin: 0 auto; padding-top: clamp(10px, 2vw, 30px); }
.details__head { text-align: center; margin-bottom: 48px; }
.details__head h2 {
  font-family: var(--f-display); font-size: clamp(30px,5vw,58px); letter-spacing: -1px;
}
.details__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.detail {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  background: var(--white); border: var(--edge) solid var(--ink);
  padding: 26px 24px 28px; box-shadow: 6px 6px 0 var(--ink);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
.detail:hover { transform: translate(-3px,-4px); box-shadow: 10px 12px 0 var(--blue); }
.detail__emoji { position: absolute; top: 20px; right: 20px; font-size: 26px; }
.detail__label { font-family: var(--f-pixel); font-size: 13px; letter-spacing: 2px; color: var(--blue); }
.detail__value { font-family: var(--f-sans); font-weight: 700; font-size: clamp(24px, 2.4vw, 31px); line-height: 1.1; }
.detail__value .cursor { color: var(--blue); }
.detail__note { font-family: var(--f-mono); font-size: 14px; color: #3a3944; margin-top: 4px; }

/* ============================================================
   CTA
   ============================================================ */
.cta { display: flex; justify-content: center; }
.cta__box {
  background: var(--ink); color: var(--paper); text-align: center;
  border: var(--edge) solid var(--ink); box-shadow: 10px 10px 0 var(--blue);
  padding: clamp(40px,6vw,72px) clamp(28px,6vw,80px); max-width: 760px; width: 100%;
  position: relative;
}
.cta__box h2 {
  font-family: var(--f-display); font-size: clamp(38px,7vw,88px); line-height: .9;
  color: var(--white); letter-spacing: -1px; margin-bottom: 20px;
}
.cta__box > p { font-size: clamp(16px,2vw,20px); max-width: 460px; margin: 0 auto 30px; color: #cfcdc6; }
.cta__fine { font-family: var(--f-mono); font-size: 14px; opacity: .65; margin-top: 22px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--blue); color: var(--white); border-top: var(--edge) solid var(--ink); }
.footer__row {
  display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center;
  padding: 40px 20px; border-bottom: 2px solid rgba(255,255,255,.25);
}
.footer__col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.footer__k { font-family: var(--f-mono); font-size: 14px; letter-spacing: 1px; opacity: .85; }
/* partner logos on white chip cards */
.footer__logo {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border: 2px solid var(--ink);
  padding: 10px 18px; min-height: 68px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.footer__logo img { display: block; width: auto; }
.footer__logoname {
  font-family: var(--f-sans); font-weight: 700; font-size: 20px;
  letter-spacing: -.3px; color: var(--ink);
}
a.footer__logo:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
a.footer__logo:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.footer__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 18px clamp(20px,5vw,56px); font-family: var(--f-mono); font-size: 14px;
}
.footer__base a:hover { text-decoration: underline; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d,0s); }
@keyframes rise { to { opacity: 1; transform: none; } }

.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d,0s); }
.reveal-up.in { opacity: 1; transform: none; }

/* ============================================================
   CREATIVE EXTRAS
   ============================================================ */

/* --- drifting background decorations (faint, delicate marks) --- */
/* deco floats within the hero, above the grid bg but behind the content.
   A wrapper handles slow drift; an inner element twinkles — so transforms
   never fight each other. */
.deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.deco__item {
  position: absolute; color: var(--blue); line-height: 1;
  will-change: transform;
}
.deco--star { animation: drift 20s ease-in-out infinite, twinkle 5s ease-in-out infinite; }
/* stagger each sparkle so they drift/twinkle out of sync */
.deco--star:nth-child(2) { animation-duration: 26s, 6.5s; animation-delay: -3s, -2s; }
.deco--star:nth-child(3) { animation-duration: 30s, 4.5s; animation-delay: -8s, -1s; }
.deco--star:nth-child(4) { animation-duration: 23s, 5.5s; animation-delay: -5s, -3s; }
.deco--star:nth-child(5) { animation-duration: 34s, 7s;   animation-delay: -2s, -4s; }
.deco--star:nth-child(6) { animation-duration: 28s, 6s;   animation-delay: -6s, -1.5s; }
@keyframes drift   { 0%,100%{transform:translate(0,0)} 50%{transform:translate(12px,-16px)} }
@keyframes twinkle { 0%,100%{opacity:.10} 50%{opacity:.28} }

/* --- animated hero background wash --- */
.hero__bg::after {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(40% 40% at 30% 30%, rgba(35,35,240,.10), transparent 70%),
              radial-gradient(35% 35% at 75% 65%, rgba(35,35,240,.08), transparent 70%);
  animation: wash 16s ease-in-out infinite alternate;
}
@keyframes wash { from { transform: translate(-4%, -3%) scale(1); } to { transform: translate(5%, 4%) scale(1.12); } }

/* the prize::before diagonal texture slowly slides */
.prize::before { animation: stripes 30s linear infinite; background-size: 200% 200%; }
@keyframes stripes { to { background-position: 200% 0; } }

/* --- prize number gets a subtle idle wobble + hover pop --- */
.prize__num { display: inline-block; transition: transform .25s; }
.prize:hover .prize__num { transform: scale(1.04) rotate(-1deg); }

/* --- marquee: pause on hover, add motion feel --- */
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --- button shimmer --- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .5s ease;
}
.btn:hover::after { left: 130%; }

/* --- shuffleable idea chips --- */
.chips {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 44px;
}
.chips__label {
  font-family: var(--f-pixel); font-size: 13px; letter-spacing: 1px;
  color: var(--blue); flex-basis: 100%;
}
.chips__row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--f-mono); font-weight: 700; font-size: 15px;
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px;
  padding: 9px 16px; box-shadow: 3px 3px 0 var(--ink);
  animation: chipPop .3s cubic-bezier(.2,.7,.3,1.3) backwards;
}
.chip:nth-child(2) { animation-delay: .05s; }
.chip:nth-child(3) { animation-delay: .1s; }
.chip:nth-child(4) { animation-delay: .15s; }
@keyframes chipPop { from { opacity: 0; transform: scale(.8); } }
.chips__shuffle {
  font-family: var(--f-mono); font-weight: 700; font-size: 15px; cursor: pointer;
  background: var(--blue); color: var(--white); border: 2px solid var(--ink);
  border-radius: 999px; padding: 9px 16px; box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.chips__shuffle:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.chips__shuffle:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }

/* --- registration countdown --- */
.countdown { margin: 6px 0 30px; }
.countdown__label {
  display: block; font-family: var(--f-pixel); font-size: 13px; letter-spacing: 2px;
  color: var(--blue-l); margin-bottom: 14px;
}
.countdown__units { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.countdown__num {
  font-family: var(--f-pixel); font-weight: 700; font-size: clamp(26px, 3.4vw, 38px);
  background: var(--blue); color: var(--white); border: 2px solid var(--ink);
  padding: 8px 14px; min-width: 2.4ch; box-shadow: 4px 4px 0 rgba(0,0,0,.45);
}
.countdown__lab { font-family: var(--f-mono); font-size: 13px; color: #9b99a6; text-transform: uppercase; }
.countdown__sep {
  font-family: var(--f-pixel); font-size: clamp(26px, 3.4vw, 38px);
  color: var(--blue-l); line-height: 1.5;
}
.countdown[hidden] { display: none; }

/* --- reversed marquee bookend --- */
.marquee--flip { background: var(--ink); }
.marquee--flip .marquee__track { animation-direction: reverse; color: var(--paper); }

/* --- duck easter egg --- */
.crt { cursor: pointer; }
.crt__img { transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .crt:hover .crt__img { transform: rotate(2deg) scale(1.03); }
}
/* pixel-font invitation under the artwork; fades once the egg is found */
.crt__hint {
  position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  font-family: var(--f-pixel); font-size: 13px; letter-spacing: .1em;
  color: var(--blue); white-space: nowrap;
  transition: opacity .4s ease;
}
.crt--found .crt__hint { opacity: 0; }
/* appended to .crt-wrap so it stacks above the speech bubbles (z-index 4) */
.quack {
  position: absolute; top: 2%; left: 50%; z-index: 6;
  font-family: var(--f-pixel); font-weight: 700; font-size: clamp(20px, 2vw, 26px);
  background: var(--white); color: var(--ink); border: 2.5px solid var(--ink);
  border-radius: 999px; padding: 12px 22px; white-space: nowrap;
  box-shadow: 4px 5px 0 rgba(20,19,26,.2);
  transform: translateX(-50%) rotate(-6deg);
  animation: quackPop .35s cubic-bezier(.2,.7,.3,1.4) backwards;
  pointer-events: none;
}
@keyframes quackPop { from { opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(.5); } }

/* --- mobile sticky mini-CTA --- */
.stickybar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  align-items: center; justify-content: space-between; gap: 12px;
  background: var(--blue); border-top: var(--edge) solid var(--ink);
  padding: 12px 18px;
  transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.stickybar.on { transform: none; }
.stickybar__date { font-family: var(--f-pixel); font-size: 14px; letter-spacing: 1px; color: var(--white); }
.stickybar__btn {
  font-family: var(--f-mono); font-weight: 700; font-size: 15px;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink);
  padding: 9px 16px; box-shadow: 3px 3px 0 var(--ink);
}
@media (max-width: 860px) { .stickybar { display: flex; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- wide screens: title left, duck right, bubbles orbit the duck --- */
@media (min-width: 1200px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center; column-gap: 28px;
    padding: 120px clamp(32px, 6vw, 96px) 60px;
    text-align: left;
  }
  .hero__center { max-width: none; }
  .hero__kicker { margin-bottom: 20px; }
  .hero__title {
    justify-content: flex-start;
    font-size: clamp(70px, 9vw, 140px);
  }
  .hero__tag { margin-left: 0; max-width: 560px; }
  .hero__actions { justify-content: flex-start; }
  /* card centred in its column — balances the whitespace either side */
  .crt-wrap { margin: 0; justify-self: center; width: clamp(320px, 26vw, 420px); }
  /* lower-left bubble stays narrow so it clears the tagline text column */
  .boom--4 { right: 78%; width: 200px; }
}

@media (max-width: 860px) {
  .nav__links a:not(.nav__cta) { display: none; }
  .about__grid { grid-template-columns: 1fr; gap: 20px; }
  .cards { grid-template-columns: 1fr; }
  .details__grid { grid-template-columns: 1fr; }
  .track { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2n) .step__date::after { display: none; }
  /* larger artwork + slightly spread bubbles so the machine stays visible */
  .crt-wrap { width: min(340px, 78vw); }
  .boom { width: 160px; }
  .boom--1 { right: 76%; top: -9%; }
  .boom--2 { left: 72%; top: -11%; }
  .boom--3 { left: 75%; bottom: -7%; }
  .boom--4 { right: 79%; bottom: -9%; }
}
@media (max-width: 600px) {
  .nav { padding: 14px 16px; }
  .nav__brand { font-size: 17px; gap: 8px; }
  .nav__dot { width: 11px; height: 11px; }
  .nav__cta { padding: 9px 14px; font-size: 14px; }
}
@media (max-width: 520px) {
  section { padding-left: 20px; padding-right: 20px; }
  .track { grid-template-columns: 1fr; }
  .step .step__date::after { display: none !important; }
  .boom { display: none; }
  .hero { padding-top: 96px; }
  .hero__title {
    font-size: clamp(52px, 18vw, 108px); gap: .1em .22em;
    /* single tight undertone — the soft second shadow crowds small letterforms */
    text-shadow: 2px 2px 0 var(--ink);
  }
  .smiley svg { filter: drop-shadow(2px 2px 0 var(--ink)); }
  .about__lead h2 { font-size: clamp(30px, 9vw, 48px); }
  .prize__num { text-shadow: 3px 4px 0 var(--ink); }
  .cta__box { box-shadow: 6px 6px 0 var(--blue); }
  .countdown__units { gap: 6px; }
  .countdown__num { font-size: 20px; padding: 7px 9px; }
  .countdown__sep { font-size: 20px; }
  .countdown__lab { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .reveal, .reveal-up { opacity: 1 !important; transform: none !important; }
}