/* ---------- start screen: quiet, dark, one drifting glow ---------- */
@property --accent-s { syntax: "<color>"; inherits: true; initial-value: #ff3b3b; }

body.splash-open { overflow: hidden; }

#splash {
  --accent-s: #ff3b3b;
  --ink: #0c0d10;
  --paper: #f2f0eb;
  --mute: #9a9aa3;
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  overflow: hidden;
  transition: --accent-s .9s ease;
  font-family: "Manrope", system-ui, sans-serif;
}
.splash-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
/* soft light that follows the cursor */
.splash-spot {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), color-mix(in srgb, var(--accent-s) 9%, transparent), transparent 70%);
}
#splash::after { /* vignette + faint grain-free fade at the edges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 40% 45%, transparent 55%, rgba(0,0,0,.55));
}

.splash-inner {
  position: relative; z-index: 2; height: 100%;
  width: min(1180px, 100% - 48px); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 56px;
}

.splash-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  color: color-mix(in srgb, var(--accent-s) 70%, #fff);
  opacity: 0; animation: in .8s ease .1s forwards;
}
.splash-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-s); box-shadow: 0 0 10px var(--accent-s); }
.splash-eyebrow .slash { color: color-mix(in srgb, var(--accent-s) 45%, #555); }

/* Title: heavy uppercase. "ANIME" is silver and comes into focus letter by letter; "LOG" is a shifting gradient */
.splash-title {
  font-family: "Poppins", "Montserrat", "Arial Black", sans-serif; font-weight: 800;
  font-size: clamp(64px, 10.5vw, 156px); line-height: .9; letter-spacing: -0.02em; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.t-anime { display: flex; }
.t-anime .ch {
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 25%, #a3a5b4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: blur(14px); opacity: .25;
  transition: filter .55s cubic-bezier(.2, .7, .2, 1), opacity .55s ease;
}
.t-anime .ch.sharp { filter: none; opacity: 1; }
/* the red/cyan split edge on the letter in focus */
.t-anime .ch.focus { filter: drop-shadow(-3px 0 0 rgba(255, 46, 99, .85)) drop-shadow(3px 0 0 rgba(46, 230, 255, .85)); opacity: 1; }
.t-log {
  /* gradient built from the quote colour: a pale tint into the full colour and a deeper shade */
  background: linear-gradient(95deg,
    color-mix(in srgb, var(--accent-s) 30%, #fff) 0%,
    var(--accent-s) 45%,
    color-mix(in srgb, var(--accent-s) 70%, #4a0a3a) 75%,
    color-mix(in srgb, var(--accent-s) 55%, #fff) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent-s) 35%, transparent));
  opacity: 0; animation: in 1s cubic-bezier(.2, .7, .2, 1) .9s forwards, shimmer 7s ease-in-out 1.6s infinite;
}
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.splash-quote {
  margin: 30px 0 0; max-width: 40ch; min-height: 1.55em;
  font-family: "Poppins", system-ui, sans-serif; font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: #c9c8d3; font-weight: 400;
  opacity: 0; animation: in .8s ease .55s forwards;
}
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--accent-s); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.splash-cite { margin: 12px 0 0; font-family: "Poppins", system-ui, sans-serif; font-style: italic; font-size: 14px; color: var(--mute); min-height: 1.4em; transition: opacity .4s ease; }
.splash-cite b { color: var(--paper); font-weight: 600; }

.splash-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; opacity: 0; animation: in .8s ease .8s forwards; }
.splash-enter, .splash-shuffle {
  font: 600 16px/1 "Manrope", system-ui, sans-serif; border-radius: 999px; cursor: pointer;
  padding: 16px 30px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.splash-enter {
  border: 0; color: #fff; padding: 17px 38px; font-size: 17px;
  background: var(--accent-s);
  box-shadow: 0 10px 34px -8px var(--accent-s), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.splash-enter:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -8px var(--accent-s), 0 0 0 1px rgba(255,255,255,.25) inset; }
.splash-enter:active { transform: scale(.97); }
.splash-shuffle { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,.16); }
.splash-shuffle:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.splash-enter:focus-visible, .splash-shuffle:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.splash-hint { margin: 16px 0 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: #6d6c76; opacity: 0; animation: in .8s ease 1s forwards; }

/* the show's cover: a floating card that leans toward the cursor */
.splash-art { margin: 0; perspective: 900px; opacity: 0; transition: opacity 1s ease; }
.splash-art.loaded { opacity: 1; }
.splash-card {
  position: relative; aspect-ratio: 2 / 3; width: min(100%, 360px); margin-left: auto; border-radius: 18px;
  background: #16171c center / cover no-repeat;
  box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--accent-s) 55%, transparent), 0 0 0 1px rgba(255,255,255,.08);
  transform: rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), background-image .6s ease;
  animation: float 7s ease-in-out infinite;
}
.splash-card::after { /* light sheen across the card */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 40%, transparent 70%, rgba(0,0,0,.35));
}
.splash-art figcaption { margin-top: 16px; text-align: right; font-size: 13px; color: var(--mute); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Enter: the clap ---- */
.splash-flash, .splash-wave { position: absolute; pointer-events: none; opacity: 0; }
.splash-flash { inset: 0; background: #fff; z-index: 5; }
.splash-wave {
  z-index: 4; left: var(--cx, 30%); top: var(--cy, 70%); width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid var(--accent-s); box-shadow: 0 0 30px var(--accent-s);
}
@keyframes flash { 0% { opacity: 0; } 15% { opacity: .5; } 100% { opacity: 0; } }
@keyframes wave { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(70); opacity: 0; } }
@keyframes jolt { 0% { transform: none; } 30% { transform: translate(-6px, 2px); } 60% { transform: translate(5px, -2px); } 100% { transform: none; } }
#splash.leaving { transition: opacity .55s ease, filter .55s ease, transform .55s ease; opacity: 0; filter: blur(10px); transform: scale(1.04); }

@media (max-width: 860px) {
  /* phones: the cover sits above the title as a small, clear card (not a faded picture behind the buttons) */
  .splash-inner { grid-template-columns: 1fr; gap: 0; align-content: center; padding: 24px 0; }
  .splash-art { order: -1; margin: 0 0 22px; pointer-events: none; }
  .splash-card { width: min(34vw, 150px); max-height: 26vh; aspect-ratio: 2 / 3; margin: 0; border-radius: 14px;
    transform: rotate(-3deg); animation: float 7s ease-in-out infinite; }
  .splash-art figcaption { display: none; }
  .splash-eyebrow { margin-bottom: 18px; }
  .splash-title { font-size: clamp(54px, 17vw, 96px); }
}
@media (max-width: 860px) and (max-height: 640px) {
  .splash-art { display: none; }  /* very short screens: the text and buttons come first */
}
@media (prefers-reduced-motion: reduce) {
  .splash-eyebrow, .splash-quote, .splash-actions, .splash-hint, .t-log { animation: none; opacity: 1; }
  .t-anime .ch { filter: none; opacity: 1; transition: none; }
  .splash-card { animation: none; }
  .caret { animation: none; }
  #splash.clapping .splash-inner, #splash.clapping .splash-wave { animation: none; }
  #splash.leaving { filter: none; transform: none; }
}