/* SUPER TRINI · THE UNDENIABLE SPARK */

#super-trini {
  --ivory: #f4eee6;
  --paper: #fbf7f1;
  --ink: #1a1220;
  --ink-2: #3d3242;
  --muted: #7a6d76;
  --plum: #1a1023;
  --plum-deep: #120a19;
  --violet: #5b2bb5;
  --lilac: #b9a3de;
  --champagne: #e6d1a0;
  --gold: #c9a45a;
  --hair: rgba(201, 164, 90, 0.32);
  --foil: linear-gradient(115deg, #8a6a2a 0%, #d8bb78 20%, #f7e9c4 34%, #c9a45a 50%, #ecd7a0 66%, #8a6a2a 84%, #d8bb78 100%);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --text: "Newsreader", Georgia, serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;

  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}

#super-trini *, #super-trini *::before, #super-trini *::after { box-sizing: border-box; }
#super-trini img { display: block; max-width: 100%; }
#super-trini a { color: inherit; }
#super-trini p { margin: 0 0 20px; }
#super-trini .st-wrap { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }

#super-trini .st-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--violet);
}

#super-trini .st-h2 {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 78px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
}

#super-trini .st-h2 em,
#super-trini .st-title-trini {
  background: var(--foil);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: st-foil 9s ease-in-out infinite alternate;
}

#super-trini .st-h2 em { font-style: italic; font-weight: 600; }

@keyframes st-foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

#super-trini .st-lede { max-width: 600px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.7; }

/* Buttons */
#super-trini .st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

#super-trini .st-btn-gold { background: var(--champagne); border: 1px solid var(--champagne); color: var(--plum-deep); }
#super-trini .st-btn-gold:hover { background: #f4e6c3; }
#super-trini .st-btn-ghost { background: transparent; border: 1px solid rgba(230, 209, 160, 0.55); color: var(--champagne); }
#super-trini .st-btn-ghost:hover { border-color: var(--champagne); background: rgba(230, 209, 160, 0.08); }
#super-trini .st-btn:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }

/* ---------- HERO ---------- */
#super-trini .st-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 50% 60% at 74% 50%, rgba(230, 209, 160, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 70% at 10% 100%, rgba(91, 43, 181, 0.35), transparent 70%),
    var(--plum);
  color: var(--paper);
}

/* Hairline frame */
#super-trini .st-hero::before {
  content: "";
  position: absolute;
  inset: clamp(12px, 2vw, 24px);
  z-index: -1;
  border: 1px solid var(--hair);
  pointer-events: none;
}

#super-trini .st-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 32px;
  width: min(1180px, calc(100% - 64px));
  min-height: min(92svh, 860px);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) 0;
}

#super-trini .st-hero .st-label { color: var(--champagne); }

#super-trini .st-title { margin: 0; font-family: var(--serif); line-height: 0.86; }
#super-trini .st-title span { display: block; }

#super-trini .st-title-super {
  margin-bottom: 4px;
  font-size: clamp(30px, 4vw, 56px);
  font-style: italic;
  font-weight: 400;
  color: var(--champagne);
}

#super-trini .st-title-trini {
  font-size: clamp(86px, 14vw, 196px);
  font-weight: 700;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

#super-trini .st-tagline {
  margin: 26px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  max-width: 460px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
}

#super-trini .st-hero-sub { max-width: 460px; margin: 0 0 36px; font-size: 18px; line-height: 1.65; color: rgba(251, 247, 241, 0.72); }
#super-trini .st-actions { display: flex; flex-wrap: wrap; gap: 14px; }

#super-trini .st-hero-art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 320px; }
#super-trini .st-hero-art img {
  width: min(430px, 100%);
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(8, 3, 14, 0.55));
  animation: st-float 7s ease-in-out infinite;
}

@keyframes st-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

#super-trini .st-emblem {
  display: grid;
  place-items: center;
  width: min(320px, 80%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--hair);
  box-shadow: 0 0 0 14px rgba(230, 209, 160, 0.04);
}

#super-trini .st-emblem b {
  font-family: var(--serif);
  font-size: clamp(96px, 12vw, 160px);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  color: var(--champagne);
}

