:root {
  --ink: #10233f;
  --white: #ffffff;
  --gold: #ffd54a;
  --blue: #2e7de9;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
  padding-bottom: 30px;
}

/* ------------------------------------------------------------
   BRAND
------------------------------------------------------------ */
.brand-lockup {
  position: relative;
  z-index: 50;
  width: 100%;
  padding-top: clamp(24px, 4vh, 52px);
  text-align: center;
}

.logo {
  display: block;
  width: clamp(104px, 9vw, 140px);
  height: auto;
  margin: 0 auto;
}

/* ------------------------------------------------------------
   LEVEL HERO
   Two independent image slots. Level 10 gets its own effect stack
   so future animation can target it without touching Level 1.
------------------------------------------------------------ */
.level-hero {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  width: min(980px, 92vw);
  margin: clamp(22px, 3.5vh, 42px) auto 0;
}

.level-card {
  position: relative;
  width: 320px;
  min-width: 0;
  flex: 0 0 320px;
  aspect-ratio: 0.72;
  overflow: visible;
  border-radius: 18px;
  transform-origin: center bottom;
}

.level-card--one {
  transform: rotate(-6deg) translateY(12px);
}

.level-card--ten {
  transform: rotate(4deg);
  filter:
    drop-shadow(0 20px 30px rgba(16,35,63,.22))
    drop-shadow(0 0 22px rgba(255,215,74,.28));
}

.level-card--ten::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.85) 0%,
      rgba(255,235,120,.72) 18%,
      rgba(255,215,74,.45) 38%,
      rgba(255,215,74,.18) 58%,
      rgba(255,215,74,0) 75%
    );
  filter: blur(18px);
  opacity: .85;
  animation: superAura 2.2s ease-in-out infinite;
}

@keyframes superAura {
  0%, 100% {
    transform: scale(.94);
    opacity: .68;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.level-card--ten::after {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: 0;
  border-radius: 28px;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,0) 58%
    );
  pointer-events: none;
  opacity: .75;
}

.level-badge {
  position: absolute;
  z-index: 12;
  top: 10%;
  left: 7%;
  padding: .38em .58em;
  border-radius: 9px;
  background: rgba(16,35,63,.92);
  color: white;
  font-size: clamp(11px, 1.2vw, 16px);
  font-weight: 900;
  letter-spacing: .05em;
  box-shadow: 0 5px 12px rgba(16,35,63,.18);
}

.level-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(145deg, #eef5fb, #dce9f4);
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 28px rgba(16,35,63,.16);
}

.level-art--ten {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-color: rgba(255,215,74,.95);
  background:
  radial-gradient(
    circle at 50% 42%,
    rgba(255, 150, 40, .55) 0%,
    rgba(102, 55, 145, .75) 30%,
    rgba(40, 28, 82, .95) 62%,
    rgba(12, 20, 45, 1) 100%
  );
  box-shadow:
  0 0 0 2px rgba(255,215,74,.24),
  0 18px 38px rgba(16,35,63,.22),
  inset 0 -35px 45px rgba(255, 173, 64, .18);
}

.art-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  color: var(--ink);
}

.art-placeholder span {
  font-size: clamp(12px, 1.5vw, 18px);
  font-weight: 900;
  letter-spacing: .14em;
}

.art-placeholder strong {
  margin-top: 4px;
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 900;
}

.art-placeholder small {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .45;
}

/* ------------------------------------------------------------
   HERO GRACIE ART
   ------------------------------------------------------------ */

.hero-gracie {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 1;
  pointer-events: none;
}

.hero-gracie--level-one {
  transform: scale(.90);
}

.hero-gracie--level-ten {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: scale(1.80);
  z-index: 1;
}


