/* =========================================
   Avalon Heroes — Site + Updates Stylesheet
   Cartoon blue fantasy vibe (continuous background)
   Clean, centred, roomy spacing
   Lightbox + video modal (FIXED)
   ========================================= */

@font-face {
  font-family:'TitanOne';
  src: url('../assets/Fonts/TitanOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------
   Theme tokens
----------------------------- */
:root{
  --sky1: #2f7dff;
  --sky2: #246ae9;
  --sky3: #184fbf;
  --sky4: #0c2f7a;

  --panel: rgba(255,255,255,.14);
  --panel2: rgba(255,255,255,.10);

  --line: rgba(255,255,255,.22);
  --line2: rgba(255,255,255,.34);

  --text: #f6fbff;
  --muted: rgba(246,251,255,.78);

  --accent: #4ff6ff;
  --accent2:#2a7bff;

  --shadow: 0 18px 50px rgba(0,0,0,.22);
  --shadow2: 0 10px 28px rgba(0,0,0,.18);
  --radius: 22px;

  --section-gap: clamp(34px, 5vw, 64px);
  --card-pad: 22px;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; height:100%; }
html{ overflow-x:hidden; background:#246ae9; }
body{
  min-height: 100vh;
  background: transparent;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  position: relative;
}


/* Paint the actual background on html so it always fills the viewport */
html{
  background:
    radial-gradient(1100px 700px at 50% -220px, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(900px 600px at 18% 12%, rgba(79,246,255,.22), transparent 72%),
    radial-gradient(900px 600px at 82% 18%, rgba(42,123,255,.22), transparent 72%),
    linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 36%, var(--sky3) 70%, var(--sky4) 100%);
  background-attachment: fixed;
}

/* Soft “magic dust” sparkles */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(2px 2px at 28% 42%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2px 2px at 44% 26%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(2px 2px at 62% 58%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(2px 2px at 78% 34%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2px 2px at 90% 64%, rgba(255,255,255,.12), transparent 60%);
}

/* Gentle vignette */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1400px 900px at 50% 10%, rgba(0,0,0,.06), transparent 70%),
    radial-gradient(1600px 1200px at 50% 100%, rgba(0,0,0,.10), transparent 70%);
  opacity: 1;
}

/* Media / links */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===============================
   HERO BANNER (TOP OF SITE)
================================ */
.site-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #246ae9;
  padding: 0 !important;
  margin: 0;
}

.hero-banner{
  position: relative;
  height: clamp(260px, 38vw, 480px);
  width: 100%;
  background-image: url("../assets/Banner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 -60px 120px rgba(36,106,233,.25);
  background-color: #246ae9;
  transform: translateZ(0);
  display:block;
  outline: 0;
  border: 0;
  backface-visibility: hidden;
}

.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
}

.hero-banner::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height: 320px;
  background: linear-gradient(
    to bottom,
    rgba(36,106,233,0) 0%,
    rgba(36,106,233,0.15) 25%,
    rgba(36,106,233,0.45) 55%,
    rgba(36,106,233,0.75) 80%,
    rgba(36,106,233,1) 100%
  );
  pointer-events: none;
}

.hero-logo{
  position: absolute;
  left: 50%;
  top: 55%;
  width: min(520px, 88vw);
  height: auto;
  z-index: 2;
  filter:
    drop-shadow(0 16px 36px rgba(0,0,0,.35))
    drop-shadow(0 0 24px rgba(79,246,255,.25));
  animation: heroLogoFloat 4s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes heroLogoFloat {
  0%   { transform: translate(-50%, -50%); }
  50%  { transform: translate(-50%, calc(-50% - 14px)); }
  100% { transform: translate(-50%, -50%); }
}

.main-nav{
  display:flex;
  justify-content:center;
  gap:14px;
  padding: 18px 0 8px;
  position: relative;
  z-index: 3;
}

.main-nav a{
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(246,251,255,.95);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  backdrop-filter: blur(10px);
}
.main-nav a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
}

/* -----------------------------
   Layout helpers
----------------------------- */
.container, .wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 18px 64px;
  position: relative;
  z-index: 1;
}

/* -----------------------------
   Header / Nav
----------------------------- */
header{ padding: 18px 0 10px; position: relative; z-index: 1; }
header.container, header.wrap{ padding: 0 18px; }