/* ---------- POWERS ---------- */
#super-trini .st-powers { padding: clamp(72px, 9vw, 120px) 0 0; }

#super-trini .st-power-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

#super-trini .st-power { padding: 40px clamp(20px, 3vw, 40px) 44px; }
#super-trini .st-power + .st-power { border-left: 1px solid var(--hair); }
#super-trini .st-power:first-child { padding-left: 0; }
#super-trini .st-power:last-child { padding-right: 0; }

#super-trini .st-power-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: var(--gold);
}

#super-trini .st-power h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 30px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
}

#super-trini .st-power p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* ---------- STORY ---------- */
#super-trini .st-story { padding: clamp(88px, 10vw, 140px) 0; scroll-margin-top: 24px; }

#super-trini .st-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}

#super-trini .st-story-copy p { max-width: 580px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.75; color: var(--ink-2); }

#super-trini .st-dropcap::first-letter {
  float: left;
  margin: 8px 14px 0 0;
  font-family: var(--serif);
  font-size: 82px;
  font-weight: 600;
  line-height: 0.8;
  color: var(--violet);
}

#super-trini .st-quote {
  margin: 36px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--hair);
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}

#super-trini .st-quote span { color: var(--violet); }

/* The sealed file */
#super-trini .st-seal {
  max-width: 520px;
  padding: 28px 0 6px;
  border-top: 1px solid var(--hair);
}

#super-trini .st-seal-title { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 30px); font-style: italic; color: var(--ink); }
#super-trini .st-seal-hint { margin: 0 0 22px; }
#super-trini .st-seal-count { display: flex; gap: 18px; margin: 0; font-size: 22px; }
#super-trini .st-dot { color: rgba(26, 18, 32, 0.16); transition: color 400ms ease, text-shadow 400ms ease, transform 400ms ease; }
#super-trini .st-dot.is-found { color: var(--gold); text-shadow: 0 0 14px rgba(201, 164, 90, 0.8); transform: scale(1.15); }

#super-trini .st-secret { display: block; }
#super-trini.st-locked .st-secret { display: none; }
#super-trini:not(.st-locked) .st-seal { display: none; }
#super-trini.st-unlocking .st-secret { animation: st-reveal 1.1s ease both; }
@keyframes st-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

#super-trini .st-file {
  position: relative;
  margin: 0;
  padding: 10px;
  border-radius: 20px;
  background: var(--foil);
  background-size: 200% 200%;
  box-shadow: 0 44px 80px -40px rgba(26, 18, 32, 0.65), 0 0 0 1px rgba(138, 106, 42, 0.5);
  transform: rotate(1.5deg);
  animation: st-foil 9s ease-in-out infinite alternate;
}

#super-trini .st-file::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  background: linear-gradient(160deg, #2a1838 0%, var(--plum) 55%, var(--plum-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(247, 233, 196, 0.35);
}

#super-trini .st-file-photo {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin: 12px 12px 0;
  border-radius: 6px;
  background: var(--plum);
  box-shadow: 0 0 0 1px rgba(247, 233, 196, 0.7), 0 0 0 4px rgba(26, 16, 35, 0.9), 0 0 0 5px rgba(201, 164, 90, 0.6);
}
#super-trini .st-file-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: filter 1.4s ease, transform 1.4s ease;
}
#super-trini.st-locked .st-file-photo img { filter: blur(18px) grayscale(0.5) brightness(0.8); transform: scale(1.12); }

/* Nameplate */
#super-trini .st-card-plate {
  position: relative;
  z-index: 1;
  display: block;
  margin: 16px 12px 12px;
  padding: 14px 16px 13px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(247, 233, 196, 0.1), rgba(247, 233, 196, 0.03));
  box-shadow: inset 0 0 0 1px rgba(230, 209, 160, 0.4);
}

#super-trini .st-card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

#super-trini .st-card-name {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
  background: var(--foil);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#super-trini .st-card-no,
#super-trini .st-card-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 247, 241, 0.6);
}

