/* === LvlCamp · global styles + reusable utilities ===
   Mirrors the <style> block from the design index.html.
   Tailwind utilities used in markup; this file covers everything
   that isn't a Tailwind class (custom animations, masks, effects). */

html { scroll-behavior: smooth; }
html, body {
    background: var(--bg);
    margin: 0;
    padding: 0;
}
body {
    font-family: var(--font-body);
    color: var(--color-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* === Typography helpers === */
.font-display { font-family: var(--font-display); font-style: italic; font-weight: 900; letter-spacing: -0.03em; }
.font-mono    { font-family: var(--font-mono); }
.font-grotesk { font-family: var(--font-grotesk); letter-spacing: -0.02em; }

.text-outline       { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.text-outline-thick { -webkit-text-fill-color: transparent; -webkit-text-stroke: 2.5px var(--accent); }
.stroke-text        { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px currentColor; }

/* === Bolt logo via background-image (color variants) === */
.bolt-mask          { display: inline-block; background: url('../logo/logo-bolt-lime.svg') center / contain no-repeat; }
.bolt-mask.is-lime    { background-image: url('../logo/logo-bolt-lime.svg'); }
.bolt-mask.is-black   { background-image: url('../logo/logo-bolt-black.svg'); }
.bolt-mask.is-white   { background-image: url('../logo/logo-bolt-white.svg'); }
.bolt-mask.is-magenta { background-image: url('../logo/logo-bolt-magenta.svg'); }
.bolt-mask.is-indigo  { background-image: url('../logo/logo-bolt-indigo.svg'); }
.bolt-mask svg { display: none; }

/* === Marquee === */
@keyframes marquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
.marquee {
    display: flex;
    width: max-content;
    animation: marquee 28s linear infinite;
}
.marquee.reverse { animation-direction: reverse; }
.marquee.fast    { animation-duration: 14s; }

/* === Grain + glow backgrounds === */
.grain {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 1.0 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.glow span { position: absolute; border-radius: 9999px; filter: blur(120px); }
.glow .g1 { top: -10%; left: -10%; width: 60vmax; height: 60vmax; background: rgba(96, 82, 255, 0.18); }
.glow .g2 { bottom: -20%; right: -10%; width: 50vmax; height: 50vmax; background: rgba(238, 58, 168, 0.14); }
.glow .g3 { top: 30%; left: 50%; width: 30vmax; height: 30vmax; background: rgba(212, 255, 0, 0.08); }

/* === Glitch headline === */
.glitch { position: relative; display: inline-block; }
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    pointer-events: none;
}
.glitch::before {
    color: var(--magenta);
    mix-blend-mode: screen;
    clip-path: polygon(0 0, 100% 0, 100% 42%, 0 42%);
    animation: g1 4.5s steps(1, end) infinite;
    opacity: 0.85;
}
.glitch::after {
    color: var(--indigo);
    mix-blend-mode: screen;
    clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
    animation: g2 4.5s steps(1, end) infinite;
    opacity: 0.85;
}
@keyframes g1 {
    0%, 92%, 100% { transform: translate(0, 0); }
    93% { transform: translate(-3px, -2px); }
    95% { transform: translate(2px, 1px); }
    97% { transform: translate(-1px, 2px); }
}
@keyframes g2 {
    0%, 92%, 100% { transform: translate(0, 0); }
    94% { transform: translate(3px, 2px); }
    96% { transform: translate(-2px, -1px); }
    98% { transform: translate(1px, -2px); }
}

/* === Tilt cards === */
.tilt { transition: transform 0.5s cubic-bezier(.21,1.02,.73,1), box-shadow 0.5s; transform-style: preserve-3d; }

/* === Magnetic CTA === */
.magnetic { transition: transform 0.15s ease-out; will-change: transform; }

/* === Spinning rings === */
@keyframes spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.spin-slow   { animation: spin-slow 20s linear infinite; }
.spin-slower { animation: spin-slow 60s linear infinite; }

/* === Photo placeholder shimmer (until real photos plug in) === */
.photo-ph {
    background: linear-gradient(135deg, #2a1a3e 0%, #1a0b2e 100%);
    position: relative; overflow: hidden;
}
.photo-ph::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 255, 255, 0.025) 12px 24px);
}

/* === Schedule timeline dot === */
.timeline-dot { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent); }

/* === Sched row hover === */
.sched-row { transition: background 0.25s, transform 0.25s; }
.sched-row:hover { background: rgba(212, 255, 0, 0.04); transform: translateX(8px); }

/* === Reveal on scroll === */
.reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(.21,1.02,.73,1), transform 0.8s cubic-bezier(.21,1.02,.73,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* === Section eyebrow label === */
.label-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--accent);
}
.label-eyebrow::before {
    content: ''; width: 24px; height: 1px; background: currentColor; opacity: 0.6;
}

/* === Dotted background === */
.dotted-bg {
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* === Form field (white panel) === */
.field {
    background: transparent;
    border: 0;
    border-bottom: 4px solid var(--form-field-border);
    padding: 1rem 0;
    width: 100%;
    font: 900 italic 1.25rem var(--font-display);
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.2s, color 0.2s;
}
.field::placeholder { color: rgba(0, 0, 0, 0.25); }
.field:focus { border-color: var(--form-field-focus); }
.field:user-valid { border-color: #16a34a; }
input[type="checkbox"] { accent-color: var(--magenta); }

/* === Sticky day pill on schedule === */
.day-pill { position: sticky; top: 90px; align-self: flex-start; }

/* === Text selection === */
::selection { background: var(--accent); color: #000; }