.level-card-label {
  position: absolute;
  z-index: 10;
  left: 8%;
  right: 8%;
  bottom: 3%;
  display: flex;
  flex-direction: column;
  color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.level-card--one .level-card-label strong {
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -.02em;
  color: #ffffff;
}

.level-card--one .level-card-label span {
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: .14em;
  font-weight: 900;
  color: #ffd54a;
  text-shadow:
    0 1px 4px rgba(0,0,0,.65),
    0 0 6px rgba(255,213,74,.25);
}

.level-card--ten .level-card-label strong {
  font-size: clamp(24px, 2.6vw, 35px);
  letter-spacing: -.02em;
  color: #fff7d0;

  text-shadow:
    0 2px 4px rgba(0,0,0,.35),
    0 0 10px rgba(255,215,74,.75),
    0 0 22px rgba(255,145,35,.5);
}

.level-card--ten .level-card-label span {
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: .16em;
  font-weight: 900;
  color: #ffd85a;

  text-shadow:
    0 0 8px rgba(255,180,50,.65);
}


.level-card-label strong {
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1;
}

.level-card-label span {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.level-card--one .level-card-label {
  text-shadow:
    0 2px 4px rgba(0,0,0,.65),
    0 0 8px rgba(16,35,63,.45);
}

.level-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 5vw, 70px);
  flex: 0 0 auto;
  color: var(--gold);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 900;
  line-height: .55;
  text-shadow:
    0 2px 8px rgba(16,35,63,.16),
    0 0 14px rgba(255,215,74,.28);
  transform: translateY(-2px);
}

.level-arrow span + span {
  margin-left: -14px;
}

/* Reserved effect layers for the eventual Level 10 animation. */
/* LEVEL 10 ENERGY */
.energy {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  transform-origin: center;
}

/* Golden energy field */
.energy--one {
  inset: -10% -18%;
  z-index: 2;
  border: 2px solid rgba(255,221,82,.78);
  box-shadow:
    0 0 12px rgba(255,221,82,.55),
    0 0 28px rgba(255,221,82,.28);
  transform: rotate(16deg);
  animation: energyOne 4s ease-in-out infinite;
}

/* White inner energy */
.energy--two {
  inset: -5% 8%;
  z-index: 3;
  border: 2px solid rgba(255,255,255,.72);
  box-shadow:
    0 0 10px rgba(255,255,255,.45),
    0 0 22px rgba(255,255,255,.18);
  transform: rotate(-24deg);
  animation: energyTwo 3.2s ease-in-out infinite;
}

.level-art--ten::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  width: 42%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,255,255,.28) 0%,
    rgba(255,221,82,.18) 28%,
    rgba(255,221,82,0) 70%
  );
  filter: blur(12px);
  pointer-events: none;
  animation: powerCore 2.8s ease-in-out infinite;
}