#super-trini .st-card-sub { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(230, 209, 160, 0.22); }
#super-trini .st-card-rarity { color: var(--champagne); }
#super-trini .st-card-rarity i { font-size: 13px; font-style: normal; letter-spacing: 0.12em; margin-right: 6px; color: #f3dfa6; text-shadow: 0 0 8px rgba(247, 226, 166, 0.6); }

/* ---------- Holo card ---------- */
/* --mx / --my follow the pointer (set in super-trini.js); they rest at the center. */
#super-trini .st-file { --mx: 50%; --my: 35%; transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }

/* Gold sweep across the whole card: travels off one edge, rests, comes back in from the other. Seamless. */
#super-trini .st-holo {
  position: absolute;
  inset: 10px;
  z-index: 2;
  overflow: hidden;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
#super-trini .st-holo::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 214, 0.32) 40%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 246, 214, 0.32) 60%, transparent);
  transform: skewX(-18deg);
  mix-blend-mode: screen;
  animation: st-sweep 3s cubic-bezier(.45, 0, .25, 1) infinite;
}
#super-trini:not(.st-locked) .st-holo { opacity: 1; }
@keyframes st-sweep { 0% { left: -60%; } 55%, 100% { left: 130%; } }

/* Rainbow foil on the photo */
#super-trini .st-file-photo .st-foil,
#super-trini .st-file-photo::after {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}

#super-trini .st-file-photo .st-foil { display: none; }

/* Star glints that flash one at a time */
#super-trini .st-glint {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  pointer-events: none;
  opacity: 0;
}
#super-trini .st-glint::before,
#super-trini .st-glint::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff6d6 30%, #ffffff 50%, #fff6d6 70%, transparent);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 3px rgba(201, 164, 90, 0.95)) drop-shadow(0 0 8px rgba(255, 214, 120, 0.8));
}
#super-trini .st-glint::after { transform: translate(-50%, -50%) rotate(90deg); }
#super-trini:not(.st-locked) .st-glint { animation: st-glint 6.4s ease-in-out infinite; }
#super-trini .st-glints .st-glint:nth-child(1) { left: 22%; top: 18%; animation-delay: 0.0s; width: 37px; height: 37px; margin: -18px 0 0 -18px; }
#super-trini .st-glints .st-glint:nth-child(2) { left: 78%; top: 28%; animation-delay: 0.29s; width: 27px; height: 27px; margin: -13px 0 0 -13px; }
#super-trini .st-glints .st-glint:nth-child(3) { left: 42%; top: 58%; animation-delay: 0.58s; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
#super-trini .st-glints .st-glint:nth-child(4) { left: 88%; top: 74%; animation-delay: 0.87s; width: 34px; height: 34px; margin: -17px 0 0 -17px; }
#super-trini .st-glints .st-glint:nth-child(5) { left: 14%; top: 82%; animation-delay: 1.16s; width: 27px; height: 27px; margin: -13px 0 0 -13px; }
#super-trini .st-glints .st-glint:nth-child(6) { left: 62%; top: 12%; animation-delay: 1.45s; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
#super-trini .st-glints .st-glint:nth-child(7) { left: 30%; top: 40%; animation-delay: 1.75s; width: 24px; height: 24px; margin: -12px 0 0 -12px; }
#super-trini .st-glints .st-glint:nth-child(8) { left: 70%; top: 50%; animation-delay: 2.04s; width: 40px; height: 40px; margin: -20px 0 0 -20px; }
#super-trini .st-glints .st-glint:nth-child(9) { left: 52%; top: 88%; animation-delay: 2.33s; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
#super-trini .st-glints .st-glint:nth-child(10) { left: 8%; top: 30%; animation-delay: 2.62s; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
#super-trini .st-glints .st-glint:nth-child(11) { left: 92%; top: 44%; animation-delay: 2.91s; width: 32px; height: 32px; margin: -16px 0 0 -16px; }
#super-trini .st-glints .st-glint:nth-child(12) { left: 36%; top: 8%; animation-delay: 3.2s; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
#super-trini .st-glints .st-glint:nth-child(13) { left: 58%; top: 72%; animation-delay: 3.49s; width: 36px; height: 36px; margin: -18px 0 0 -18px; }
#super-trini .st-glints .st-glint:nth-child(14) { left: 20%; top: 62%; animation-delay: 3.78s; width: 24px; height: 24px; margin: -12px 0 0 -12px; }
#super-trini .st-glints .st-glint:nth-child(15) { left: 82%; top: 92%; animation-delay: 4.07s; width: 28px; height: 28px; margin: -14px 0 0 -14px; }
#super-trini .st-glints .st-glint:nth-child(16) { left: 48%; top: 30%; animation-delay: 4.36s; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
#super-trini .st-glints .st-glint:nth-child(17) { left: 66%; top: 34%; animation-delay: 4.65s; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
#super-trini .st-glints .st-glint:nth-child(18) { left: 26%; top: 92%; animation-delay: 4.95s; width: 24px; height: 24px; margin: -12px 0 0 -12px; }
#super-trini .st-glints .st-glint:nth-child(19) { left: 90%; top: 14%; animation-delay: 5.24s; width: 28px; height: 28px; margin: -14px 0 0 -14px; }
#super-trini .st-glints .st-glint:nth-child(20) { left: 6%; top: 52%; animation-delay: 5.53s; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
#super-trini .st-glints .st-glint:nth-child(21) { left: 74%; top: 66%; animation-delay: 5.82s; width: 34px; height: 34px; margin: -17px 0 0 -17px; }
#super-trini .st-glints .st-glint:nth-child(22) { left: 40%; top: 78%; animation-delay: 6.11s; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
#super-trini .st-glints-frame .st-glint:nth-child(1) { left: 4%; top: 6%; animation-delay: 0.6s; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
#super-trini .st-glints-frame .st-glint:nth-child(2) { left: 97%; top: 38%; animation-delay: 1.88s; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
#super-trini .st-glints-frame .st-glint:nth-child(3) { left: 3%; top: 70%; animation-delay: 3.16s; width: 24px; height: 24px; margin: -12px 0 0 -12px; }
#super-trini .st-glints-frame .st-glint:nth-child(4) { left: 96%; top: 96%; animation-delay: 4.44s; width: 32px; height: 32px; margin: -16px 0 0 -16px; }
#super-trini .st-glints-frame .st-glint:nth-child(5) { left: 50%; top: 99%; animation-delay: 5.72s; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
@keyframes st-glint {
  0%, 14%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  6% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* Glare that follows the pointer, plus fine foil grain */
#super-trini .st-file-photo::after {
  content: "";
  inset: 0;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.6), rgba(255, 248, 225, 0.14) 24%, transparent 50%);
  mix-blend-mode: overlay;
}

