/* ==========================================================
   theKTVBox — Shared stylesheet
   Fonts: Instrument Serif (display) + Inter (body/UI/data)
   Accent: Iridescent logo gradient (pink → violet → azure)
   ========================================================== */

html, body { background:#F5F1EA; color:#0E0E10; font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#0E0E10; color:#F5F1EA; }

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

/* --- Iridescent brand gradient (from the logo) --- */
.iri { background:linear-gradient(125deg,#FF4FBF 0%,#C85DE0 28%,#9B5BFF 52%,#6476FF 76%,#3B8BFF 100%); }
.iri-text { background:linear-gradient(125deg,#FF4FBF 0%,#C85DE0 28%,#9B5BFF 52%,#6476FF 76%,#3B8BFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.iri-border { position:relative; }
.iri-border::before { content:''; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background:linear-gradient(125deg,#FF4FBF 0%,#9B5BFF 50%,#3B8BFF 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }

/* --- Display typography — Instrument Serif --- */
.display-xl { font-family:'Instrument Serif',ui-serif,Georgia,serif; font-weight:400; letter-spacing:-0.035em; line-height:0.90; }
.display-lg { font-family:'Instrument Serif',ui-serif,Georgia,serif; font-weight:400; letter-spacing:-0.025em; line-height:0.95; }
.display-md { font-family:'Instrument Serif',ui-serif,Georgia,serif; font-weight:400; letter-spacing:-0.015em; line-height:1.02; }
.serif-italic { font-family:'Instrument Serif',ui-serif,Georgia,serif; font-style:italic; font-weight:400; }

/* --- Sub-display / card titles — Inter tight --- */
.headline-sans { font-family:'Inter',system-ui,sans-serif; font-weight:600; letter-spacing:-0.022em; line-height:1.1; }

/* --- Section labels — Inter uppercase --- */
.label { font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:500; }

/* --- Exhibit frames --- */
.exhibit-light { background:radial-gradient(ellipse at 50% 30%,#FBF8F1 0%,#F5F1EA 55%,#EBE4D4 100%);
  box-shadow:0 40px 90px -35px rgba(14,14,16,.22),inset 0 1px 0 rgba(255,255,255,.6); }
.exhibit-dark  { background:radial-gradient(ellipse at 50% 30%,#F8F4ED 0%,#EFE8D8 70%,#E2D9C5 100%);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.exhibit-onyx  { background:radial-gradient(ellipse at 50% 30%,#23232A 0%,#131318 70%,#0A0A0C 100%);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05); }

/* --- Marquee --- */
@keyframes marquee     { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes marquee-rev { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.marquee       { animation:marquee     60s linear infinite; }
.marquee-slow  { animation:marquee     90s linear infinite; }
.marquee-rev   { animation:marquee-rev 75s linear infinite; }
.marquee-track { display:inline-flex; gap:3rem; white-space:nowrap; }

/* --- Breathing, float, wave, pulse --- */
@keyframes breathe { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.12)} }
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes wave    { 0%,100%{transform:scaleY(.25)} 50%{transform:scaleY(1)} }
@keyframes ringPulse {
  0%   { transform:scale(.3); opacity:.6 }
  100% { transform:scale(2.6); opacity:0 }
}
.breathe { animation:breathe 3.6s ease-in-out infinite; }
.floaty  { animation:float 9s ease-in-out infinite; }
.wave-bar{ animation:wave 1.4s ease-in-out infinite; transform-origin:bottom; }
.ring-pulse { animation:ringPulse 3.2s ease-out infinite; }

/* --- Scroll reveal base --- */
.reveal   { opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-child > * { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.reveal-child.in > * { opacity:1; transform:translateY(0); }
.reveal-child.in > *:nth-child(1){ transition-delay:0ms }
.reveal-child.in > *:nth-child(2){ transition-delay:80ms }
.reveal-child.in > *:nth-child(3){ transition-delay:160ms }
.reveal-child.in > *:nth-child(4){ transition-delay:240ms }
.reveal-child.in > *:nth-child(5){ transition-delay:320ms }
.reveal-child.in > *:nth-child(6){ transition-delay:400ms }
.reveal-child.in > *:nth-child(7){ transition-delay:480ms }
.reveal-child.in > *:nth-child(8){ transition-delay:560ms }

/* --- Magnetic CTA --- */
.magnetic { will-change:transform; transition:transform .35s cubic-bezier(.16,1,.3,1); }

/* --- Hairlines --- */
.hl-dark  { border-color:rgba(245,241,234,.13); }
.hl-light { border-color:rgba(14,14,16,.12); }

/* --- Tabular nums for data — Inter tnum, no monospace --- */
.ticker { font-family:'Inter',system-ui,sans-serif; font-variant-numeric:tabular-nums; font-feature-settings:'tnum','cv11'; font-weight:500; letter-spacing:-0.01em; }

/* --- Top progress bar — iridescent --- */
.progress { position:fixed; top:0; left:0; height:2px; width:0%; z-index:200;
  background:linear-gradient(90deg,#FF4FBF,#9B5BFF,#3B8BFF); box-shadow:0 0 12px rgba(155,91,255,.35); }

/* --- Scroll hint --- */
@keyframes scroll-hint { 0%,100%{transform:translateY(0);opacity:.45} 50%{transform:translateY(8px);opacity:1} }
.scroll-hint { animation:scroll-hint 2.4s ease-in-out infinite; }

/* --- Utilities --- */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { scrollbar-width:none; }
.tracking-tightest { letter-spacing:-0.055em; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}