header h1{
  margin: 0 0 6px;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.3px;
  text-shadow: 0 10px 24px rgba(0,0,0,.22);
}
header p{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.5;
  text-shadow: 0 8px 18px rgba(0,0,0,.16);
}

nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: rgba(246,251,255,.92);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
nav a:hover{
  text-decoration:none;
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.32);
}

/* Optional logo header */
.top-header{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 30px 18px 8px;
  position: relative;
  z-index: 1;
}
.main-logo{
  max-width: 420px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.28));
}

/* -----------------------------
   Core UI blocks (Hero / Cards)
----------------------------- */
.hero{
  margin-top: 26px;
  padding: var(--card-pad);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.hero-title{
  margin: 0 0 10px;
  font-family: 'TitanOne', system-ui, sans-serif;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: 1.15;

  /* Blooket-style outline */
  -webkit-text-stroke: 8px rgba(20, 55, 120, 0.85);
  paint-order: stroke fill;

  /* Blooket-style shadow (crisp, not blurry) */
  text-shadow:
  0 6px 0 rgba(10, 35, 85, 0.45),
  0 10px 16px rgba(0,0,0,0.25);
  color: #fff;
}

.hero-title span {
  display:block;
  font-size: 1.15em;
  -webkit-text-stroke: 9px rgba(20, 55, 120, 0.9);
}

.lead{
  margin: 0 18px 18px;
  color: rgba(246,251,255,.90);
  font-size: 20px;
  line-height: 1.65;
  text-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 8px 0 10px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(246,251,255,.95);
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, filter .12s ease;
}
.btn:hover{
  text-decoration:none;
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
}
.btn.primary{
  border: none;
  color: #042436;
  background: linear-gradient(180deg, #73f7ff 0%, #2aa7ff 55%, #1f76ff 100%);
  box-shadow: 0 10px 0 rgba(0,0,0,.16), 0 18px 34px rgba(0,0,0,.20);
}
.btn.primary:hover{ filter: brightness(1.05); }
.btn.disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  transform:none;
}

.note{
  margin-top: 12px;
  color: rgba(246,251,255,.80);
  font-size: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.20);
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: var(--section-gap) 0 0;
}
.card{
  padding: 18px;
  border-radius: var(--radius);
  background: var(--panel2);
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
}
.card h2{ margin:0 0 8px; font-size: 16px; letter-spacing: -0.2px; }
.card p{ margin:0; color: rgba(246,251,255,.82); line-height:1.5; font-size: 14px; }
.muted{ color: var(--muted); }

/* -----------------------------
   Updates Page — entry cards + meta pills
----------------------------- */
.update-entry{
  margin-top: 0;
  margin-bottom: var(--section-gap);
  padding: var(--card-pad);
  border: 2px solid rgba(255,255,255,.20);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
/* ===============================
   Updates Page Title (Styled)
================================ */

.updates-header h1{
  font-family: 'TitanOne', system-ui, sans-serif;
  font-size: clamp(34px, 4.2vw, 56px);
  letter-spacing: 0.8px;
  margin: 0 0 10px;

  /* bright readable fill */
  color: #f7fcff;

  /* clean depth (not puffy) */
  text-shadow:
    0 3px 0 rgba(6, 24, 58, 0.35),
    0 10px 24px rgba(0,0,0,0.28),
    0 0 18px rgba(79,246,255,0.22);
}

/* nice divider under title */
.updates-header h1::after{
  content:"";
  display:block;
  width: min(340px, 70%);
  height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(79,246,255,0.95), transparent);
  opacity: 0.7;
}

/* subtitle also a bit nicer */
.updates-header p{
  font-size: 1.05rem;
  color: rgba(246,251,255,.86);
  text-shadow: 0 10px 20px rgba(0,0,0,.20);
  text-align: center;
}

.update-entry h2{
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: -0.2px;
  text-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.update-entry p{
  color: rgba(246,251,255,.92);
  line-height: 1.7;
  margin: 14px 0;
}
.update-entry ul{
  margin: 10px 0 28px 18px;
  line-height: 1.75;
  color: rgba(246,251,255,.88);
}
.update-entry h4{
  margin: 18px 0 10px;
  font-size: 16px;
  color: rgba(246,251,255,.95);
}

.update-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 0 0 12px;
  color: rgba(246,251,255,.84);
  font-size: 13px;
}
.update-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 11px;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
}