#super-trini:not(.st-locked) .st-file-photo .st-foil { opacity: 0.55; }
#super-trini:not(.st-locked) .st-file-photo::after { opacity: 1; }

/* With no pointer (phones), the glare drifts in a slow loop that ends where it starts. */
#super-trini:not(.st-locked) .st-file:not(.is-tilting) .st-file-photo::after { animation: st-drift 18s ease-in-out infinite; }
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 35%; }
@keyframes st-drift {
  0%, 100% { --mx: 30%; --my: 25%; }
  33% { --mx: 75%; --my: 40%; }
  66% { --mx: 45%; --my: 75%; }
}

#super-trini .st-stamp {
  position: absolute;
  top: 30px;
  left: -16px;
  z-index: 4;
  padding: 8px 16px;
  border: 1px solid currentColor;
  background: rgba(251, 247, 241, 0.94);
  transform: rotate(-8deg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--violet);
  transition: color 600ms ease;
}

#super-trini:not(.st-locked) .st-stamp { color: var(--gold); }
#super-trini.st-locked .st-stamp-open,
#super-trini:not(.st-locked) .st-stamp-locked,
#super-trini.st-locked .st-cap-open,
#super-trini:not(.st-locked) .st-cap-locked { display: none; }

#super-trini .st-mask {
  position: absolute;
  right: -22px;
  bottom: 96px;
  z-index: 3;
  width: 108px;
  filter: drop-shadow(0 8px 14px rgba(80, 50, 10, 0.35));
  transform: rotate(-8deg);
  transition: right 1.2s cubic-bezier(.7, 0, .2, 1), bottom 1.2s cubic-bezier(.7, 0, .2, 1), width 1.2s cubic-bezier(.7, 0, .2, 1), transform 1.2s ease;
}

