/* ============================================================
   LiveOS — Animation Layer v3
   ============================================================ */

/* ── PRELOADER ─────────────────────────────────────────────── */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: #050508;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#preloader.pre--done {
  animation: preOut .8s cubic-bezier(.76,0,.24,1) .08s forwards;
  pointer-events: none;
}
@keyframes preOut { to { transform: translateY(-100%); opacity: 0; } }

.pre__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(91,138,240,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,138,240,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: preGridBreath 3s ease-in-out infinite;
}
@keyframes preGridBreath { 0%,100%{opacity:.5} 50%{opacity:1} }

.pre__glow {
  position: absolute;
  width: 700px; height: 700px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: conic-gradient(
    from 0deg,
    rgba(91,138,240,.12),
    rgba(139,92,246,.10),
    rgba(34,217,238,.08),
    rgba(244,114,182,.07),
    rgba(91,138,240,.12)
  );
  border-radius: 50%;
  filter: blur(80px);
  animation: preGlowSpin 20s linear infinite;
}
@keyframes preGlowSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.pre__rings {
  position: absolute;
  width: 360px; height: 360px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  transform-style: preserve-3d;
}
.pre__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid transparent;
}
.pre__ring:nth-child(1) {
  border-color: rgba(91,138,240,.4);
  animation: preRing1 10s linear infinite;
}
.pre__ring:nth-child(2) {
  inset: 32px; border-color: rgba(139,92,246,.35);
  animation: preRing2 15s linear infinite;
}
.pre__ring:nth-child(3) {
  inset: 64px; border-color: rgba(34,217,238,.3);
  animation: preRing1 22s linear infinite reverse;
}
.pre__ring::before {
  content: ''; position: absolute; border-radius: 50%;
  top: -5px; left: 50%; transform: translateX(-50%);
}
.pre__ring:nth-child(1)::before { width:10px;height:10px; background:#5b8af0; box-shadow:0 0 16px 4px rgba(91,138,240,.9); }
.pre__ring:nth-child(2)::before { width: 8px;height: 8px; background:#8b5cf6; box-shadow:0 0 14px 3px rgba(139,92,246,.9); }
.pre__ring:nth-child(3)::before { width: 7px;height: 7px; background:#22d9ee; box-shadow:0 0 12px 3px rgba(34,217,238,.9); }

@keyframes preRing1 { from{transform:rotateY(0deg)} to{transform:rotateY(360deg)} }
@keyframes preRing2 { from{transform:rotateX(55deg) rotateY(0deg)} to{transform:rotateX(55deg) rotateY(360deg)} }

.pre__body {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  animation: preBodyIn .9s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes preBodyIn {
  from { opacity:0; transform:translateY(36px) scale(.86); }
  to   { opacity:1; transform:none; }
}
.pre__icon {
  width: 76px; height: 76px; border-radius: 22px;
  background: linear-gradient(135deg,#5b8af0,#8b5cf6);
  display: grid; place-items: center;
  animation: preIconRipple 2.2s ease-in-out infinite;
}
@keyframes preIconRipple {
  0%,100% { box-shadow:0 0 0  0px rgba(91,138,240,.6),0 0 40px rgba(91,138,240,.35); }
  50%      { box-shadow:0 0 0 20px rgba(91,138,240,.0),0 0 80px rgba(91,138,240,.65); }
}
.pre__wordmark {
  font-family: 'Outfit',sans-serif;
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.025em; color: #eef4ff;
}
.pre__sub {
  font-family: 'JetBrains Mono',monospace;
  font-size: .73rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(91,138,240,.6);
  animation: preSubIn 1.2s ease .5s both;
}
@keyframes preSubIn {
  from { opacity:0; letter-spacing:.38em; }
  to   { opacity:1; letter-spacing:.2em; }
}
.pre__track {
  width: 200px; height: 2px;
  background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden;
}
.pre__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg,#5b8af0,#8b5cf6,#22d9ee);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(91,138,240,.7);
  transition: width 2.4s cubic-bezier(.25,.46,.45,.94);
}

/* ── HEADER DROP ────────────────────────────────────────────── */
.header {
  animation: headerIn .7s cubic-bezier(.34,1.2,.64,1) 2.9s both;
}
@keyframes headerIn {
  from { opacity:0; transform:translateY(-32px); }
  to   { opacity:1; transform:none; }
}

/* ── REVEAL SYSTEM ──────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(32px);
  transition: opacity .75s cubic-bezier(.4,0,.2,1), transform .75s cubic-bezier(.4,0,.2,1);
}
.reveal-left  { opacity:0; transform:translateX(-40px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.reveal-right { opacity:0; transform:translateX( 40px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.reveal-scale { opacity:0; transform:scale(.85);        transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.34,1.3,.64,1); }

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible { opacity:1; transform:none; }

/* stagger children */
.stagger > *:nth-child(1) { transition-delay:.00s }
.stagger > *:nth-child(2) { transition-delay:.09s }
.stagger > *:nth-child(3) { transition-delay:.18s }
.stagger > *:nth-child(4) { transition-delay:.27s }
.stagger > *:nth-child(5) { transition-delay:.36s }
.stagger > *:nth-child(6) { transition-delay:.45s }
.stagger > *:nth-child(7) { transition-delay:.54s }
.stagger > *:nth-child(8) { transition-delay:.63s }

/* ── STAIR CARDS individual delays ─────────────────────────── */
.stair-card:nth-child(1) { transition-delay: .00s; }
.stair-card:nth-child(2) { transition-delay: .12s; }
.stair-card:nth-child(3) { transition-delay: .24s; }
.stair-card:nth-child(4) { transition-delay: .36s; }
.stair-card:nth-child(5) { transition-delay: .48s; }
.stair-card:nth-child(6) { transition-delay: .60s; }

/* audience cards delays */
.aud-card:nth-child(1) { transition-delay: .00s; }
.aud-card:nth-child(2) { transition-delay: .14s; }
.aud-card:nth-child(3) { transition-delay: .28s; }

/* ── SECTION LABELS ─────────────────────────────────────────── */
.sec-label {
  animation: secLabelIn .6s ease both;
}
@keyframes secLabelIn {
  from { opacity:0; letter-spacing:.32em; }
  to   { opacity:1; }
}
.accent-rule {
  animation: ruleGrow .7s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ruleGrow {
  from { width:0; opacity:0; }
  to   { width:48px; opacity:1; }
}

/* ── 3D TILT ────────────────────────────────────────────────── */
.tilt-card { transform-style:preserve-3d; will-change:transform; }
.tilt-shine {
  position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(
    circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.08) 0%, transparent 60%
  );
  pointer-events:none; opacity:0; transition:opacity .3s; z-index:1;
}
.tilt-card:hover .tilt-shine { opacity:1; }

/* ── CANVAS PARTICLES ───────────────────────────────────────── */
#heroCanvas { position:absolute; inset:0; pointer-events:none; z-index:0; }

/* ── SCROLL INDICATOR ───────────────────────────────────────── */
.scroll-hint {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  color:rgba(150,179,212,.4); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; font-family:'JetBrains Mono',monospace;
  cursor:pointer; z-index:3; user-select:none;
  animation: hintIn 1s ease 3.2s both;
}
@keyframes hintIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.scroll-hint__arrow {
  width:18px; height:18px;
  border-right:1.5px solid rgba(91,138,240,.5);
  border-bottom:1.5px solid rgba(91,138,240,.5);
  transform:rotate(45deg);
  animation:arrowBounce 1.5s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%,100%{transform:rotate(45deg) translateY(0); opacity:.5}
  50%    {transform:rotate(45deg) translateY(6px); opacity:1}
}

/* ── MINI-BADGE FLOAT ───────────────────────────────────────── */
.mini-badge { animation:badgeFloat ease-in-out infinite; }
.mini-badge:nth-child(1){animation-duration:5s;  animation-delay:0s}
.mini-badge:nth-child(2){animation-duration:6.2s;animation-delay:.9s}
.mini-badge:nth-child(3){animation-duration:4.8s;animation-delay:1.5s}
@keyframes badgeFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ── CTA GLOW ───────────────────────────────────────────────── */
.cta__inner { animation:ctaBreath 6s ease-in-out infinite alternate; }
@keyframes ctaBreath {
  from{ box-shadow:0 28px 80px rgba(0,0,0,.75),0 0 40px rgba(91,138,240,.1) }
  to  { box-shadow:0 28px 80px rgba(0,0,0,.75),0 0 100px rgba(139,92,246,.22) }
}

/* ── CORNER BRACKETS ────────────────────────────────────────── */
.corner-bracket { position:relative; }
.corner-bracket::before, .corner-bracket::after {
  content:''; position:absolute;
  width:18px; height:18px; opacity:0; transition:opacity .3s, transform .3s;
}
.corner-bracket::before {
  top:10px; left:10px;
  border-top:2px solid rgba(91,138,240,.55);
  border-left:2px solid rgba(91,138,240,.55);
  transform:translate(-4px,-4px);
}
.corner-bracket::after {
  bottom:10px; right:10px;
  border-bottom:2px solid rgba(139,92,246,.45);
  border-right:2px solid rgba(139,92,246,.45);
  transform:translate(4px,4px);
}
.corner-bracket:hover::before { opacity:1; transform:none; }
.corner-bracket:hover::after  { opacity:1; transform:none; }

/* ── MOBILE ─────────────────────────────────────────────────── */
@media(max-width:768px){
  .pre__rings{width:240px;height:240px}
  .pre__icon{width:60px;height:60px;border-radius:18px}
  .pre__wordmark{font-size:1.5rem}
  .scroll-hint{display:none}
}