/* NOVA VIRAL AD - HYPER DYNAMIC MOTION CSS */

:root {
  --lime:   #CCFF00;
  --pink:   #FF3CAC;
  --cyan:   #00F5FF;
  --orange: #FF6B00;
  --black:  #0A0A0A;
  --white:  #FFFFFF;
  --purple: #7B2FFF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100dvh;
  position: relative;
  user-select: none;
}

.noise-overlay {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: noiseShift 0.12s steps(1) infinite;
}
@keyframes noiseShift {
  0%   { background-position: 0 0; }
  33%  { background-position: -40px 25px; }
  66%  { background-position: 20px -35px; }
  100% { background-position: -25px 15px; }
}

.scanlines {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px
  );
}

.flash-overlay {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: #fff; opacity: 0; transition: opacity 0.05s;
}
.flash-overlay.active { opacity: 0.88; }

.glitch-overlay {
  position: fixed; inset: 0; z-index: 198; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, #00F5FF 0%, transparent 30%, #FF3CAC 70%, transparent 100%);
  mix-blend-mode: screen;
}
.glitch-overlay.active { opacity: 0.28; animation: glitchShake 0.1s steps(2) 3; }
@keyframes glitchShake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-8px) skewX(-2deg); }
  50%  { transform: translateX(8px) skewX(2deg); }
  75%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* UI BAR */
.ui-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 100%);
}
.ui-bar__left { display: flex; align-items: center; gap: 8px; flex: 1; }
.live-badge {
  background: #FF0000; color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; padding: 3px 8px; border-radius: 4px;
  animation: livePulse 1s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
.ui-bar__handle { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); }
.ui-bar__center { flex: 2; }
.progress-bar { height: 3px; background: rgba(255,255,255,0.18); border-radius: 2px; overflow: hidden; }
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--lime), var(--cyan), var(--pink));
  border-radius: 2px; transition: width 0.1s linear;
}
.ui-bar__right { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; }
.view-count { font-variant-numeric: tabular-nums; }

/* TICKER */
.ticker-wrap {
  position: fixed; top: 44px; left: 0; right: 0; z-index: 149; overflow: hidden;
  background: rgba(0,0,0,0.55);
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 5px 0;
}
.ticker-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: tickerScroll 18s linear infinite;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--lime); text-transform: uppercase;
}
.ticker-track span { flex-shrink: 0; }
@keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* STAGE */
.stage { position: fixed; inset: 0; overflow: hidden; }
.scene-container { position: relative; width: 100%; height: 100%; }

.scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; overflow: hidden;
}
.scene.active { opacity: 1; pointer-events: all; }

/* SCENE BACKGROUNDS */
.scene__bg { position: absolute; inset: 0; z-index: 0; }
.scene__bg--1 { background: radial-gradient(ellipse at 30% 50%, #1a0033 0%, #0A0A0A 60%); }
.scene__bg--1::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(204,255,0,0.15) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(255,60,172,0.2) 0%, transparent 40%);
}
.scene__bg--2 { background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a0a0a 100%); }
.scene__bg--2::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,245,255,0.12) 0%, transparent 60%);
}
.scene__bg--3 { background: radial-gradient(ellipse at center, #0d1a00 0%, #0A0A0A 70%); }
.scene__bg--3::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(204,255,0,0.25) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(123,47,255,0.2) 0%, transparent 40%);
}
.scene__bg--4 { background: linear-gradient(160deg, #0a0a0a 0%, #1a0a00 50%, #0a0a0a 100%); }
.scene__bg--4::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,107,0,0.15) 0%, transparent 60%);
}
.scene__bg--5 { background: linear-gradient(135deg, #1a0020 0%, #0a0a0a 50%, #001a1a 100%); }
.scene__bg--5::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,60,172,0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0,245,255,0.15) 0%, transparent 40%);
}
.scene__bg--6 { background: radial-gradient(ellipse at center, #0d1a00 0%, #0A0A0A 60%); }
.scene__bg--6::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(204,255,0,0.3) 0%, transparent 50%);
}

/* SCENE CONTENT */
.scene__content {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px; padding: 80px 24px 100px; width: 100%;
}
.scene__content--grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; padding: 80px 24px 160px; align-items: start; justify-items: center;
}