/* Locked: the mask sits over her face */
#super-trini.st-locked .st-mask { right: calc(50% - 90px); bottom: calc(50% + 10px); width: 180px; transform: rotate(0deg); }

/* ---------- MUSIC ---------- */
#super-trini .st-music {
  padding: clamp(88px, 10vw, 130px) 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(91, 43, 181, 0.28), transparent 70%),
    var(--plum);
  color: var(--paper);
}

#super-trini .st-music .st-h2 { color: var(--paper); }
#super-trini .st-music .st-label { color: var(--champagne); }
#super-trini .st-music .st-lede { color: rgba(251, 247, 241, 0.72); }

#super-trini .st-music-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; }
#super-trini .st-favorites { margin: 0; font-family: var(--serif); font-size: 24px; font-style: italic; color: var(--champagne); }

#super-trini .st-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }

#super-trini .st-track {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(230, 209, 160, 0.14);
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none;
  color: inherit;
  transition: border-color 260ms ease, background-color 260ms ease;
}

#super-trini a.st-track:hover { border-color: rgba(230, 209, 160, 0.55); background: rgba(255, 255, 255, 0.045); }

#super-trini .st-cover { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--plum-deep); }
#super-trini .st-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
#super-trini a.st-track:hover .st-cover img { transform: scale(1.03); }

#super-trini .st-cover-blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 84px;
  font-style: italic;
  font-weight: 500;
  color: var(--champagne);
}

#super-trini .st-play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding-left: 3px;
  border-radius: 50%;
  border: 1px solid rgba(230, 209, 160, 0.8);
  background: rgba(18, 10, 25, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--champagne);
  font-size: 13px;
  transition: background-color 260ms ease, color 260ms ease;
}

#super-trini a.st-track:hover .st-play { background: var(--champagne); color: var(--plum-deep); }

#super-trini .st-track-meta { flex: 1; display: flex; flex-direction: column; padding: 22px 22px 24px; }
#super-trini .st-track-num { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
#super-trini .st-track-title { display: block; font-family: var(--serif); font-size: 23px; font-style: italic; font-weight: 500; line-height: 1.15; color: #ffffff; }
#super-trini .st-track-tag { display: block; margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lilac); }
#super-trini .st-track-desc { display: block; margin-top: 14px; font-size: 16px; line-height: 1.6; color: rgba(251, 247, 241, 0.66); }
#super-trini .st-track-go { display: block; margin-top: auto; padding-top: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--champagne); }

#super-trini .st-track-soon { justify-content: center; min-height: 320px; border-style: solid; background: transparent; }
#super-trini .st-soon { display: flex; flex-direction: column; align-items: center; padding: 36px 28px; text-align: center; }
#super-trini .st-soon .st-track-title { margin-top: 18px; }

#super-trini .st-platforms { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 56px; }

/* ---------- Hidden sparks ---------- */
#super-trini .st-spark {
  display: inline-grid;
  place-items: center;
  margin: 0;
  padding: 4px;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: st-twinkle 6s ease-in-out infinite;
}

#super-trini .st-label .st-spark { font-size: 28px; font-family: Georgia, serif; margin: -6px 2px; color: #f3dfa6; text-shadow: 0 0 10px rgba(247, 226, 166, 0.55); }
#super-trini .st-power-num .st-spark { font-size: 14px; font-style: normal; color: rgba(201, 164, 90, 0.55); animation-delay: 2s; }
#super-trini .st-artist-link { display: flex; flex: 1; flex-direction: column; text-decoration: none; color: inherit; }
#super-trini .st-artist:hover { border-color: rgba(230, 209, 160, 0.55); background: rgba(255, 255, 255, 0.045); }
#super-trini .st-artist:hover .st-cover img { transform: scale(1.03); }
#super-trini .st-artist:hover .st-play { background: var(--champagne); color: var(--plum-deep); }
#super-trini .st-artist-spark { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 22px; color: #f7e9c4; text-shadow: 0 0 10px rgba(18, 10, 25, 0.9); animation-delay: 4s; }

