/* Arcanum Nexus — /test/ redesign theme
 * Палітра, дервована з brand-іконки `arcanum-a.png` (8-bit «А» на purple-glow):
 * domінант — глибокий королівський фіолетовий + magenta glow, без cyan-acentу.
 * Дрібнопіксельні відтінки для контурів і depth-edge-ів зробив явними змінними.
 */
:root{
  /* surface — глибший і трохи холодніший за legacy, щоб violet glow ловив око */
  --bg-0:         #0a0418;
  --bg-1:         #100624;
  --bg-2:         #1c0a3a;
  --surface:      rgba(28, 10, 58, 0.85);
  --surface-2:    rgba(48, 18, 92, 0.55);
  --border:       rgba(168, 92, 224, 0.28);
  --border-hi:    rgba(196, 120, 240, 0.60);

  /* brand — три рівні «А»-фіолетового з самої іконки + magenta-glow rim */
  --violet-dk:    #5b1a8f;   /* тінь літери */
  --violet:       #7d2eb6;   /* основа літери */
  --violet-2:     #a65cf0;   /* highlight grain */
  --violet-3:     #d4a0ff;   /* face contour bevel */
  --magenta:      #ff4fd8;   /* rim glow */
  --magenta-dim:  #b03686;
  --gold:         #ffd27a;
  --ink:          #110422;   /* black-pixel outline на самій літері */

  /* text */
  --fg:           #f4ebff;
  --fg-mute:      #c4b3e0;
  --fg-dim:       #806a9c;

  /* status */
  --ok:           #84e1a3;
  --warn:         #ffb347;
  --err:          #ff6b7a;

  /* geometry */
  --r-s:  8px;
  --r-m:  14px;
  --r-l:  22px;
  --shadow-card:  0 10px 40px rgba(0,0,0,.60), 0 0 0 1px var(--border);
  --shadow-hi:    0 14px 50px rgba(125,46,182,.45), 0 0 0 1px var(--border-hi);
  --shadow-glow:  0 0 30px rgba(255, 79, 216, .35);
}

*,*::before,*::after{ box-sizing: border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  background:
    radial-gradient(55% 45% at 18% 0%,  rgba(125,46,182,.32), transparent 65%),
    radial-gradient(50% 40% at 82% 8%,  rgba(255,79,216,.22), transparent 70%),
    radial-gradient(70% 55% at 50% 100%, rgba(91,26,143,.28), transparent 72%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 72%, #060212 100%);
  background-attachment: fixed;
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--violet-2); text-decoration: none }
a:hover{ color: var(--magenta) }