@keyframes powerCore {
  0%, 100% {
    opacity: .45;
    transform: translate(-50%, -50%) scale(.92);
  }

  50% {
    opacity: .85;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* Blue secondary energy */
.energy--three {
  inset: 8% -12%;
  z-index: 2;
  border: 1px solid rgba(67,148,255,.65);
  box-shadow:
    0 0 14px rgba(67,148,255,.38);
  transform: rotate(42deg);
  animation: energyThree 4.8s ease-in-out infinite;
}

@keyframes energyOne {
  0%, 100% {
    transform: scale(1) rotate(16deg);
    opacity: .72;
  }

  50% {
    transform: scale(1.035) rotate(20deg);
    opacity: 1;
  }
}

@keyframes energyTwo {
  0%, 100% {
    transform: scale(1) rotate(-24deg);
    opacity: .65;
  }

  50% {
    transform: scale(1.025) rotate(-19deg);
    opacity: .95;
  }
}

@keyframes energyThree {
  0%, 100% {
    transform: scale(1) rotate(42deg);
    opacity: .55;
  }

  50% {
    transform: scale(1.04) rotate(47deg);
    opacity: .85;
  }
}



/* LEVEL 10 ENERGY PARTICLES */

.particles {
  position: absolute;
  inset: -12%;
  z-index: 8;
  pointer-events: none;
}

.particles span {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 5px #ffffff,
    0 0 12px rgba(255,215,74,.95),
    0 0 22px rgba(255,190,40,.65);
  opacity: 0;
  animation: particleRise 3.5s ease-in-out infinite;
}

/* Individual particle positions */

.particles span:nth-child(1) {
  left: 18%;
  bottom: 20%;
  animation-delay: .2s;
}

.particles span:nth-child(2) {
  left: 27%;
  bottom: 12%;
  animation-delay: 1.1s;
}

.particles span:nth-child(3) {
  left: 38%;
  bottom: 25%;
  animation-delay: 2s;
}

.particles span:nth-child(4) {
  left: 48%;
  bottom: 8%;
  animation-delay: .7s;
}

.particles span:nth-child(5) {
  left: 58%;
  bottom: 22%;
  animation-delay: 1.7s;
}

.particles span:nth-child(6) {
  left: 69%;
  bottom: 14%;
  animation-delay: 2.4s;
}

.particles span:nth-child(7) {
  left: 78%;
  bottom: 28%;
  animation-delay: 1.3s;
}

.particles span:nth-child(8) {
  left: 12%;
  bottom: 38%;
  animation-delay: 2.8s;
}

.particles span:nth-child(9) {
  left: 86%;
  bottom: 42%;
  animation-delay: .9s;
}

.particles span:nth-child(10) {
  left: 33%;
  bottom: 48%;
  animation-delay: 3.1s;
}

.particles span:nth-child(11) {
  left: 63%;
  bottom: 52%;
  animation-delay: 1.9s;
}

.particles span:nth-child(12) {
  left: 50%;
  bottom: 62%;
  animation-delay: 2.6s;
}

@keyframes particleRise {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(.4);
  }

  20% {
    opacity: .9;
  }

  70% {
    opacity: .7;
  }

  100% {
    opacity: 0;
    transform: translateY(-130px) scale(1.2);
  }
}

/* LEVEL 10 ENERGY STREAKS */

.energy-streaks {
  position: absolute;
  inset: -15% -5%;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}

.energy-streaks span {
  position: absolute;
  bottom: -10%;
  display: block;
  width: 3px;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(
    to top,
    rgba(255,215,74,0),
    rgba(255,255,255,.95),
    rgba(255,215,74,.7),
    rgba(255,215,74,0)
  );
  filter:
    blur(.4px)
    drop-shadow(0 0 7px rgba(255,215,74,.9));
  opacity: 0;
  animation: energyStreak 2.8s ease-out infinite;
}

.energy-streaks span:nth-child(1) {
  left: 18%;
  height: 24%;
  animation-delay: .2s;
}

.energy-streaks span:nth-child(2) {
  left: 29%;
  height: 34%;
  animation-delay: 1.3s;
}

.energy-streaks span:nth-child(3) {
  left: 40%;
  height: 20%;
  animation-delay: .7s;
}

.energy-streaks span:nth-child(4) {
  left: 50%;
  height: 40%;
  animation-delay: 1.8s;
}

.energy-streaks span:nth-child(5) {
  left: 61%;
  height: 27%;
  animation-delay: .9s;
}

.energy-streaks span:nth-child(6) {
  left: 72%;
  height: 36%;
  animation-delay: 2.2s;
}

.energy-streaks span:nth-child(7) {
  left: 82%;
  height: 22%;
  animation-delay: 1.5s;
}

@keyframes energyStreak {
  0% {
    opacity: 0;
    transform: translateY(35px) scaleY(.45);
  }

  15% {
    opacity: .9;
  }

  65% {
    opacity: .65;
  }

  100% {
    opacity: 0;
    transform: translateY(-170px) scaleY(1.15);
  }
}



/* ------------------------------------------------------------
   HEADLINE
------------------------------------------------------------ */
.headline {
  position: relative;
  z-index: 35;
  width: min(900px, 92vw);
  margin: clamp(30px, 5vh, 58px) auto 0;
  text-align: center;
}

.headline h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: .98;
}

.headline h1 strong { font-weight: 900; }

.headline p {
  margin: 18px 0 0;
  color: var(--ink);
  font-size: clamp(9px, 1vw, 13px);
  font-weight: 900;
  letter-spacing: .34em;
}

/* ------------------------------------------------------------
   WORLD
------------------------------------------------------------ */
.world {
  position: relative;
  z-index: 5;
  width: 100%;
  height: min(66vh, 760px);
  min-height: 430px;
  margin-top: clamp(26px, 4vh, 46px);
  overflow: hidden;
}

.world-art {
  position: absolute;
  inset: -3% -3% -4%;
  background: url("../images/world-background.png") center 72% / cover no-repeat;
  transform: scale(1.04);
  transform-origin: center bottom;
  filter: saturate(1.03) contrast(1.01);
}

.horizon-haze {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: -5%;
  right: -5%;
  height: 24%;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.88) 26%, rgba(255,255,255,.28) 68%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.scene-light {
  position: absolute;
  z-index: 2;
  left: 20%;
  right: 20%;
  top: 15%;
  height: 58%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 68%);
  pointer-events: none;
}

.characters {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}

.team-stage {
  position: absolute;
  left: 40%;
  bottom: 0;
  width: 1000px;
  height: 600px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 20px;
  transform: translateX(-50%) scale(1);
  transform-origin: center bottom;
}

.character {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 18px 18px rgba(16,35,63,.18));
  transform-origin: 50% 100%;
}

.character--gracie {
  height: 456px;
  z-index: 4;
}