/* -----------------------------
   Dev gallery thumbnails (images + video preview)
   FIXED:
   - auto-fit grid so no empty column space
   - thumbnail can be small, without affecting modal
----------------------------- */
.dev-gallery{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}

.dev-gallery .thumb{
  position: relative;
  border: 2px solid rgba(255,255,255,.18);
  padding: 0;
  background: rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:hidden;
  cursor: zoom-in;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}

.dev-gallery .thumb:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.14);
  filter: brightness(1.03);
}

.dev-gallery img{
  width:100%;
  height:240px;
  object-fit: cover;
}

/* Inline video preview (if you use <video class="inline-video">) */
.dev-gallery .thumb video.inline-video{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: #000;
}

/* Video thumb button behaviour */
.dev-gallery .thumb.video-thumb{
  cursor: pointer;
}

/* Play overlay badge (bottom-right pill) */
.play-badge{
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.52);
  color: #fff;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  border: 2px solid rgba(255,255,255,.20);
  backdrop-filter: blur(8px);
}

/* Optional: smaller “button style” thumbnails (if your video thumb is a <button>) */
.video-thumb{
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  max-width: 380px;      /* thumbnail size */
  aspect-ratio: 16 / 9;  /* keeps it neat */
  margin-inline: auto;   /* center when alone */
}

/* Thumbnail image */
.video-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play icon overlay (center) */
.video-thumb .play-icon{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: white;
  background: rgba(0,0,0,0.28);
  opacity: 0;
  transition: opacity .25s ease;
}
.video-thumb:hover .play-icon{ opacity: 1; }
.video-thumb:hover img{
  transform: scale(1.05);
  transition: transform .3s ease;
}

/* -----------------------------
   Lightbox overlay (images)
----------------------------- */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.lightbox.open{ display:flex; }

.lightbox-content{
  position: relative;
  width: min(1100px, 96vw);
  max-height: 88vh;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
}

.lightbox-img{
  width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}

.lb-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: white;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
  user-select: none;
  backdrop-filter: blur(10px);
}
.lb-btn:hover{ background: rgba(255,255,255,.16); }

.lb-close{
  position: absolute;
  top: -54px;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: white;
  cursor: pointer;
  font-size: 22px;
  backdrop-filter: blur(10px);
}
.lb-close:hover{ background: rgba(255,255,255,.16); }

.lb-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  color: rgba(255,255,255,.90);
  font-size: 14px;
  text-align: center;
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* -----------------------------
   Video Modal (pop-out player)
   FIXED:
   - modal sizing is independent from .video-thumb sizing
   - wrapper uses aspect-ratio: 16/9
   - iframe fills wrapper (no tiny video)
----------------------------- */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}
.modal.is-open{ display:block; }

.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
}

.modal__panel{
  position: relative;
  margin: 6vh auto;
  width: min(1100px, 96vw);     /* bigger than before */
  max-width: 1100px;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 22px 70px rgba(0,0,0,.50);
  backdrop-filter: blur(14px);
}

.modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 2px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
  z-index: 2;
}
.modal__close:hover{ background: rgba(255,255,255,.16); }

/* IMPORTANT: wrapper controls size */
.modal__video{
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 2px solid rgba(255,255,255,.14);
  display: block;
}

/* iframe fills wrapper */
.modal__video iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -----------------------------
   Footer
----------------------------- */
.footer{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 18px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-top: 1px solid rgba(255,255,255,.18);
  position: relative;
  z-index: 1;
}
/* ===============================
   Class Preview — MMO Tabs + Anim
================================ */

.class-preview {
  margin: 4rem auto;
  max-width: 980px;
  text-align: center;
}

.class-preview h2 {
  margin-bottom: 1.5rem;
  font-family: "Titan One", system-ui, sans-serif;
  font-size: 2.2rem;
  text-shadow: 0 4px 0 rgba(0,0,0,0.22);
}

/* Tabs */
.class-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
}

.class-tab {
  --class: var(--accent);

  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.class-tab:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
}

.class-tab.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--class) 65%, white), var(--class));
  color: #0c2f7a;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/* Panels */
.class-panels {
  position: relative;
}

.class-panel {
  --class: var(--accent);

  display: none;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  border-radius: 18px;

  /* main surface */
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);

  /* class-colour glow + top edge */
  outline: 1px solid rgba(255,255,255,0.10);
  position: relative;
  overflow: visible;
}

