:root {
  color-scheme: dark;
  --accent: #ff2e4d;
  --accent-soft: #ff5c73;
  --accent-deep: #d11236;
}

* { -webkit-tap-highlight-color: transparent; }
html, body { scroll-behavior: smooth; }
html { background: var(--color-ink); }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: transparent;
  color: #d4d5db;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display), "Inter", sans-serif; color: #eef0f4; }

/* ===== ambient aurora — soft, slow, eye-pleasing ===== */
#aurora {
  position: fixed; inset: -20% -10% auto -10%; height: 80vh; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% -6%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(55% 60% at -6% 4%, rgba(80,120,255,0.14), transparent 58%),
    radial-gradient(40% 50% at 50% 0%, rgba(120,60,200,0.10), transparent 60%);
  filter: blur(8px);
  animation: auroraShift 18s ease-in-out infinite alternate;
}
@keyframes auroraShift {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .9; }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); opacity: 1; }
}
body::before { /* deep base vignette so content stays readable */
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, #101018 0%, var(--color-ink) 55%);
}

/* ===== film grain (very subtle, reduces banding) ===== */
#grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ===== top scroll progress bar ===== */
#scrollbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 60%, transparent);
  z-index: 200; transition: width .12s linear; border-radius: 0 3px 3px 0;
}

/* ===== custom thin scrollbar ===== */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: padding-box; }

/* hide scrollbars on horizontal rails */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.rail { scroll-snap-type: x mandatory; scroll-padding-left: 16px; }
.rail > * { scroll-snap-align: start; }

/* ===== poster card ===== */
.poster {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 10px 26px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.07);
  transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s;
}
.poster::before { /* sheen sweep on hover */
  content: ""; position: absolute; inset: 0; z-index: 15;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.card:hover .poster::before { transform: translateX(120%); }
.poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 4%, rgba(0,0,0,0.05) 44%, transparent 72%);
}
.card { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.card:hover { z-index: 5; }
.card:hover .poster {
  transform: translateY(-7px) scale(1.03);
  box-shadow: 0 22px 44px rgba(0,0,0,0.62), 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent), 0 0 26px color-mix(in oklab, var(--accent) 30%, transparent);
}
.card:active .poster { transform: translateY(-2px) scale(.99); }

.poster-kanji {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; letter-spacing: -0.04em; color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 14px rgba(0,0,0,0.55); padding: 10px; text-align: center; line-height: 1.05;
}

/* play overlay on hover */
.play-fab {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); box-shadow: 0 8px 22px color-mix(in oklab, var(--accent) 45%, transparent);
  opacity: 0; transform: scale(.7); transition: opacity .25s, transform .25s;
}
.card:hover .play-fab { opacity: 1; transform: scale(1); }

/* badges */
.badge { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ===== nav glass ===== */
.glass {
  background: color-mix(in oklab, var(--color-ink) 68%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
/* transparent floating navbar over the guest aurora hero */
.glass-soft {
  background: linear-gradient(to bottom, rgba(5,5,7,.55), transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ===== chip / quick filter ===== */
.chip { transition: all .18s ease; border: 1px solid rgba(255,255,255,0.08); }
.chip:hover { border-color: color-mix(in oklab, var(--accent) 55%, transparent); color: #fff; background: color-mix(in oklab, var(--accent) 10%, transparent); }
.chip.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 35%, transparent);
}

/* ===== hero ===== */
.hero-fade { background: linear-gradient(to top, var(--color-ink) 6%, rgba(8,8,11,0.5) 45%, rgba(8,8,11,0.15) 75%, transparent); }
.hero-fade-x { background: linear-gradient(to right, var(--color-ink) 2%, rgba(8,8,11,0.55) 35%, transparent 72%); }

/* hero slides crossfade + ken burns */
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease;
}
.hero-slide.on { opacity: 1; }
.hero-slide.on .hero-bg { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.3); transition: all .3s; cursor: pointer; }
.hero-dot.active { width: 26px; background: var(--accent); box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 60%, transparent); }

.dot { transition: all .25s; }
.dot.active { width: 22px; background: var(--accent); }

/* section heading accent icon */
.sec-ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent-soft);
}

/* ===== reveal (animates in; always ends visible) ===== */
.rise { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }

/* bottom nav active */
.bn { transition: color .2s, transform .2s; }
.bn.active { color: var(--accent-soft); }
.bn.active .bn-ico { transform: translateY(-2px); }
.bn-ico { transition: transform .2s; }

/* progress bar on continue-watching */
.prog { background: rgba(255,255,255,0.18); }
.prog > i { display:block; height:100%; background: var(--accent); border-radius: 999px; box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 50%, transparent); }

/* route transition */
@keyframes routeIn { from { opacity:0; transform: translateY(10px);} to {opacity:1; transform:none;} }
#view { animation: routeIn .4s cubic-bezier(.2,.7,.2,1); }

/* ===== episode tile ===== */
.ep { transition: all .18s ease; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,.02); }
.ep:hover { border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: color-mix(in oklab, var(--accent) 9%, transparent); transform: translateY(-2px); }
.ep.current { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 15%, transparent); box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 22%, transparent); }