.character--bear {
  height: 390px;
  z-index: 7;
}

.character--penguin {
  height: 336px;
  z-index: 5;
}

.character--sloth {
  height: 384px;
  z-index: 6;
}

.character--fox {
  height: 462px;
  z-index: 9;
}

/* A simple rock-like foreground layer; replace with a dedicated asset later if desired. */
.rock-foreground {
  position: absolute;
  z-index: 12;
  left: -5%;
  right: -5%;
  bottom: -12%;
  height: 25%;
  border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  background: linear-gradient(to bottom, rgba(35,47,57,.96), rgba(18,29,38,1));
  box-shadow: 0 -10px 30px rgba(16,35,63,.18);
  transform: rotate(-1deg);
}

.status {
  position: relative;
  z-index: 60;
  margin-top: -36px;
  color: rgba(255,255,255,.98);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .34em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 12px rgba(16,35,63,.45);
}

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 760px) {
  .brand-lockup { padding-top: 24px; }
  .logo { width: 98px; }

  .level-hero {
    width: 94vw;
    gap: 7px;
    margin-top: 20px;
  }

    .level-card {
    width: 43vw;
    min-width: 0;
    flex: 0 0 43vw;
    border-radius: 14px;
  }
  .level-art { border-radius: 14px; }
  .level-card--one { transform: rotate(-5deg) translateY(8px); }
  .level-card--ten { transform: rotate(4deg); }
  .level-arrow { width: 26px; font-size: 40px; }
  .level-arrow span + span { margin-left: -9px; }

  .art-placeholder strong { font-size: clamp(22px, 7vw, 32px); }
  .art-placeholder small { font-size: 8px; }

  .headline { margin-top: 30px; }
  .headline h1 { font-size: clamp(31px, 9vw, 46px); }
  .headline p { margin-top: 13px; font-size: 8px; letter-spacing: .25em; }

  .world {
  height: 62vh;
  min-height: 430px;
  margin-top: 24px;
  }

  .world-art {
    inset: -2% -6% -3%;
    background-position: center 67%;
  }

  .scene-light {
    left: 8%;
    right: 8%;
  }

  .rock-foreground {
    height: 16%;
    bottom: -7%;
  }
  .status { margin-top: -31px; font-size: 8px; letter-spacing: .28em; }
  
  .team-stage {
  left: 50%;
  width: 1000px;
  transform: translateX(-60%) scale(.42);
  transform-origin: center bottom;
  }

}

@media (max-width: 480px) {
  .level-hero { width: 96vw; gap: 4px; }
  .level-card {
  width: 44vw;
  min-width: 0;
  flex: 0 0 44vw;
  }
  .level-badge { top: 8%; left: 7%; font-size: 9px; border-radius: 7px; }
  .level-card-label strong { font-size: 16px; }
  .level-card-label span { font-size: 7px; }
  .level-arrow { width: 20px; font-size: 32px; }

  .headline h1 { font-size: 30px; }
  .headline p { font-size: 7px; }
  
  .team-stage {
  transform: translateX(-50%) scale(.58);
  }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* =========================================================
   LOAD ANIMATION — PHASE 1
   ========================================================= */

.hero {
  opacity: 0;
  animation: pageReveal 0.8s ease-out forwards;
}

.brand-lockup {
  opacity: 0;
  transform: translateY(-14px);
  animation: logoReveal 0.7s cubic-bezier(.22,1,.36,1) 0.15s forwards;
}

.level-hero {
  opacity: 0;
  transform: translateY(24px) scale(.97);
  animation: cardsReveal 0.9s cubic-bezier(.22,1,.36,1) 0.45s forwards;
}

.headline {
  opacity: 0;
  transform: translateY(18px);
  animation: headlineReveal 0.75s cubic-bezier(.22,1,.36,1) 1.65s forwards;
}

.world {
  opacity: 0;
  transform: translateY(24px);
  animation: worldReveal 1s cubic-bezier(.22,1,.36,1) 2.15s forwards;
}

.status {
  opacity: 0;
  transform: translateY(12px);
  animation: statusReveal 0.7s cubic-bezier(.22,1,.36,1) 3.05s forwards;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes pageReveal {
  to {
    opacity: 1;
  }
}

@keyframes logoReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardsReveal {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(.97);
  }

  70% {
    opacity: 1;
    transform: translateY(-3px) scale(1.005);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes headlineReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes worldReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes statusReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}