.class-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 500px at 20% 10%,
    color-mix(in srgb, var(--class) 25%, transparent),
    transparent 60%);
  pointer-events: none;
}

.class-panel::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--class), transparent);
  opacity: 0.85;
  pointer-events: none;
}

.class-panel.active {
  display: flex;
}

/* Character */
.class-art {
  position: relative;
  width: 360px;          /* bigger than before */
  max-width: none;
  flex-shrink: 0;
}

.class-art img {
  width: 420px;          /* bigger than panel */
  max-width: none;
  height: auto;
  z-index: 2;
  position: relative;
  left: -40px;           /* push outside panel */
  top: -20px;

  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.45));

  opacity: 0;
  transform: translateX(-48px);
}

/* Info box tinted to class colour */
.class-info {
  text-align: left;
  flex: 1;
  z-index: 1;
  padding: 1.25rem 1.35rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--class) 18%, rgba(255,255,255,0.10)),
    rgba(0,0,0,0.18)
  );

  opacity: 0;
  transform: translateY(10px);
}

/* Title in Titan One */
.class-title {
  font-family: "Titan One", system-ui, sans-serif;
  font-size: 2rem;
  margin: 0 0 0.4rem;
  letter-spacing: 0.5px;
  text-shadow: 0 3px 0 rgba(0,0,0,0.25);
}

/* Optional: tint the title subtly to the class */
.class-title {
  color: color-mix(in srgb, var(--class) 70%, white);
}

.class-desc {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Animations (staggered) */
@keyframes slideFadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* When panel becomes active, run animations */
.class-panel.animating .class-art img {
  animation: slideFadeInLeft 420ms ease-out forwards;
}

.class-panel.animating .class-info {
  animation: fadeUpIn 420ms ease-out forwards;
  animation-delay: 140ms; /* text follows character */
}

/* Mobile */
@media (max-width: 700px) {
  .class-panel.active {
    flex-direction: column;
    text-align: center;
  }
  .class-info { text-align: center; }
  .class-art { max-width: 85%; width: 340px; }
}

header, .site-hero {
  position: relative;
  overflow: hidden;
}

.header-fx{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.9;
}

.fx-orb{
  position:absolute;
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  filter: blur(.2px);
  animation: orbFloat 10s linear infinite;
}

.fx-orb:nth-child(1){ left:10%; top:20%; animation-duration: 12s; }
.fx-orb:nth-child(2){ left:25%; top:60%; animation-duration: 9s;  }
.fx-orb:nth-child(3){ left:40%; top:35%; animation-duration: 14s; }
.fx-orb:nth-child(4){ left:60%; top:25%; animation-duration: 11s; }
.fx-orb:nth-child(5){ left:75%; top:55%; animation-duration: 13s; }
.fx-orb:nth-child(6){ left:90%; top:30%; animation-duration: 10s; }

@keyframes orbFloat{
  0%   { transform: translateY(0) translateX(0); opacity:.15; }
  20%  { opacity:.45; }
  100% { transform: translateY(320px) translateX(-40px); opacity:.05; }
}
.devlog{
  position: relative;
  max-width: 980px;
  margin: 3rem auto;
  padding-left: 42px;
}

.devlog::before{
  content:"";
  position:absolute;
  left:16px; top:0; bottom:0;
  width:3px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.05));
  border-radius:999px;
}

.update-entry{
  position: relative;
  margin: 0 0 2rem;
}

.update-entry::before{
  content:"";
  position:absolute;
  left:-42px;
  top:34px;
  width:16px; height:16px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--accent), #a9f7ff);
  box-shadow: 0 0 0 5px rgba(79,246,255,.18), 0 10px 25px rgba(0,0,0,.25);
}
.update-entry{
  padding: 1.6rem 1.6rem 1.3rem;
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
  backdrop-filter: blur(7px);
  transition: transform .15s ease, box-shadow .15s ease;
}

.update-entry:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 65px rgba(0,0,0,.36);
}

.update-meta{
  display:flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .8rem 0 1rem;
}

.update-meta span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.88);
  font-weight: 700;
  font-size: .92rem;
}

.chip.build{
  background: linear-gradient(180deg, rgba(79,246,255,.35), rgba(0,0,0,.18));
  border-color: rgba(79,246,255,.35);
}
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.show{
  opacity: 1;
  transform: translateY(0);
}



