:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-soft: 0 18px 45px rgba(16, 42, 67, .11);
  --shadow-lift: 0 28px 65px rgba(16, 42, 67, .17);
}

body {
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 209, 102, .16), transparent 28rem),
    radial-gradient(circle at 92% 66%, rgba(39, 168, 120, .11), transparent 32rem),
    var(--cream);
}

header { transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; }
header.is-scrolled {
  background: rgba(255, 250, 240, .97);
  border-color: transparent;
  box-shadow: 0 12px 34px rgba(16, 42, 67, .09);
}

.scroll-progress {
  position: fixed;
  z-index: 80;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--orange), var(--yellow), var(--green));
  box-shadow: 0 1px 10px rgba(255, 122, 69, .45);
}

.consent-banner {
  position: fixed;
  z-index: 100;
  left: clamp(14px, 3vw, 34px);
  bottom: clamp(14px, 3vw, 34px);
  width: min(31rem, calc(100vw - 28px));
  box-sizing: border-box;
  padding: 1.15rem;
  border: 3px solid var(--navy);
  border-radius: 18px;
  background: rgba(255, 250, 240, .98);
  box-shadow: 9px 10px 0 var(--navy), 0 24px 55px rgba(16, 42, 67, .24);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.consent-banner.is-visible { opacity: 1; transform: translateY(0); }
.consent-banner.is-hiding { opacity: 0; transform: translateY(12px); }
.consent-banner strong { display: block; font-family: "Fredoka", sans-serif; font-size: 1.18rem; color: var(--navy); }
.consent-banner p { margin: .42rem 0 0; font-size: .92rem; line-height: 1.45; color: var(--muted); }
.consent-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.consent-actions button {
  appearance: none;
  min-height: 2.55rem;
  padding: .55rem .85rem;
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: transparent;
  color: var(--navy);
  font: 700 .86rem/1 "Nunito", sans-serif;
  cursor: pointer;
  transition: transform .2s var(--ease-out), background .2s ease, box-shadow .2s ease;
}
.consent-actions button:hover { transform: translateY(-2px); box-shadow: 3px 4px 0 var(--navy); }
.consent-actions .consent-accept { background: var(--orange); }

.brand-mark {
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.brand-mark:after {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.65) 50%, transparent 66%);
  transform: translateX(-80%) rotate(12deg);
  transition: transform .65s var(--ease-out);
}
.brand:hover .brand-mark { transform: rotate(4deg) scale(1.06); box-shadow: 0 8px 18px rgba(16,42,67,.2); }
.brand:hover .brand-mark:after { transform: translateX(80%) rotate(12deg); }

.navlinks > a:not(.button) { position: relative; }
.navlinks > a:not(.button):after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 3px;
  border-radius: 99px;
  background: var(--orange);
  transition: right .3s var(--ease-out);
}
.navlinks > a:not(.button):hover:after { right: 0; }

.hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 26%, rgba(255,255,255,.95), transparent 23rem),
    linear-gradient(135deg, var(--sky), #fff 62%);
}
.hero .wrap:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  right: -12rem;
  bottom: -24rem;
  border: 1px solid rgba(20,93,160,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(20,93,160,.025), 0 0 0 84px rgba(20,93,160,.018);
}

.kicker { box-shadow: 0 10px 28px rgba(16,42,67,.08); }
.kicker:before { animation: pulse-dot 2.4s ease-in-out infinite; }

