/* ===========================================
   CLARIVA · SHARED DESIGN TOKENS & UTILITIES
   Loaded globally for all template-backed pages.
   Page-specific layouts live in each template's
   inline <style> — this file is intentionally minimal.
   Last revised: 2026-05-31 — stripped page-specific
   selectors that were leaking into unrelated layouts.
=========================================== */

/* ── Design tokens ─────────────────────────── */
:root {
    --bg: #060d08;
    --card: #0c1711;
    --surface: #111e14;
    --surf2: #172a1b;
    --surf3: #1e3323;
    --amber: #f5a623;
    --amber-lt: #fbbf49;
    --green: #3dba6b;
    --green-lt: #4ade80;
    --coral: #f97316;
    --purple: #a78bfa;
    --blue: #60a5fa;
    --teal: #2dd4bf;
    --pink: #f472b6;
    --text: #f0edea;
    --text-2: #7faa8a;
    --text-3: #334d3b;
    --r: 16px;
    --r-sm: 12px;
    --r-lg: 20px;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    min-height: 100dvh;
    font-family: "Outfit", sans-serif;
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}


/* ── Background layer ──────────────────────── */
.bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.au {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    animation: drift ease-in-out infinite alternate;
}

.au1 {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(61,186,107,.16) 0%, transparent 70%);
    top: -170px; left: -150px;
    animation-duration: 22s;
}
.au2 {
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(245,166,35,.12) 0%, transparent 70%);
    bottom: -50px; right: -110px;
    animation-duration: 18s; animation-delay: -7s;
}
.au3 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(249,115,22,.09) 0%, transparent 70%);
    top: 42%; left: 28%;
    animation-duration: 20s; animation-delay: -10s;
}
.au4 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(167,139,250,.08) 0%, transparent 70%);
    top: 66%; right: 6%;
    animation-duration: 24s; animation-delay: -5s;
}
.au5 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(45,212,191,.07) 0%, transparent 70%);
    top: 12%; right: 22%;
    animation-duration: 19s; animation-delay: -12s;
}

@keyframes drift {
    from { transform: translate(0,0) scale(1) rotate(0deg); }
    to   { transform: translate(32px,26px) scale(1.14) rotate(3deg); }
}

.bg::before {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.5;
}

.bg::after {
    content: "";
    position: absolute; inset: 0; z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233dba6b' fill-opacity='0.018'%3E%3Cpath d='M30 0l30 17.32v34.64L30 60 0 51.96V17.32z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px 60px;
}

#particleCanvas {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 3;
}

.doodle {
    position: absolute; opacity: 0;
    animation: floatUp linear infinite;
    pointer-events: none; user-select: none; z-index: 4;
}

@keyframes floatUp {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg) scale(.6); }
    8%   { opacity: .12; }
    85%  { opacity: .06; }
    100% { opacity: 0; transform: translateY(-110vh) rotate(28deg) scale(1.2); }
}

/* ── Layout utilities ──────────────────────── */
.wrap { position: relative; z-index: 10; }

/* ── Glass card ────────────────────────────── */
.glass {
    background: rgba(12,23,17,.82);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.2);
}

@media (prefers-reduced-transparency: reduce) {
    .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(12,23,17,.94); }
}

/* ── Gradient border wrapper ───────────────── */
.grad-border {
    position: relative; border-radius: var(--r-lg); padding: 1.5px;
    background: linear-gradient(135deg, rgba(61,186,107,.4), rgba(245,166,35,.28), rgba(61,186,107,.18), rgba(249,115,22,.22));
    background-size: 300% 300%;
    animation: borderMorph 6s ease infinite;
}

@keyframes borderMorph {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.grad-border > * { border-radius: calc(var(--r-lg) - 1.5px); }

/* ── Reveal animation ──────────────────────── */
.reveal {
    opacity: 0; transform: translateY(20px) scale(.98);
    transition: all .75s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }
.s1{transition-delay:.04s}.s2{transition-delay:.08s}.s3{transition-delay:.12s}
.s4{transition-delay:.16s}.s5{transition-delay:.20s}.s6{transition-delay:.24s}
.s7{transition-delay:.28s}.s8{transition-delay:.32s}.s9{transition-delay:.45s}

/* ── Press feedback ────────────────────────── */
.press { transition: transform .12s cubic-bezier(.34,1.56,.64,1); }
.press:active { transform: scale(.94) !important; }

/* ── Tabular numbers ───────────────────────── */
.count-slot { font-variant-numeric: tabular-nums; }

/* ── Shimmer loading effect ────────────────── */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
    content: ""; position: absolute; top: 0; left: -100%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    animation: shimmerSweep 3.5s ease-in-out infinite;
}
@keyframes shimmerSweep { 0%{left:-55%} 100%{left:105%} }

/* ── Skeleton value placeholder ────────────── */
.skel-val {
    display: inline-block; position: relative; overflow: hidden;
    min-width: 32px; min-height: 1em;
    background: rgba(127,170,138,.08); border-radius: 4px; vertical-align: middle;
}
.skel-val::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
    animation: shimmerSweep 1.5s ease-in-out infinite;
}
.skel-val.hydrated { background: transparent; min-width: 0; animation: skelReveal .25s ease-out; }
.skel-val.hydrated::after { display: none; }
@keyframes skelReveal { from{opacity:.4} to{opacity:1} }

/* ── Online status dot ─────────────────────── */
.online-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); flex-shrink: 0;
    box-shadow: 0 0 10px var(--green), 0 0 20px rgba(61,186,107,.4);
    animation: dotPulse 2.5s ease-in-out infinite;
}
@keyframes dotPulse {
    0%,100% { box-shadow: 0 0 10px var(--green), 0 0 20px rgba(61,186,107,.4); }
    50%     { box-shadow: 0 0 5px var(--green), 0 0 12px rgba(61,186,107,.2); }
}

/* ── Scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(61,186,107,.18); border-radius: 2px; }

/* ── Accessibility: reduced motion ─────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}