/* -----------------------------
   Responsive
----------------------------- */
@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
  .media-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .dev-gallery{ grid-template-columns: 1fr; }
  .dev-gallery img{ height: auto; }
  .dev-gallery .thumb video.inline-video{ height: auto; }
}

@media (max-width: 640px){
  .lightbox-content{ grid-template-columns: 36px 1fr 36px; }
  .lb-btn{ width:36px; height:36px; font-size:18px; }
  .lb-close{ top:-48px; width:36px; height:36px; font-size:18px; }

  .modal__panel{ margin: 4vh auto; padding: 10px; }
}

@media (max-width: 600px){
  .main-logo{ max-width: 300px; }
}

/* ===============================
   Class Panel Particles (per class)
================================ */

.class-panel{
  position: relative;
}

/* Particle layer sits ABOVE panel background */
.panel-particles{
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* keep your content above the particles */
.class-art,
.class-info{
  position: relative;
  z-index: 2;
}

/* individual particles */
.panel-particles .p{
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;

  /* match the class colour */
  background: color-mix(in srgb, var(--class) 85%, white);

  /* glow */
  box-shadow:
    0 0 10px color-mix(in srgb, var(--class) 65%, transparent),
    0 0 26px color-mix(in srgb, var(--class) 35%, transparent);

  opacity: 0;
  transform: translateY(60px);
  animation: panelSpark 4.8s linear infinite;
}

@keyframes panelSpark{
  0%   { transform: translateY(70px) scale(.6); opacity: 0; }
  15%  { opacity: .75; }
  70%  { opacity: .45; }
  100% { transform: translateY(-320px) scale(1.1); opacity: 0; }
}

/* random positions / sizes / speed */
.panel-particles .p:nth-child(1){ left: 10%; top: 92%; animation-duration: 4.2s; animation-delay: -1.0s; }
.panel-particles .p:nth-child(2){ left: 20%; top: 98%; animation-duration: 5.5s; animation-delay: -2.8s; width:9px; height:9px; }
.panel-particles .p:nth-child(3){ left: 32%; top: 86%; animation-duration: 4.7s; animation-delay: -1.8s; width:5px; height:5px; }
.panel-particles .p:nth-child(4){ left: 42%; top: 99%; animation-duration: 6.1s; animation-delay: -3.9s; width:4px; height:4px; }
.panel-particles .p:nth-child(5){ left: 52%; top: 88%; animation-duration: 5.0s; animation-delay: -2.0s; }
.panel-particles .p:nth-child(6){ left: 60%; top: 95%; animation-duration: 4.4s; animation-delay: -3.1s; width:6px; height:6px; }
.panel-particles .p:nth-child(7){ left: 68%; top: 90%; animation-duration: 6.4s; animation-delay: -4.0s; width:10px; height:10px; opacity:.55; }
.panel-particles .p:nth-child(8){ left: 76%; top: 98%; animation-duration: 5.2s; animation-delay: -2.3s; }
.panel-particles .p:nth-child(9){ left: 84%; top: 92%; animation-duration: 4.0s; animation-delay: -1.4s; width:4px; height:4px; }
.panel-particles .p:nth-child(10){ left: 92%; top: 96%; animation-duration: 5.9s; animation-delay: -3.2s; }
.panel-particles .p:nth-child(11){ left: 14%; top: 84%; animation-duration: 6.0s; animation-delay: -4.7s; width:4px; height:4px; }
.panel-particles .p:nth-child(12){ left: 88%; top: 82%; animation-duration: 4.6s; animation-delay: -2.6s; width:5px; height:5px; }



/* ===============================
   Toast Notification
================================ */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(20px);
  z-index: 20000;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.22);
  color: rgba(246,251,255,.96);

  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast__icon{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;

  background: linear-gradient(180deg, var(--accent), #a9f7ff);
  color: #0c2f7a;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(79,246,255,.35);
}

.toast__text{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
}

/* optional “error” styling */
.toast.error .toast__icon{
  background: linear-gradient(180deg, #ff6b6b, #ffd1d1);
  color: #3a0b0b;
  box-shadow: 0 8px 18px rgba(255,107,107,.30);
}
.hidden { display: none; }

/* ===============================
   AUTH (Signup / Login) — SCOPED
   Premium, readable, no site clashes
================================ */

.auth-page{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  color: #0b1b3a; /* override site white text */
}

@media (max-width: 980px){
  .auth-page{ grid-template-columns: 1fr; }
  .auth-right{ display:none; }
}

/* ---------- LEFT SIDE ---------- */

.auth-left{
  padding: clamp(18px, 3vw, 36px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.auth-card{
  width: min(680px, 100%);
  background: rgba(255,255,255,0.92);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 34px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
  color: #0b1b3a;
}

.auth-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 18px;
}

.auth-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color: inherit;
}
.auth-brand img{
  height:42px;
}

/* Titles */
.auth-title{
  text-align:center;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  margin: 8px 0 6px;
}

.auth-subtitle{
  text-align:center;
  font-size: 13px;
  color: rgba(11,27,58,.72);
  margin-bottom: 14px;
}

/* Steps */
.step{ display:none; }
.step.active{ display:block; }

/* ---------- ROLE SELECTION (Blooket-style) ---------- */

.auth-page .role-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 18px 0 10px;
}
@media (max-width:520px){
  .auth-page .role-grid{ grid-template-columns:1fr; }
}

.auth-page .role{
  position: relative;
  padding: 28px 22px 22px;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  user-select: none;

  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(255,255,255,.96),
      rgba(245,248,255,.93) 55%,
      rgba(235,242,255,.90) 100%);
  border: 2px solid rgba(20,55,120,.18);

  box-shadow:
    0 16px 34px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.85);

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.auth-page .role:hover{
  transform: translateY(-4px);
  box-shadow:
    0 22px 44px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.auth-page .role img{
  width: 200px;
  height: 200px;
  margin: 6px auto 14px;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.18))
    drop-shadow(0 0 18px rgba(42,123,255,.18));
}