.playboard {
  transform: perspective(900px) rotate(2deg) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--float-y, 0px));
  transform-style: preserve-3d;
  box-shadow: 12px 12px 0 var(--navy), 0 34px 75px rgba(16,42,67,.22);
  transition: transform .18s ease-out, box-shadow .4s ease;
  will-change: transform;
}
.playboard:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 35%), rgba(255,255,255,.8), transparent 34%);
  mix-blend-mode: soft-light;
}
.playboard:hover { box-shadow: 14px 16px 0 var(--navy), 0 42px 90px rgba(16,42,67,.27); }
.board-grid { z-index: 0; }
.path {
  z-index: 1;
  transform-origin: left center;
  pointer-events: none;
  transition: none;
}
.avatar { z-index: 2; }
.token { z-index: 3; }
.avatar, .token { transform-style: preserve-3d; }
.a1 { animation: float-one 5s ease-in-out infinite; }
.a2 { animation: float-two 5.8s ease-in-out .4s infinite; }
.a3 { animation: float-three 5.4s ease-in-out .8s infinite; }
.token { animation: token-bob 4.2s ease-in-out infinite; }
.t2 { animation-delay: .7s; }

.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), background .25s ease;
}
.button:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.24) 48%, transparent 72%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.button:hover:before { transform: translateX(120%); }
.button:active { transform: translate(1px, 1px) scale(.98); }

.skill, .step, .program, .contact-card {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .42s var(--ease-out), box-shadow .42s var(--ease-out), border-color .3s ease;
}
.skill:after, .step:after, .program:after, .contact-card:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.32), transparent 42%);
  opacity: 0;
  transition: opacity .35s ease;
}
.skill:hover, .step:hover { transform: translateY(-8px); box-shadow: 8px 12px 0 var(--navy), var(--shadow-lift); }
.step:hover { box-shadow: 0 24px 55px rgba(16,42,67,.13); border-color: rgba(20,93,160,.32); }
.program:hover { transform: translateY(-10px) rotate(-.6deg); box-shadow: var(--shadow-lift); }
.contact-card:hover { transform: translateY(-7px) rotate(.35deg); box-shadow: 13px 16px 0 var(--orange), var(--shadow-lift); }
.skill:hover:after, .step:hover:after, .program:hover:after, .contact-card:hover:after { opacity: 1; }
.skill .icon { transition: transform .45s var(--ease-out), box-shadow .4s ease; }
.skill:hover .icon { transform: translateY(-4px) rotate(-6deg) scale(1.08); box-shadow: 0 12px 24px rgba(16,42,67,.12); }
.program .num { transition: transform .45s var(--ease-out), opacity .35s ease; }
.program:hover .num { transform: translateX(7px) scale(1.05); opacity: .68; }
.program a { display: inline-block; transition: transform .3s var(--ease-out); }
.program a:hover { transform: translateX(6px); }

.strip-item { transition: background .3s ease, transform .3s var(--ease-out); }
.strip-item:hover { background: rgba(255,255,255,.07); transform: translateY(-3px); }

.quote { position: relative; overflow: hidden; }
.quote:before, .quote:after {
  content: "";
  position: absolute;
  width: 16rem;
  height: 16rem;
  border: 2px solid rgba(16,42,67,.12);
  border-radius: 50%;
}
.quote:before { left: -8rem; top: -9rem; box-shadow: 0 0 0 30px rgba(16,42,67,.025); }
.quote:after { right: -7rem; bottom: -10rem; box-shadow: 0 0 0 42px rgba(16,42,67,.02); }

.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(255,122,69,.3); } 50% { box-shadow: 0 0 0 7px rgba(255,122,69,0); } }
@keyframes float-one { 0%,100% { transform: rotate(-7deg) translate3d(0,0,18px); } 50% { transform: rotate(-4deg) translate3d(0,-10px,30px); } }
@keyframes float-two { 0%,100% { transform: rotate(7deg) translate3d(0,0,22px); } 50% { transform: rotate(4deg) translate3d(4px,-12px,34px); } }
@keyframes float-three { 0%,100% { transform: rotate(3deg) translate3d(0,0,16px); } 50% { transform: rotate(6deg) translate3d(-4px,-9px,28px); } }
@keyframes token-bob { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -7px; rotate: 5deg; } }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

@media (max-width: 900px) {
  .playboard { --tilt-x: 0deg !important; --tilt-y: 0deg !important; }
}

@media (max-width: 480px) {
  .consent-actions button { flex: 1 1 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .playboard { transform: rotate(2deg) !important; }
}