/* ── Top bar ─────────────────────────────────────────── */
.t-topbar{
  position: sticky; top: 0; z-index: 80;
  background: linear-gradient(180deg, rgba(11,7,20,.92), rgba(11,7,20,.78));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.t-topbar__inner{
  max-width: 1240px; margin: 0 auto;
  padding: 12px 22px;
  display: flex; align-items: center; gap: 22px;
}
.t-brand{
  display: flex; align-items: center; gap: 12px;
  color: var(--fg); text-decoration: none;
  flex: 0 0 auto;
}
.t-brand__logo{
  width: 38px; height: 38px;
  filter: drop-shadow(0 4px 12px rgba(124,44,255,.55));
}
.t-brand__title{
  font-family: 'Cinzel', Georgia, serif;
  font-size: 18px; font-weight: 600;
  letter-spacing: .03em;
  background: linear-gradient(120deg, var(--violet-3), var(--violet-2) 35%, var(--magenta));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.t-nav{
  display: flex; align-items: center; gap: 4px;
  flex: 1 1 auto;
  margin-left: 14px;
}
.t-nav__item{
  /* Reset button defaults — browsers paint <button> light-grey otherwise,
     which made "Світи" look bleached on mobile/Safari. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-decoration: none;
  position: relative;
  padding: 9px 14px; border-radius: 10px;
  color: var(--fg-mute); font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s, transform .12s;
  display: inline-flex; align-items: center; gap: 7px;
}
.t-nav__item:hover,
.t-nav__item[aria-expanded="true"]{
  /* Server brand colour — soft violet glow, NOT bleached white. Gradient text
     matches splash/h1 style so nav harmonises with the rest of the site. */
  background: linear-gradient(135deg, rgba(125,46,182,.18), rgba(255,79,216,.08));
  color: var(--violet-3);
  box-shadow: inset 0 -2px 0 rgba(255,79,216,.45);
}
.t-nav__item:active{ transform: scale(.96) }
.t-nav__item--active{
  background: linear-gradient(135deg, rgba(125,46,182,.28), rgba(255,79,216,.14));
  color: var(--violet-3);
  box-shadow: inset 0 -2px 0 var(--magenta);
}
/* Subtle gradient sweep on the active tab — keeps "Світи" feeling like
   it belongs to the same magical palette as the splash hero. */
.t-nav__item--active::before{
  content:""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(255,210,122,.10), transparent);
  pointer-events: none;
}
.t-nav__chevron{
  width: 10px; height: 10px; opacity: .7;
  transition: transform .15s;
}
.t-nav__item[aria-expanded="true"] .t-nav__chevron{ transform: rotate(180deg) }

.t-badge{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 99px;
  background: var(--err); color: white;
  font: 700 11px Inter, sans-serif;
}
/* Defensive — ensure `hidden` attribute wins over `display: inline-flex` */
.t-badge[hidden],
[hidden]{ display: none !important }

/* ── Per-page body backgrounds ── varies the radial-gradient blobs
   so different sections feel like different places. */
body[data-page="launcher"]{
  background:
    radial-gradient(45% 35% at 18% 0%,  rgba(255, 79, 216, .28), transparent 60%),
    radial-gradient(50% 40% at 82% 12%, rgba(125, 46, 182, .32), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(255, 179, 71, .14), transparent 75%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 70%, #060212 100%);
  background-attachment: fixed;
}
body[data-page="worlds-vs"]{
  background:
    radial-gradient(60% 45% at 18% 8%, rgba(255, 210, 122, .14), transparent 70%),
    radial-gradient(50% 40% at 82% 14%, rgba(124, 58, 237, .25), transparent 70%),
    radial-gradient(70% 55% at 50% 100%, rgba(91, 26, 143, .30), transparent 72%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 72%, #060212 100%);
  background-attachment: fixed;
}
body[data-page="cabinet"]{
  background:
    radial-gradient(55% 45% at 0% 0%, rgba(168, 85, 247, .26), transparent 65%),
    radial-gradient(45% 40% at 100% 30%, rgba(255, 79, 216, .18), transparent 70%),
    radial-gradient(70% 60% at 30% 100%, rgba(91, 26, 143, .28), transparent 72%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 72%, #060212 100%);
  background-attachment: fixed;
}
body[data-page="reindev-wiki"]{
  background:
    radial-gradient(50% 40% at 20% 0%, rgba(255, 107, 107, .12), transparent 65%),
    radial-gradient(45% 40% at 80% 15%, rgba(168, 85, 247, .22), transparent 70%),
    radial-gradient(70% 55% at 50% 100%, rgba(11, 7, 20, .50), transparent 75%),
    linear-gradient(180deg, var(--bg-1) 0%, #0a0418 72%, #060212 100%);
  background-attachment: fixed;
}
body[data-page="mods"]{
  background:
    radial-gradient(50% 40% at 80% 0%, rgba(132, 225, 163, .12), transparent 65%),
    radial-gradient(45% 40% at 20% 18%, rgba(168, 85, 247, .25), transparent 70%),
    radial-gradient(70% 55% at 50% 100%, rgba(91, 26, 143, .26), transparent 72%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 72%, #060212 100%);
  background-attachment: fixed;
}

/* Subtle floating glow — adds depth across all pages */
body::after{
  content:'';
  position: fixed; inset: -10%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(30% 25% at 70% 30%, rgba(255, 79, 216, .06), transparent 65%),
    radial-gradient(35% 30% at 20% 70%, rgba(168, 85, 247, .06), transparent 65%);
  animation: floatGlow 28s ease-in-out infinite alternate;
}
@keyframes floatGlow{
  0%   { transform: translate(0, 0) }
  100% { transform: translate(-3%, 2%) }
}
.t-shell, .t-topbar, .w-head, .w-shell, .w-foot, .w-hero, .c-shell{ position: relative; z-index: 1 }

/* dropdown panel under "Світи" */
.t-dropdown{
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 280px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--border-hi);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  padding: 8px;
  display: none;
}
.t-nav__item[aria-expanded="true"] + .t-dropdown{ display: block }
.t-dropdown__link{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
}
.t-dropdown__link:hover{ background: rgba(124,44,255,.14) }
.t-dropdown__title{ flex: 1 1 auto; font-size: 14px; font-weight: 600 }
.t-dropdown__meta{ font-size: 12px; color: var(--fg-mute); display: flex; align-items: center; gap: 6px }

/* status dot */
.t-dot{
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
  background: var(--fg-dim);
  box-shadow: 0 0 0 2px rgba(0,0,0,.4);
  flex: 0 0 auto;
}
.t-dot--ok{   background: var(--ok);   box-shadow: 0 0 8px rgba(132,225,163,.7), 0 0 0 2px rgba(0,0,0,.4) }
.t-dot--warn{ background: var(--warn); box-shadow: 0 0 8px rgba(255,179,71,.7), 0 0 0 2px rgba(0,0,0,.4) }
.t-dot--err{  background: var(--err);  box-shadow: 0 0 8px rgba(255,107,122,.7), 0 0 0 2px rgba(0,0,0,.4) }

/* right-side toolbar (messenger, cabinet, discord) */
.t-tools{
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.t-tool{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(124,44,255,.08);
  border: 1px solid var(--border);
  color: var(--fg-mute);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .08s;
  position: relative;
}
.t-tool:hover{ background: rgba(124,44,255,.18); color: var(--fg); border-color: var(--border-hi) }
.t-tool:active{ transform: scale(.95) }
.t-tool svg{ width: 18px; height: 18px }
.t-tool--discord:hover{ background: rgba(88,101,242,.22); color: #c4cefa; border-color: rgba(88,101,242,.55) }

.t-cabinet{
  display: inline-flex; align-items: center;
  border-radius: 10px;
  background: rgba(124,44,255,.10);
  border: 1px solid var(--border);
  overflow: hidden;
}
/* Simple variant — no MC/VS sub-toggle (moved into cabinet page itself) */
.t-cabinet--simple{
  text-decoration: none;
  padding: 0 14px;
  height: 38px;
  color: var(--fg);
  font: 600 13px Inter, sans-serif;
  gap: 8px;
  transition: background .15s, border-color .15s;
}
.t-cabinet--simple:hover{
  background: rgba(124,44,255,.20);
  border-color: var(--border-hi);
  color: var(--fg);
}

/* ── iPhone-style toggle (used inside /test/cabinet/) ── */
.c-modeswitch{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 14px 8px 16px;
  background: rgba(11,7,20,.55);
  border: 1px solid var(--border);
  border-radius: 99px;
}
.c-modeswitch__label{
  font: 600 13px Inter, sans-serif;
  color: var(--fg-mute);
  letter-spacing: .02em;
  transition: color .25s;
}
.c-modeswitch__label--on{ color: var(--fg) }
.c-modeswitch__track{
  position: relative;
  width: 56px; height: 30px;
  border-radius: 99px;
  background: linear-gradient(135deg, #5a9f30, #84d850);
  cursor: pointer;
  transition: background .35s cubic-bezier(.22,.9,.32,1);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.4),
    0 2px 8px rgba(132,225,163,.30);
}
.c-modeswitch__track[data-on="vs"]{
  background: linear-gradient(135deg, #5b21b6, #c89fff);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.4),
    0 2px 14px rgba(168,85,247,.42);
}
.c-modeswitch__knob{
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  background: linear-gradient(180deg, #ffffff, #e6dbff);
  border-radius: 99px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:
    transform .35s cubic-bezier(.22,.9,.32,1),
    background .35s;
  display: flex; align-items: center; justify-content: center;
  font: 700 11px 'JetBrains Mono', monospace;
  color: #2a1145;
}
.c-modeswitch__track[data-on="vs"] .c-modeswitch__knob{
  transform: translateX(26px);
}
.c-modeswitch__hint{
  font: 500 11px 'JetBrains Mono', monospace;
  color: var(--fg-dim);
  margin-left: 4px;
  letter-spacing: .04em;
}
.t-cabinet__main{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 38px;
  color: var(--fg);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.t-cabinet__main:hover{ background: rgba(124,44,255,.18) }
.t-cabinet__switch{
  display: flex; align-items: center;
  height: 38px;
  border-left: 1px solid var(--border);
  background: rgba(0,0,0,.18);
}
.t-cabinet__opt{
  width: 32px; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: .45;
  transition: opacity .15s, background .15s;
}
.t-cabinet__opt[aria-pressed="true"]{
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,79,216,.22), rgba(124,44,255,.10));
}
.t-cabinet__opt:hover{ opacity: .9 }
.t-cabinet__opt img{ width: 18px; height: 18px; image-rendering: pixelated }

/* ── Page shell ──────────────────────────────────────── */
.t-shell{
  max-width: 1240px; margin: 0 auto;
  padding: 36px 22px 90px;
}
.t-hero{
  text-align: center;
  margin: 8px 0 40px;
  position: relative;
}
.t-hero__sigil{
  display: block;
  margin: 0 auto 18px;
  width: 120px; height: 120px;
  filter:
    drop-shadow(0 0 20px rgba(255, 79, 216, .55))
    drop-shadow(0 0 60px rgba(125, 46, 182, .45));
  image-rendering: auto;
  animation: sigil-pulse 6s ease-in-out infinite;
}
@keyframes sigil-pulse{
  0%, 100%{ filter: drop-shadow(0 0 20px rgba(255,79,216,.45)) drop-shadow(0 0 60px rgba(125,46,182,.35)) }
  50%     { filter: drop-shadow(0 0 30px rgba(255,79,216,.75)) drop-shadow(0 0 90px rgba(125,46,182,.60)) }
}
.t-hero h1{
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: .02em;
  background: linear-gradient(120deg, var(--violet-3), var(--violet-2) 40%, var(--magenta));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.t-hero p{
  max-width: 720px; margin: 0 auto;
  color: var(--fg-mute); font-size: 16px; line-height: 1.65;
}

/* ── World cards (homepage) ──────────────────────────── */
.t-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 22px;
}
.t-card{
  position: relative;
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  min-height: 380px;
  text-decoration: none;
  color: var(--fg);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.t-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hi);
  border-color: var(--border-hi);
}
.t-card__art{
  position: relative;
  height: 190px;
  background: var(--bg-2);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.t-card__art img,
.t-card__art svg{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.t-card__art::after{
  content:'';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,7,20,.85));
}
.t-card__badge{
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  background: rgba(11,7,20,.75); backdrop-filter: blur(6px);
  border: 1px solid var(--border-hi);
  border-radius: 99px;
  font-size: 12px; font-weight: 600;
  color: var(--fg);
}
.t-card__body{
  padding: 20px 22px 22px;
  flex: 1 1 auto;
  display: flex; flex-direction: column;
}
.t-card__title{
  font-family: 'Cinzel', Georgia, serif;
  font-size: 24px; font-weight: 600;
  margin: 0 0 8px;
  color: var(--fg);
}
.t-card__sub{
  color: var(--fg-mute); font-size: 14px; line-height: 1.6;
  margin: 0 0 16px;
  flex: 1 1 auto;
}
.t-card__meta{
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--fg-mute);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.t-card__meta strong{ color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums }
.t-card__cta{
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--violet-2);
}
.t-card:hover .t-card__cta{ color: var(--magenta) }
.t-card__cta svg{ width: 14px; height: 14px; transition: transform .15s }
.t-card:hover .t-card__cta svg{ transform: translateX(3px) }

/* ── Generic content blocks ──────────────────────────── */
.t-section{
  margin: 50px 0 0;
}
.t-section__head{
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 18px;
}
.t-section__head h2{
  font-family: 'Cinzel', Georgia, serif;
  font-size: 22px; font-weight: 600;
  margin: 0; color: var(--fg);
}
.t-section__head a{ font-size: 13px; color: var(--fg-mute) }
.t-section__head a:hover{ color: var(--magenta) }

.t-prose{
  color: var(--fg);
  line-height: 1.75;
  font-size: 15.5px;
}
.t-prose h2{
  font-family: 'Cinzel', Georgia, serif;
  font-size: 22px; margin: 32px 0 12px;
  color: var(--fg);
}
.t-prose h3{
  font-family: 'Cinzel', Georgia, serif;
  font-size: 18px; margin: 22px 0 10px;
  color: var(--violet-3);
}
.t-prose p{ margin: 0 0 14px; color: var(--fg) }
.t-prose ul{ padding-left: 22px; margin: 0 0 14px }
.t-prose li{ margin-bottom: 6px; color: var(--fg) }
.t-prose code{
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: .92em;
  background: rgba(255,255,255,.06);
  padding: 2px 6px; border-radius: 5px;
  color: var(--gold);
}

/* buttons */
.t-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 12px;
  font: 600 14px Inter, sans-serif;
  cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, transform .08s, box-shadow .15s;
}
.t-btn--primary{
  background: linear-gradient(135deg, var(--violet) 0%, var(--magenta) 100%);
  color: white;
  box-shadow: 0 10px 28px rgba(124,44,255,.45);
}
.t-btn--primary:hover{ box-shadow: 0 14px 36px rgba(255,79,216,.55) }
.t-btn--primary:active{ transform: scale(.97) }
.t-btn--ghost{
  background: rgba(124,44,255,.10);
  border-color: var(--border-hi);
  color: var(--fg);
}
.t-btn--ghost:hover{ background: rgba(124,44,255,.22) }

/* footer */
.t-footer{
  margin-top: 80px;
  border-top: 1px solid var(--border);
  padding: 30px 22px 50px;
  text-align: center;
  color: var(--fg-mute);
  font-size: 13px;
}
.t-footer a{ color: var(--fg-mute); margin: 0 8px }
.t-footer a:hover{ color: var(--magenta) }

/* mobile */
@media (max-width: 720px){
  .t-topbar__inner{ flex-wrap: wrap; gap: 12px }
  .t-nav{ order: 3; margin-left: 0; width: 100%; overflow-x: auto; padding-bottom: 4px }
  .t-tools{ margin-left: auto }
  .t-hero h1{ font-size: 32px }
  .t-card{ min-height: 320px }
}


/* ═══════════════════════════════════════════════════════════════════ */
/* ─── MAGIC LAYER ── Stardust + shimmer + animations ─────────────────  */
/* Перенесено з основного сайту /assets/css/style.css щоб test-          */
/* і основний site відчувалися як одна мережа. Stardust — fixed         */
/* background-overlay із зірками + twinkle. Shimmer — на heading        */
/* gradient. Float — для cards.                                          */
/* ═══════════════════════════════════════════════════════════════════ */

.t-stardust{
  position: fixed; inset: 0;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(103,24,140,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(168,85,247,.20) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(255,179,71,.08) 0%, transparent 55%);
}
.t-stardust::before{
  content:""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff 1px, transparent 1.5px),
    radial-gradient(1px 1px at 28% 65%, #d6c1ff 1px, transparent 1.5px),
    radial-gradient(1px 1px at 47% 14%, #fff 1px, transparent 1.5px),
    radial-gradient(1.5px 1.5px at 63% 78%, #ffd27a 1px, transparent 2px),
    radial-gradient(1px 1px at 81% 36%, #fff 1px, transparent 1.5px),
    radial-gradient(1px 1px at 91% 88%, #c89fff 1px, transparent 1.5px),
    radial-gradient(1.5px 1.5px at 9% 80%, #fff 1px, transparent 2px),
    radial-gradient(1px 1px at 35% 92%, #d6c1ff 1px, transparent 1.5px),
    radial-gradient(1px 1px at 55% 50%, #fff 1px, transparent 1.5px),
    radial-gradient(1px 1px at 72% 8%, #c89fff 1px, transparent 1.5px);
  opacity: .75;
  animation: t-twinkle 8s ease-in-out infinite alternate;
}
@keyframes t-twinkle { from{opacity:.45} to{opacity:.9} }

/* Slow drifting particle layer — gives "mist" feel */
.t-stardust::after{
  content:""; position: absolute; inset: -10%;
  background:
    radial-gradient(2px 2px at 30% 40%, rgba(255,79,216,.35), transparent 60%),
    radial-gradient(3px 3px at 70% 60%, rgba(168,85,247,.30), transparent 60%),
    radial-gradient(2px 2px at 90% 20%, rgba(255,210,122,.25), transparent 60%);
  filter: blur(40px);
  animation: t-drift 32s ease-in-out infinite alternate;
}
@keyframes t-drift {
  0%   { transform: translate(0, 0) rotate(0deg) }
  100% { transform: translate(-2%, 2%) rotate(4deg) }
}

/* Reuse existing body::after, but make it more vibrant on hero pages */
body[data-page="home"],
body[data-page="launcher"],
body[data-page="worlds-vs"] {
  background-attachment: fixed;
}

/* ─── Hero h1 — shimmer gradient (style-card-magic) ─────────────── */
.t-hero h1{
  background: linear-gradient(120deg,
    var(--violet-3) 0%,
    var(--violet-2) 25%,
    var(--magenta) 50%,
    var(--gold) 75%,
    var(--violet-3) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: t-shimmer 9s linear infinite;
}
@keyframes t-shimmer { 0%{ background-position: 0% 50% } 100%{ background-position: 200% 50% } }

/* Hero sigil — gentler pulse + parallax floating */
.t-hero__sigil{
  animation:
    sigil-pulse 6s ease-in-out infinite,
    t-float 7s ease-in-out infinite alternate;
}
@keyframes t-float {
  0%   { transform: translateY(0px) }
  100% { transform: translateY(-8px) }
}

/* ─── Card grid: fade-in on page load + hover lift ─── */
.t-card-grid{ perspective: 1000px }
.t-card{
  animation: t-cardin .65s cubic-bezier(.22,.9,.32,1) backwards;
  position: relative;
  isolation: isolate;
}
.t-card:nth-child(1){ animation-delay: .05s }
.t-card:nth-child(2){ animation-delay: .15s }
.t-card:nth-child(3){ animation-delay: .25s }
.t-card:nth-child(4){ animation-delay: .35s }
@keyframes t-cardin {
  from { opacity: 0; transform: translateY(28px) rotateX(4deg) }
  to   { opacity: 1; transform: translateY(0) rotateX(0deg) }
}

/* Hatching pattern overlay on card art — borrowed from splash */
.t-card__art::before{
  content:""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 22px,
      rgba(255,255,255,.020) 22px, rgba(255,255,255,.020) 23px);
  pointer-events: none;
  z-index: 1;
}

/* CTA arrow micro-animation */
.t-card__cta svg{
  transition: transform .28s cubic-bezier(.22,.9,.32,1);
}
.t-card:hover .t-card__cta svg{
  transform: translateX(5px);
}
.t-card__cta{
  transition: color .2s, gap .2s;
}
.t-card:hover .t-card__cta{ color: var(--magenta); gap: 10px }

/* Smooth hover lift + glow */
.t-card{ transition:
  transform .25s cubic-bezier(.22,.9,.32,1),
  box-shadow .35s,
  border-color .25s;
}
.t-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 24px 60px rgba(125, 46, 182, .42),
    0 0 0 1px var(--border-hi);
}

/* ─── Reveal-on-scroll utility (added by main.js inline) ── */
.t-reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.9,.32,1);
}
.t-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ─── Buttons — gradient sheen on hover ─── */
.t-btn--primary{
  position: relative;
  overflow: hidden;
}
.t-btn--primary::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.18) 40%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,.18) 60%,
    transparent 100%);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform .8s;
}
.t-btn--primary:hover::after{ transform: translateX(120%) skewX(-15deg) }

/* ─── Section reveal — fade up on scroll ─── */
.t-section{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.9,.32,1);
}
.t-section.is-visible,
.t-section:nth-of-type(1){
  opacity: 1; transform: none;
}

/* ─── Topbar — subtle hue-shift glow on hover ─── */
.t-topbar{ transition: backdrop-filter .3s }
.t-nav__item{ transition: background .18s, color .18s, transform .15s }
.t-nav__item:active{ transform: scale(.96) }

/* Splash-style soft bottom vignette */
body::before{
  content:""; position: fixed;
  left: 0; right: 0; bottom: 0; height: 35vh;
  z-index: -3; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(6,3,12,.55) 100%);
}

/* ─── Improved emphasis text on hero ─── */
.t-hero p em{
  font-style: normal;
  color: var(--gold);
  font-weight: 600;
  text-shadow: 0 0 16px rgba(255,210,122,.35);
}

/* ─── Mobile tweaks ─── */
@media (max-width: 720px){
  .t-stardust::before{ opacity: .55 }
  .t-hero__sigil{ width: 90px; height: 90px }
  .t-card{ animation-duration: .5s }
}