.auth-page .role .label{
  font-size: 22px;
  font-weight: 900;
}

.auth-page .role .desc{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(11,27,58,.72);
}

/* Selected */
.auth-page .role.selected{
  border-color: rgba(0,140,255,.95);
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 26px 56px rgba(0,140,255,.18),
    0 18px 40px rgba(0,0,0,.14);
}

.auth-page .role.selected::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:22px;
  border:3px solid rgba(0,140,255,.35);
}

/* ---------- ACTION BUTTONS ---------- */

.actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top: 12px;
}

.auth-page .btn{
  min-width: 210px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
}

.auth-page .btn.primary{
  background: rgba(0,140,255,.92);
  color: white;
}

.auth-page .btn.secondary{
  background: rgba(0,0,0,.08);
  color: #0b1b3a;
}

.auth-page .btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ---------- AGE GATE ---------- */

.age-box{
  margin: 18px auto 8px;
  max-width: 520px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(0,0,0,.10);
}

.age-row{
  display:flex;
  gap:12px;
  margin-top:6px;
}
.age-row label{
  font-weight:800;
}

.age-note,
.fineprint{
  font-size:12px;
  color: rgba(11,27,58,.6);
  text-align:center;
  margin-top:10px;
}

/* ---------- RIGHT SIDE (GEM PANEL) ---------- */

.auth-right{
  position:relative;
  background: linear-gradient(135deg, rgba(0,180,255,.9), rgba(0,110,255,.9));
  overflow:hidden;
}

.auth-right::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image: url("assets/signup_pattern.png");
  background-size: 380px 380px;
  opacity:.16;
  transform: rotate(-8deg);
}

.right-inner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:white;
  text-align:center;
}

.right-hero{
  width: min(420px, 85%);
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.25));
  border-radius:18px;
}

.right-tagline{
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight:900;
}
/* ===== AUTH: NO-SCROLL TUNING ===== */

/* Lock auth page to viewport */
.auth-page{
  height: 100vh;
  overflow: hidden;
}

/* Center card vertically without overflow */
.auth-left{
  align-items: center;
}

/* Slightly shorter card */
.auth-card{
  padding: 24px;
}

/* Reduce vertical spacing */
.auth-title{
  margin: 4px 0 4px;
}

.auth-subtitle{
  margin-bottom: 10px;
}

/* Tighter role grid */
.auth-page .role-grid{
  gap: 14px;
  margin: 14px 0 6px;
}

/* Smaller premium icons (still big) */
.auth-page .role img{
  width: 200px;
  height: 175px;
  margin: 4px auto 10px;
}