/* KINETIC WORDS */
.kinetic-word {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(52px, 14vw, 96px);
  font-weight: 900; line-height: 0.9; letter-spacing: -0.02em;
  color: var(--white); text-transform: uppercase;
  opacity: 0; transform: scale(0.5) translateY(40px);
  will-change: transform, opacity;
}
.kinetic-word--sm  { font-size: clamp(18px,5vw,32px); font-weight:600; letter-spacing:0.05em; text-transform:lowercase; color:rgba(255,255,255,0.7); }
.kinetic-word--lg  { font-size: clamp(44px,11vw,80px); }
.kinetic-word--xl  { font-size: clamp(64px,18vw,120px); line-height:0.85; }
.kinetic-word--hero{ font-size: clamp(72px,22vw,160px); line-height:0.8; letter-spacing:-0.04em; }

.accent-pink  { color: var(--pink)   !important; }
.accent-cyan  { color: var(--cyan)   !important; }
.accent-lime  { color: var(--lime)   !important; }
.accent-orange{ color: var(--orange) !important; }
.dot-accent   { color: var(--lime); }

/* ANIMATION CLASSES */
.kinetic-word.anim-slam       { animation: wordSlam      0.25s cubic-bezier(0.22,1,0.36,1) forwards; }
.kinetic-word.anim-zoom-in    { animation: wordZoom      0.3s  cubic-bezier(0.34,1.56,0.64,1) forwards; }
.kinetic-word.anim-slide-up   { animation: wordSlideUp   0.3s  cubic-bezier(0.22,1,0.36,1) forwards; }
.kinetic-word.anim-slide-left { animation: wordSlideLeft 0.3s  cubic-bezier(0.22,1,0.36,1) forwards; }
.kinetic-word.anim-explode    { animation: wordExplode   0.4s  cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
.kinetic-word.anim-in         { animation: wordIn        0.35s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }

@keyframes wordIn        { from{opacity:0;transform:scale(0.5) translateY(40px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes wordSlam      { 0%{opacity:0;transform:scale(2.5) translateY(-20px)} 60%{opacity:1;transform:scale(0.92) translateY(4px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
@keyframes wordZoom      { 0%{opacity:0;transform:scale(0.1)} 70%{opacity:1;transform:scale(1.08)} 100%{opacity:1;transform:scale(1)} }
@keyframes wordSlideUp   { from{opacity:0;transform:translateY(60px) scale(0.9)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes wordSlideLeft { from{opacity:0;transform:translateX(-80px) scale(0.9)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes wordExplode   { 0%{opacity:0;transform:scale(0.3) rotate(-5deg)} 50%{opacity:1;transform:scale(1.15) rotate(1deg)} 100%{opacity:1;transform:scale(1) rotate(0deg)} }

.sub-text { font-size:clamp(14px,4vw,20px); font-weight:400; color:rgba(255,255,255,0.65); letter-spacing:0.02em; opacity:0; transform:translateY(20px); margin-top:8px; }
.sub-text.visible { animation: fadeSlideUp 0.4s ease forwards; }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.emoji-burst { font-size:clamp(28px,8vw,48px); letter-spacing:8px; opacity:0; transform:scale(0); margin-top:8px; }
.emoji-burst.visible { animation: emojiBurst 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes emojiBurst { from{opacity:0;transform:scale(0) rotate(-10deg)} to{opacity:1;transform:scale(1) rotate(0deg)} }

/* CORNER TAGS */
.corner-tag {
  position:absolute; z-index:20; font-size:11px; font-weight:800; letter-spacing:0.15em;
  padding:4px 10px; border:1.5px solid rgba(255,255,255,0.3); border-radius:4px;
  color:rgba(255,255,255,0.6); backdrop-filter:blur(4px);
}
.corner-tag--tl { top:80px; left:16px; }
.corner-tag--br { bottom:110px; right:16px; color:var(--lime); border-color:var(--lime); }

.floating-tag {
  position:absolute; z-index:20; font-size:12px; font-weight:700; letter-spacing:0.08em;
  padding:6px 14px; background:var(--pink); color:#fff; border-radius:20px;
  transform:rotate(-8deg); opacity:0;
  animation: floatTagIn 0.4s 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes floatTagIn { from{opacity:0;transform:rotate(-8deg) scale(0)} to{opacity:1;transform:rotate(-8deg) scale(1)} }

/* ORBIT RINGS */
.orbit-ring {
  position:absolute; z-index:5; width:300px; height:300px;
  border:1.5px solid rgba(204,255,0,0.2); border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation: orbitSpin 8s linear infinite;
}
.orbit-ring--2 { width:450px; height:450px; border-color:rgba(255,60,172,0.15); animation:orbitSpin 12s linear infinite reverse; }
@keyframes orbitSpin { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }

/* FEATURE PILLS */
.feature-pill {
  font-size:clamp(13px,3.5vw,18px); font-weight:800; letter-spacing:0.06em;
  padding:12px 20px; border-radius:50px;
  background:rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.15);
  color:#fff; opacity:0; transform:scale(0.5) translateY(20px);
  backdrop-filter:blur(8px); white-space:nowrap;
}
.feature-pill.visible { animation: pillIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes pillIn { from{opacity:0;transform:scale(0.5) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
.fp2{background:rgba(204,255,0,0.12);border-color:rgba(204,255,0,0.3);color:var(--lime)}
.fp3{background:rgba(255,60,172,0.12);border-color:rgba(255,60,172,0.3);color:var(--pink)}
.fp4{background:rgba(0,245,255,0.12);border-color:rgba(0,245,255,0.3);color:var(--cyan)}
.fp5{background:rgba(255,107,0,0.12);border-color:rgba(255,107,0,0.3);color:var(--orange)}
.fp6{background:rgba(123,47,255,0.12);border-color:rgba(123,47,255,0.3);color:#b47fff}

/* BIG NUMBER */
.big-number {
  position:absolute; bottom:110px; left:0; right:0; text-align:center;
  font-size:clamp(48px,14vw,96px); font-weight:900; color:var(--lime);
  letter-spacing:-0.03em; line-height:1; z-index:10;
  text-shadow:0 0 40px rgba(204,255,0,0.5);
}
.big-number-label {
  position:absolute; bottom:90px; left:0; right:0; text-align:center;
  font-size:12px; font-weight:600; letter-spacing:0.1em;
  color:rgba(255,255,255,0.5); text-transform:uppercase; z-index:10;
}

.stars-row { font-size:clamp(24px,7vw,40px); color:#FFD700; letter-spacing:4px; opacity:0; transform:translateY(20px); margin-bottom:8px; }
.stars-row.visible { animation: fadeSlideUp 0.4s ease forwards; }
.review-author { font-size:clamp(12px,3vw,16px); font-weight:400; color:rgba(255,255,255,0.5); margin-top:12px; opacity:0; }
.review-author.visible { animation: fadeSlideUp 0.4s ease forwards; }

/* REACTION STREAM */
.reaction-stream { position:absolute; right:16px; top:80px; bottom:100px; width:40px; overflow:hidden; z-index:20; pointer-events:none; }
.reaction-emoji { position:absolute; font-size:22px; right:0; animation: reactionFloat 2.5s ease-out forwards; }
@keyframes reactionFloat {
  0%  { bottom:0; opacity:1; transform:translateX(0) scale(0.5); }
  20% { transform:translateX(-8px) scale(1.1); }
  60% { transform:translateX(4px) scale(1); opacity:0.8; }
  100%{ bottom:100%; opacity:0; transform:translateX(-4px) scale(0.8); }
}

/* CTA BUTTON */
.cta-button {
  display:flex; align-items:center; gap:12px;
  background:var(--lime); color:#0A0A0A; border:none; border-radius:60px;
  padding:18px 36px; cursor:pointer; font-family:'Outfit',sans-serif;
  font-size:clamp(16px,4vw,22px); font-weight:900; letter-spacing:0.08em;
  text-transform:uppercase; margin-top:16px; opacity:0; transform:scale(0.8);
  position:relative; overflow:hidden;
  box-shadow:0 0 40px rgba(204,255,0,0.4),0 0 80px rgba(204,255,0,0.2);
}
.cta-button.visible { animation: ctaIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes ctaIn { from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }
.cta-button::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.4) 50%,transparent 100%);
  transform:translateX(-100%); animation:ctaShine 2.5s ease-in-out infinite;
}
@keyframes ctaShine { 0%{transform:translateX(-100%)} 40%{transform:translateX(100%)} 100%{transform:translateX(100%)} }
.cta-button:hover { transform:scale(1.05); box-shadow:0 0 60px rgba(204,255,0,0.6),0 0 100px rgba(204,255,0,0.3); }
.cta-button__arrow { font-size:1.3em; animation:arrowBounce 0.8s ease-in-out infinite; }
@keyframes arrowBounce { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }

.cta-sub { font-size:clamp(11px,2.5vw,14px); color:rgba(255,255,255,0.45); margin-top:12px; letter-spacing:0.04em; opacity:0; }
.cta-sub.visible { animation: fadeSlideUp 0.4s ease forwards; }

/* CONFETTI */
.confetti-container { position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.confetti-piece { position:absolute; width:8px; height:8px; border-radius:2px; animation:confettiFall linear forwards; }
@keyframes confettiFall { 0%{transform:translateY(-20px) rotate(0deg);opacity:1} 100%{transform:translateY(110vh) rotate(720deg);opacity:0} }

/* TIKTOK ACTIONS */
.tiktok-actions { position:fixed; right:12px; bottom:80px; z-index:150; display:flex; flex-direction:column; gap:20px; align-items:center; }
.action-btn { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; transition:transform 0.2s; }
.action-btn:hover { transform:scale(1.15); }
.action-btn:active { transform:scale(0.9); }
.action-icon { font-size:28px; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.action-btn.liked .action-icon { animation:heartPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes heartPop { 0%{transform:scale(1)} 50%{transform:scale(1.5)} 100%{transform:scale(1)} }
.action-count { font-size:11px; font-weight:700; color:rgba(255,255,255,0.85); letter-spacing:0.02em; }

/* BOTTOM BAR */
.bottom-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:150; padding:10px 16px 16px;
  background:linear-gradient(0deg,rgba(0,0,0,0.9) 0%,transparent 100%);
  display:flex; align-items:center; justify-content:space-between;
}
.bottom-bar__track { display:flex; align-items:center; gap:10px; flex:1; overflow:hidden; }
.music-icon { font-size:18px; color:#fff; animation:musicSpin 3s linear infinite; flex-shrink:0; }
@keyframes musicSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.music-scroll { overflow:hidden; flex:1; }
.music-scroll span { display:inline-block; font-size:12px; font-weight:600; color:rgba(255,255,255,0.7); white-space:nowrap; animation:musicScroll 12s linear infinite; }
@keyframes musicScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* SCENE DOTS */
.scene-dots { display:flex; gap:5px; align-items:center; flex-shrink:0; }
.scene-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.3); transition:all 0.3s ease; cursor:pointer; }
.scene-dot.active { background:var(--lime); width:16px; border-radius:3px; box-shadow:0 0 8px rgba(204,255,0,0.6); }

/* EMOJI FLOAT */
.emoji-float-layer { position:fixed; inset:0; z-index:160; pointer-events:none; overflow:hidden; }
.float-emoji { position:absolute; font-size:clamp(20px,5vw,32px); animation:floatUp linear forwards; pointer-events:none; }
@keyframes floatUp { 0%{transform:translateY(0) scale(0.5) rotate(0deg);opacity:1} 100%{transform:translateY(-100vh) scale(1.2) rotate(20deg);opacity:0} }

/* SCENE TRANSITIONS */
.scene.entering { animation:sceneEnter 0.35s cubic-bezier(0.22,1,0.36,1) forwards; }
.scene.exiting  { animation:sceneExit  0.25s ease-in forwards; }
@keyframes sceneEnter { from{opacity:0;transform:scale(1.08)} to{opacity:1;transform:scale(1)} }
@keyframes sceneExit  { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(0.94)} }

@media (max-width:390px) {
  .tiktok-actions { right:8px; bottom:70px; }
  .kinetic-word { font-size:clamp(44px,13vw,80px); }
}