#super-trini .st-spark:hover { color: #fff3cf; }
#super-trini .st-spark:focus-visible { outline: 1px solid var(--champagne); outline-offset: 2px; }
#super-trini .st-spark.is-found { color: #f7e2a6; text-shadow: 0 0 12px rgba(247, 226, 166, 0.9); animation: none; }
#super-trini .st-spark.is-burst { animation: st-burst 700ms ease; }

@keyframes st-twinkle {
  0%, 82%, 100% { opacity: 1; text-shadow: none; }
  88% { opacity: 1; text-shadow: 0 0 10px rgba(247, 226, 166, 0.95); }
  94% { opacity: 0.7; }
}

@keyframes st-burst {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.9) rotate(45deg); text-shadow: 0 0 24px #f7e2a6; }
  100% { transform: scale(1) rotate(90deg); }
}

#super-trini .st-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9999;
  padding: 14px 24px;
  border: 1px solid rgba(230, 209, 160, 0.5);
  background: rgba(18, 10, 25, 0.94);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 300ms ease, transform 300ms ease;
}

#super-trini .st-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- FOOTER ---------- */
#super-trini .st-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 22px;
  padding: 40px 24px 48px;
  border-top: 1px solid rgba(230, 209, 160, 0.14);
  background: var(--plum-deep);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(251, 247, 241, 0.5);
}

#super-trini .st-footer > span + span::before { content: "✦"; margin-right: 22px; color: var(--gold); }
#super-trini .st-footer-mark { color: var(--champagne); }
#super-trini .st-footer a { color: var(--champagne); text-decoration: none; border-bottom: 1px solid rgba(230, 209, 160, 0.4); }

/* ---------- Break out of the theme ---------- */
#super-trini {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  float: none !important;
}