/* tab underline */
.tab { position: relative; transition: color .2s; }
.tab.active { color:#fff; }
.tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-9px; height:2.5px; background: var(--accent); border-radius: 999px; }

/* ===== toast ===== */
#toast {
  position: fixed; left:50%; bottom:92px; transform: translate(-50%, 24px);
  background: color-mix(in oklab, var(--color-ink-3) 92%, transparent); color:#fff; padding:11px 18px; border-radius:14px;
  font-size:13px; font-weight:600; box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.09);
  backdrop-filter: blur(12px);
  opacity:0; pointer-events:none; transition: all .35s cubic-bezier(.2,.7,.2,1); z-index:210;
  display:flex; align-items:center; gap:9px; max-width: 90vw;
}
#toast.show { opacity:1; transform: translate(-50%, 0); }
#toast svg { color: var(--accent-soft); }

/* ===== player ===== */
.player {
  position: relative; aspect-ratio: 16/9; border-radius: 18px; overflow:hidden;
  background: radial-gradient(circle at 50% 40%, #2a2a36, #08080d);
  box-shadow: 0 20px 46px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* skeleton shimmer */
.skel { background: linear-gradient(90deg,#15151c 25%,#20202a 37%,#15151c 63%); background-size:400% 100%; animation: sh 1.3s infinite; border-radius: 12px; }
@keyframes sh { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* genre tag pill */
.gtag { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); transition: all .18s; cursor: pointer; }
.gtag:hover { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); color:#fff; }

/* stat block */
.stat { background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.07); transition: border-color .2s; }
.stat:hover { border-color: color-mix(in oklab, var(--accent) 30%, transparent); }

/* segmented control */
.seg { background: var(--color-ink-3); border: 1px solid rgba(255,255,255,.05); }
.seg button.on { background: var(--accent); color:#fff; box-shadow:0 4px 12px color-mix(in oklab, var(--accent) 35%, transparent); }

/* line clamp helpers */
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.clamp-open{ -webkit-line-clamp: unset !important; }

/* ===== buttons: brand glow ===== */
.btn-brand { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }

/* ===== ripple ===== */
.rip { position: relative; overflow: hidden; }
.rip > .ripple { position:absolute; border-radius:999px; transform: scale(0); background: rgba(255,255,255,.35); pointer-events:none; animation: ripple .6s ease-out forwards; mix-blend-mode: overlay; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* focus-visible accessibility */
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: 8px; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  #view, .rise.shown { animation: none !important; opacity:1 !important; transform:none !important; }
  #aurora { animation: none !important; }
}

/* ===== eye-comfort reader ===== */
#dim { position: fixed; inset: 0; background: #000; pointer-events: none; opacity: 0; z-index: 40; transition: opacity .2s; }
.rmode-sepia { filter: sepia(.55) brightness(.92) saturate(.85); }
.rmode-light { filter: invert(1) hue-rotate(180deg) brightness(1.05); }
.rmode-warm  { filter: brightness(.95) sepia(.18); }
.warm-tint::after { content:""; position: fixed; inset:0; z-index:41; pointer-events:none; background: rgba(255,170,80,0.10); }
.cinema-dim { opacity: .35; transition: opacity .3s; pointer-events: none; }

/* comfort panel sheet */
.sheet {
  background: color-mix(in oklab, var(--color-ink-2) 95%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 -12px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  animation: sheetUp .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

input[type=range]{ -webkit-appearance:none; height:6px; border-radius:999px; background:rgba(255,255,255,.15); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:999px; background:var(--accent); box-shadow:0 2px 8px color-mix(in oklab, var(--accent) 50%, transparent); cursor:pointer; }

/* accent swatch picker */
.swatch { width: 30px; height: 30px; border-radius: 999px; cursor: pointer; transition: transform .15s; border: 2px solid transparent; }
.swatch:hover { transform: scale(1.12); }
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.5); transform: scale(1.12); }

/* ===== guest aurora landing hero — real ink/fluid-art photo background ===== */
.aurora-hero { background: #050507; display: grid; }
.aurora-hero > * { grid-area: 1 / 1; }
.aurora-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("assets/hero-ink.jpg");
  background-size: cover;
  background-position: 50% 22%;
  background-repeat: no-repeat;
  animation: smokeDrift 28s ease-in-out infinite alternate;
}
@keyframes smokeDrift {
  from { transform: scale(1.04) translate(0,0); }
  to   { transform: scale(1.12) translate(-1.5%, 1%); }
}
.aurora-noise {
  position: absolute; inset: 0; z-index: 2; opacity: .045; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aurora-fade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(80% 70% at 50% 48%, rgba(5,5,7,.62) 0%, rgba(5,5,7,.30) 45%, transparent 80%),
    linear-gradient(to bottom, rgba(5,5,7,.70) 0%, rgba(5,5,7,.20) 22%, rgba(5,5,7,.30) 60%, var(--color-ink) 100%);
}

/* --- Avatar crop (Cropper.js) circular preview --- */
.cropper-view-box,
.cropper-face { border-radius: 50%; }
.cropper-view-box { outline: 2px solid var(--color-brand); outline-color: rgba(255,46,77,.85); }
.cropper-line, .cropper-point { background-color: var(--color-brand); }