/* Reduce card padding */
.auth-page .role{
  padding: 20px 18px 18px;
}

/* Slightly smaller labels */
.auth-page .role .label{
  font-size: 20px;
}

.auth-page .role .desc{
  font-size: 13px;
  margin-top: 6px;
}

/* Buttons tighter */
.actions{
  margin-top: 8px;
}

.auth-page .btn{
  padding: 11px 14px;
}

/* Footer note tighter */
.fineprint{
  margin-top: 10px;
}


/* ===== Auth header mini buttons (Back / Log in) ===== */
.ghost-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(11,27,58,.95);   /* auth page uses dark text */
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.ghost-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.32);
}

.ghost-link.subtle{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.10);
  color: rgba(11,27,58,.82);
}

/* ===============================
   FOR SCHOOLS TRUST SECTION
================================ */
.for-schools {
  margin-top: var(--section-gap);
}

.schools-inner {
  padding: var(--card-pad) 28px;
  border-radius: var(--radius);
  border: 2px solid rgba(255,255,255,.20);
  background: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(79,246,255,.08) 100%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.schools-title {
  font-family: 'TitanOne', system-ui, sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  color: #fff;
  -webkit-text-stroke: 5px rgba(20,55,120,0.75);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(10,35,85,0.30), 0 8px 18px rgba(0,0,0,0.18);
  margin: 0 0 10px;
}

.schools-lead {
  color: rgba(246,251,255,.88);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 640px;
}

.schools-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 640px) {
  .schools-list { grid-template-columns: 1fr; }
}

.schools-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(246,251,255,.90);
}

.schools-list li strong { color: #fff; }

.sl-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}

.schools-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===============================
   IMPROVED FOOTER
================================ */
.footer {
  text-align: center;
  padding: 28px 18px 40px;
  color: rgba(246,251,255,.70);
  font-size: 13px;
  font-weight: 800;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.footer-links a {
  color: rgba(246,251,255,.80);
  font-weight: 900;
  transition: color .12s;
}
.footer-links a:hover { color: #fff; text-decoration: none; }

.footer-sep { color: rgba(246,251,255,.35); }

/* ===============================
   ACCESSIBILITY: FOCUS STATES
   Visible outline for all interactive elements
================================ */
:focus-visible {
  outline: 3px solid rgba(79,246,255,0.85);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove outline for mouse users only */
:focus:not(:focus-visible) {
  outline: none;
}

/* Make sure buttons and links have clear focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(79,246,255,0.85);
  outline-offset: 3px;
}

/* Class tabs keyboard focus */
.class-tab:focus-visible {
  outline: 3px solid rgba(79,246,255,0.85);
  outline-offset: 2px;
}

/* Role cards on signup */
.role:focus-visible {
  outline: 3px solid rgba(0,140,255,0.85);
  outline-offset: 2px;
  border-radius: 20px;
}

/* ===============================
   PRINT STYLESHEET
   Makes Privacy, Terms, Credits
   readable when printed by schools
================================ */
@media print {
  /* Force white background, black text */
  html {
    background: #fff !important;
    background-attachment: initial !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  /* Remove decorative backgrounds */
  body::before,
  body::after { display: none !important; }

  /* Make legal cards plain white */
  .legal-card,
  .highlight-box,
  .credit-card,
  .original-section,
  .contact-card,
  .response-box,
  .school-cta {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #000 !important;
  }

  /* Fix headings */
  .legal-header h1,
  .legal-card h2,
  .credit-name,
  .contact-card-title {
    color: #000 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }

  /* Fix body text */
  .legal-card p,
  .legal-card li,
  .credit-desc,
  .credit-role,
  .original-list li,
  .contact-card-desc,
  .response-box-text,
  .school-cta-desc {
    color: #333 !important;
  }

  /* Make links visible */
  a { color: #0055cc !important; }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }
  /* Don't show href for anchor links or mailto */
  a[href^="#"]::after,
  a[href^="mailto"]::after { content: ""; }

  /* Hide nav, back buttons, footer */
  .back-nav,
  .back-link,
  footer,
  .main-nav,
  .site-hero,
  .for-schools .schools-actions { display: none !important; }

  /* Avoid page breaks inside cards */
  .legal-card,
  .credit-card,
  .contact-card { page-break-inside: avoid; }

  /* Add page URL at bottom */
  @page {
    margin: 1.5cm;
  }
}