/* The page stands alone: no theme header, menu, title or footer. */
body:has(#super-trini) .wp-site-blocks > header,
body:has(#super-trini) .wp-site-blocks > footer,
body:has(#super-trini) header.wp-block-template-part,
body:has(#super-trini) footer.wp-block-template-part,
body:has(#super-trini) #masthead,
body:has(#super-trini) #colophon,
body:has(#super-trini) .site-header,
body:has(#super-trini) .site-footer,
body:has(#super-trini) .entry-header,
body:has(#super-trini) .page-header,
body:has(#super-trini) .wp-block-post-title { display: none !important; }

/* Anything else placed on this page beside the shortcode (stray buttons or text) */
body:has(#super-trini) .entry-content > :not(#super-trini):not(:has(#super-trini)),
body:has(#super-trini) .wp-block-post-content > :not(#super-trini):not(:has(#super-trini)) { display: none !important; }

body:has(#super-trini) { overflow-x: clip; background: var(--plum, #1a1023) !important; }
body:has(#super-trini) .wp-site-blocks,
body:has(#super-trini) .site-content,
body:has(#super-trini) .entry-content,
body:has(#super-trini) main { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
#super-trini p:empty, #super-trini > br { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  #super-trini .st-hero-inner { grid-template-columns: 1fr; min-height: 0; text-align: center; padding: 64px 0 72px; }
  #super-trini .st-hero-art { order: -1; min-height: 0; }
  #super-trini .st-hero-art img { width: min(290px, 72%); }
  #super-trini .st-emblem { width: min(220px, 60%); }
  #super-trini .st-tagline, #super-trini .st-hero-sub { margin-left: auto; margin-right: auto; }
  #super-trini .st-actions { justify-content: center; }
  #super-trini .st-hero .st-label { display: block; line-height: 2; font-size: 10px; letter-spacing: 0.2em; }
  #super-trini .st-hero .st-label .st-spark { display: inline-block; margin: 0 8px; vertical-align: middle; font-size: 26px; font-family: Georgia, serif; }
  #super-trini .st-power-grid { grid-template-columns: 1fr; }
  #super-trini .st-power, #super-trini .st-power:first-child, #super-trini .st-power:last-child { padding: 34px 0 36px; }
  #super-trini .st-power + .st-power { border-left: 0; border-top: 1px solid var(--hair); }
  #super-trini .st-story-grid { grid-template-columns: 1fr; }
  #super-trini .st-file { width: 100%; max-width: 420px; margin: 8px auto 0; }
}

@media (max-width: 600px) {
  #super-trini .st-wrap, #super-trini .st-hero-inner { width: calc(100% - 40px); }
  #super-trini .st-actions .st-btn { width: 100%; }
  #super-trini .st-mask { width: 80px; right: -6px; }
  #super-trini.st-locked .st-mask { width: 140px; right: calc(50% - 70px); }
  #super-trini .st-stamp { left: -6px; }
  #super-trini .st-footer { flex-direction: column; gap: 12px; }
  #super-trini .st-footer > span + span::before { display: none; }
  #super-trini .st-toast { bottom: 18px; font-size: 10px; letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  #super-trini *, #super-trini *::before, #super-trini *::after { animation: none !important; transition: none !important; }
}
#super-trini .st-artist .st-play { display: none; }

/* Card: keep the nameplate snug under the photo, whatever the theme adds */
#super-trini .st-file { display: flex !important; flex-direction: column; height: auto !important; align-self: center; }
#super-trini .st-file > p, #super-trini .st-file > br { display: none !important; }
#super-trini .st-file-photo { flex: none; margin: 12px 12px 0 !important; }
#super-trini .st-card-plate { margin: 12px !important; }
#super-trini .st-file .st-mask { position: absolute !important; margin: 0 !important; }

/* Team Lobos Robos links */
#super-trini .st-team-link { color: var(--violet); text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; transition: background-size 300ms ease, color 300ms ease; }
#super-trini .st-team-link:hover { color: var(--ink); background-size: 100% 40%; background-image: linear-gradient(rgba(201, 164, 90, 0.35), rgba(201, 164, 90, 0.35)); }
#super-trini .st-card-team { position: relative; z-index: 3; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(230, 209, 160, 0.35); transition: color 250ms ease, border-color 250ms ease; }
#super-trini .st-card-team:hover { color: var(--champagne); border-color: var(--champagne); }
#super-trini .st-glints { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#super-trini .st-glints-frame { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* ---------- Background song player ---------- */
#super-trini .st-player { position: fixed; left: 16px; bottom: 16px; z-index: 9998; }
#super-trini .st-player-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 18px 8px 8px;
  border: 1px solid rgba(230, 209, 160, 0.5);
  border-radius: 999px;
  background: rgba(18, 10, 25, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(8, 3, 14, 0.5);
  color: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 250ms ease, border-color 250ms ease;
}
#super-trini .st-player-btn:hover, #super-trini .st-player.is-playing .st-player-btn { opacity: 1; border-color: var(--champagne); }
#super-trini .st-player-btn:focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; }

/* A tiny gold record that spins while the song plays */
#super-trini .st-player-disc {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--plum-deep) 0 3px, var(--champagne) 3.5px 6px, transparent 6.5px),
    repeating-radial-gradient(circle, #2a1838 0 1px, #1a1023 1px 2.5px),
    var(--plum);
  box-shadow: 0 0 0 1px rgba(230, 209, 160, 0.6);
}
#super-trini .st-player-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 246, 214, 0.35) 25%, transparent 30% 70%, rgba(255, 246, 214, 0.25) 75%, transparent 80%);
}
#super-trini .st-player.is-playing .st-player-disc { animation: st-spin-disc 2.4s linear infinite; }
@keyframes st-spin-disc { to { transform: rotate(360deg); } }

#super-trini .st-player-text { display: flex; flex-direction: column; line-height: 1.2; }
#super-trini .st-player-title { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--paper); }
#super-trini .st-player-state { font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne); }

/* The song's own card: its play button turns into a spinning gold record */
#super-trini .st-now {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: none;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid rgba(230, 209, 160, 0.6);
  border-radius: 999px;
  background: rgba(18, 10, 25, 0.82);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
}
#super-trini .st-now i { display: inline-block; width: 2px; height: 9px; margin-right: 1px; border-radius: 1px; background: var(--champagne); animation: st-eq 900ms ease-in-out infinite alternate; }
#super-trini .st-now i:nth-child(2) { animation-delay: -300ms; }
#super-trini .st-now i:nth-child(3) { animation-delay: -600ms; margin-right: 6px; }
@keyframes st-eq { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
#super-trini.st-song-on .st-track-bg .st-now { display: inline-flex; }
#super-trini.st-song-on .st-track-bg { border-color: rgba(230, 209, 160, 0.6); box-shadow: 0 0 34px -10px rgba(230, 196, 110, 0.55); }
#super-trini.st-song-on .st-track-bg .st-play {
  color: transparent;
  border-color: var(--champagne);
  background:
    radial-gradient(circle, var(--plum-deep) 0 4px, var(--champagne) 4.5px 8px, transparent 8.5px),
    repeating-radial-gradient(circle, #2a1838 0 1px, #120a19 1px 3px);
  box-shadow: 0 0 0 4px rgba(230, 209, 160, 0.15), 0 0 22px rgba(230, 196, 110, 0.55);
  animation: st-spin-disc 2.4s linear infinite;
}
@media (max-width: 600px) { #super-trini .st-player { left: 12px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { #super-trini .st-player-disc, #super-trini .st-track-bg .st-play, #super-trini .st-now i { animation: none !important; } }

/* Play icon drawn as a true centered triangle (the ▶ text glyph sat high in some fonts) */
#super-trini .st-play { font-size: 0 !important; padding: 0 !important; }
#super-trini .st-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-38%, -50%);
}
#super-trini .st-play { color: var(--champagne); }
#super-trini a.st-track:hover .st-play { color: var(--plum-deep); }

/* Playing: the card's button becomes a record whose shine visibly turns, like the corner player */
#super-trini.st-song-on .st-track-bg .st-play::before { display: none; }
#super-trini .st-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(255, 246, 214, 0.55) 24%, transparent 32% 68%, rgba(255, 246, 214, 0.4) 74%, transparent 82%);
}
#super-trini.st-song-on .st-track-bg .st-play::after { opacity: 1; }
#super-trini.st-song-on .st-track-bg .st-play { animation: st-spin-disc 2.4s linear infinite; }

/* Locked card: only "Identity Classified" shows until her file is declassified */
#super-trini.st-locked .st-card-no,
#super-trini.st-locked .st-card-sub { display: none; }

/* Dragoneye Duke holo foil: rainbow bands that follow the pointer, drifting on their own at rest */
#super-trini .st-file { --st-holo: 0.22; }
#super-trini .st-file.is-tilting { --st-holo: 0.55; }
#super-trini .st-file-photo .st-foil {
  display: block !important;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(115deg, rgba(255, 90, 90, 0.5) 0%, rgba(255, 220, 110, 0.5) 6%, rgba(120, 255, 190, 0.5) 12%, rgba(110, 190, 255, 0.5) 18%, rgba(210, 130, 255, 0.5) 24%, rgba(255, 90, 90, 0.5) 30%);
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  filter: none;
  transform: none;
  animation: none;
  transition: opacity 400ms ease;
}
#super-trini:not(.st-locked) .st-file-photo .st-foil { opacity: var(--st-holo); }
@media (prefers-reduced-motion: no-preference) {
  #super-trini:not(.st-locked) .st-file:not(.is-tilting) .st-file-photo .st-foil { animation: st-duke-foil 9s ease-in-out infinite alternate; }
  @keyframes st-duke-foil { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
}
/* Glare only while the card is tilting, like Duke's */
#super-trini .st-file-photo::after {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 45%) !important;
  mix-blend-mode: overlay;
  animation: none !important;
  transition: opacity 400ms ease;
}
#super-trini:not(.st-locked) .st-file-photo::after { opacity: 0; }
#super-trini:not(.st-locked) .st-file.is-tilting .st-file-photo::after { opacity: 1; }