/* =====================================================
   ytdl — style.css  v4
   • blurred banner hero  • smooth float travel
   • water-surface emergence  • jump-free handoff
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #080b10;
  --bg-2:         #0d1117;
  --bg-card:      rgba(255,255,255,0.04);
  --bg-card-h:    rgba(255,255,255,0.07);
  --border:       rgba(255,255,255,0.07);
  --border-h:     rgba(255,255,255,0.14);
  --text:         #e8eaf0;
  --text-muted:   #7a8190;
  --text-dim:     #4a5060;
  --accent:       #4f8ef7;
  --accent-glow:  rgba(79,142,247,0.35);
  --yt:  #FF0000;  --ig: #E1306C;
  --sp:  #1DB954;
  --tt:  #EE1D52;  --sc: #FF5500;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --radius-lg: 20px;  --radius-xl: 28px;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

body.intro-active { overflow: hidden; }
body.intro-active .main-content { opacity: 0; pointer-events: none; user-select: none; }
.main-content { opacity: 1; transition: opacity 0.7s ease; position: relative; }

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
svg { display: block; }
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* =====================================================
   INTRO
   ===================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: radial-gradient(ellipse 70% 60% at 50% 50%,
    rgba(79,142,247,0.06) 0%, transparent 70%);
}

.intro.intro-exit {
  animation: introFadeOut 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes introFadeOut { to { opacity: 0; pointer-events: none; } }

.intro-scene {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Ripple rings ── */
.intro-ripples {
  position: absolute;
  top: 50%; left: 50%;
  width: 194px; height: 194px;
  margin: -97px 0 0 -97px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(79,142,247,0.4);
  opacity: 0;
}
.intro-ripples.ripples-go .rp1 { animation: rippleExpand 3s ease-out infinite; }
.intro-ripples.ripples-go .rp2 { animation: rippleExpand 3s ease-out infinite 1s; }
.intro-ripples.ripples-go .rp3 { animation: rippleExpand 3s ease-out infinite 2s; }

@keyframes rippleExpand {
  0%   { transform: scale(1);   opacity: 0.55; border-color: rgba(79,142,247,0.55); }
  55%  { border-color: rgba(120,80,255,0.2); }
  100% { transform: scale(3.2); opacity: 0;   border-color: transparent; }
}

/* Splash rings — created dynamically by JS */
.splash-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 2px solid rgba(130,200,255,0.75);
  pointer-events: none;
  z-index: 5;
  animation: splashRing 0.55s cubic-bezier(0.2,1,0.4,1) forwards;
}
@keyframes splashRing {
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0.85; }
  100% { transform: translate(-50%,-50%) scale(4.2); opacity: 0; }
}

/* ── Profile wrap ── */
.intro-profile-wrap {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 2;
  opacity: 0;
  filter: blur(14px);
}

/* Liquid morphing edge — blob animation */
.intro-profile-img {
  width: 188px; height: 188px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  position: relative;
  z-index: 2;
  animation: liquidMorph 7s ease-in-out infinite;
}
@keyframes liquidMorph {
  0%,100% { border-radius: 50%; }
  18%  { border-radius: 58% 42% 46% 54% / 43% 60% 40% 57%; }
  36%  { border-radius: 43% 57% 54% 46% / 60% 41% 59% 40%; }
  54%  { border-radius: 55% 45% 43% 57% / 46% 55% 45% 54%; }
  72%  { border-radius: 46% 54% 60% 40% / 55% 46% 54% 46%; }
}

/* Glow — filtered through liquid SVG */
.intro-profile-glow {
  position: absolute;
  inset: -38px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(79,142,247,0.30)  0%,
    rgba(120,80,255,0.14) 42%,
    transparent 70%);
  z-index: 1;
  filter: url(#f-liquid);
  animation: glowBreathe 4.5s ease-in-out infinite;
}
@keyframes glowBreathe {
  0%,100% { opacity: 0.6;  transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.14); }
}

.intro-profile-wrap.profile-floating {
  animation: profileFloat 5.5s ease-in-out infinite;
}
@keyframes profileFloat {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -9px; }
}

/* ── Platform logos ── */
.intro-logos {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.intro-logo {
  position: absolute;
  top: 50%; left: 50%;
  width: 58px; height: 58px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 36px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.12);
  opacity: 0;
  will-change: transform, opacity, filter;
}
.intro-logo-tt { background: #010101; }

.intro-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 7px;
}
.intro-logo-tt img { padding: 5px; }

/*
 * logo-placed — ONLY enables the CSS floating animation.
 * Position is held permanently in inline transform set by JS.
 * Float uses individual CSS 'translate'+'rotate' props which
 * COMPOSE with inline transform → zero jump, zero conflict.
 */
.intro-logo-yt.logo-placed { animation: floatYt 4.4s ease-in-out infinite; }
.intro-logo-sp.logo-placed { animation: floatSp 4.6s ease-in-out infinite 0.9s; }
.intro-logo-ig.logo-placed { animation: floatIg 5.0s ease-in-out infinite 0.7s; }
.intro-logo-tt.logo-placed { animation: floatTt 5.3s ease-in-out infinite 1.2s; }
.intro-logo-sc.logo-placed { animation: floatSc 4.1s ease-in-out infinite 0.4s; }

@keyframes floatYt {
  0%,100% { translate:  0px   0px;  rotate:  0.0deg; }
  35%     { translate: -6px  -7px;  rotate: -2.2deg; }
  70%     { translate:  4px   4px;  rotate:  1.4deg; }
}
@keyframes floatIg {
  0%,100% { translate:  0px   0px;  rotate:  0.0deg; }
  40%     { translate:  6px  -6px;  rotate:  2.0deg; }
  75%     { translate: -4px   5px;  rotate: -1.3deg; }
}
@keyframes floatTt {
  0%,100% { translate:  0px   0px;  rotate:  0.0deg; }
  30%     { translate: -5px   7px;  rotate:  2.4deg; }
  65%     { translate:  5px  -4px;  rotate: -1.6deg; }
}
@keyframes floatSp {
  0%,100% { translate:  0px   0px;  rotate:  0.0deg; }
  38%     { translate: -5px  -7px;  rotate:  2.2deg; }
  72%     { translate:  4px   4px;  rotate: -1.5deg; }
}
@keyframes floatSc {
  0%,100% { translate:  0px   0px;  rotate:  0.0deg; }
  45%     { translate:  6px   6px;  rotate: -2.1deg; }
  80%     { translate: -5px  -4px;  rotate:  1.7deg; }
}

/* =====================================================
   HERO — blurred banner background
   ===================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 120px 0 90px;
}

/* ── Cinematic blurred banner ── */
.hero-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  /* scale slightly to hide blur bleeding edges */
  transform: scale(1.1);
  filter: blur(9px) brightness(0.36) saturate(1.7);
}

/* Multi-stop overlay: dark vignette + fade-to-bg at bottom */
.hero-banner-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(8,11,16,0.15)  0%,
      rgba(8,11,16,0.40)  35%,
      rgba(8,11,16,0.78)  70%,
      rgba(8,11,16,1.00) 100%),
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(79,142,247,0.07) 0%, transparent 60%);
}

/* ── Hero inner content ── */
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 25%, rgba(255,255,255,0.48) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-family: var(--font-head);
  font-size: clamp(1rem, 3vw, 1.45rem);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.hero-desc {
  max-width: 520px;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.hero-username {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Floating platform decorations */
.hero-floats {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hf { position: absolute; opacity: 0.065; }
.hf img { border-radius: 11px; filter: blur(0.4px); }

/* Repositioned to avoid clash with scatter logos */
.hf-1 { top: 14%;    left: 8%;   width: 50px; animation: hfFloat1  7.0s ease-in-out infinite 0.0s; }
.hf-2 { top: 22%;    right: 9%;  width: 44px; animation: hfFloat2  9.5s ease-in-out infinite 1.5s; }
.hf-3 { bottom: 26%; left: 6%;   width: 40px; animation: hfFloat3  8.2s ease-in-out infinite 0.8s; }
.hf-4 { bottom: 16%; right: 7%;  width: 48px; animation: hfFloat4  7.5s ease-in-out infinite 2.5s; }

@keyframes hfFloat1 { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-14px)} }
@keyframes hfFloat2 { 0%,100%{transform:translateY(0)}  50%{transform:translateY(12px)}  }
@keyframes hfFloat3 { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-11px)} }
@keyframes hfFloat4 { 0%,100%{transform:translateY(0)}  50%{transform:translateY(14px)}  }

/* =====================================================
   BUTTONS
   ===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover {
  background: #3d7ae8;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--accent-glow);
}
.btn-primary:active { transform: translateY(0); }
.btn-lg { padding: 16px 36px; font-size: 1.05rem; }
.btn-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* =====================================================
   SECTIONS
   ===================================================== */

section { padding: 90px 0; }

.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 14px;
}
.section-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 500px;
  margin: 0 auto 52px;
  line-height: 1.7;
}
section + section { border-top: 1px solid var(--border); }

/* =====================================================
   PLATFORMS
   ===================================================== */

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.platform-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.platform-card:hover { background: var(--bg-card-h); border-color: var(--border-h); transform: translateY(-4px); }

.platform-icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.platform-icon-tt { background: #010101; }
.platform-icon img { width:100%; height:100%; object-fit:contain; padding:10px; }
.platform-icon-tt img { padding: 8px; }

.platform-card h3 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.platform-card p  { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }

.platform-yt:hover { box-shadow: 0 0 0 1px rgba(255,0,0,.2),   0 8px 28px rgba(255,0,0,.1);   border-color: rgba(255,0,0,.2); }
.platform-ig:hover { box-shadow: 0 0 0 1px rgba(225,48,108,.2), 0 8px 28px rgba(225,48,108,.1); border-color: rgba(225,48,108,.2); }
.platform-tt:hover { box-shadow: 0 0 0 1px rgba(238,29,82,.2),  0 8px 28px rgba(238,29,82,.1);  border-color: rgba(238,29,82,.2); }
.platform-sc:hover { box-shadow: 0 0 0 1px rgba(255,85,0,.2),   0 8px 28px rgba(255,85,0,.1);   border-color: rgba(255,85,0,.2); }
.platform-sp:hover { box-shadow: 0 0 0 1px rgba(29,185,84,.2), 0 8px 28px rgba(29,185,84,.1); border-color: rgba(29,185,84,.2); }

/* =====================================================
   FORMATS
   ===================================================== */

.formats { background: var(--bg-2); }
.format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.format-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.format-card:hover { border-color: var(--border-h); box-shadow: 0 4px 24px rgba(0,0,0,.25); }
.format-header {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}
.format-logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.format-logo-tt { background: #010101; }
.format-logo img { width:100%; height:100%; object-fit:contain; padding:5px; }
.format-logo-tt img { padding: 4px; }
.format-name { font-family: var(--font-head); font-size: 1rem; font-weight: 600; }
.format-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.format-group { display: flex; flex-direction: column; gap: 7px; }
.format-label { font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.format-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 100px;
  font-size: .75rem; font-weight: 600;
  background: rgba(255,255,255,.06); color: var(--text-muted); border: 1px solid var(--border);
}
.badge-hi    { background:rgba(79,142,247,.12); color:#7eb3fa; border-color:rgba(79,142,247,.25); }
.badge-audio { background:rgba(255,85,0,.10);   color:#ff8a50; border-color:rgba(255,85,0,.2);   }
.formats-note { text-align:center; color:var(--text-dim); font-size:.82rem; margin-top:32px; }

/* =====================================================
   HOW IT WORKS
   ===================================================== */

.howto { background: var(--bg); }
.steps { display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.step { flex:1; min-width:160px; max-width:220px; text-align:center; padding:24px 16px; }
.step-num {
  font-family:var(--font-head); font-size:2.5rem; font-weight:800; margin-bottom:12px;
  background:linear-gradient(135deg,var(--accent) 0%,rgba(79,142,247,.3) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.step h3 { font-family:var(--font-head); font-size:1rem; font-weight:600; margin-bottom:8px; }
.step p  { font-size:.87rem; color:var(--text-muted); line-height:1.6; }
.step-arrow { padding:24px 8px 0; font-size:1.5rem; color:var(--text-dim); align-self:flex-start; margin-top:28px; }

/* =====================================================
   FINAL CTA
   ===================================================== */

.final-cta { background: var(--bg-2); text-align:center; }
.cta-box {
  position:relative; max-width:560px; margin:0 auto; padding:60px 40px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden;
}
.cta-glow {
  position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:300px; height:200px;
  background:radial-gradient(ellipse,var(--accent-glow) 0%,transparent 70%);
  pointer-events:none; opacity:.5;
}
.cta-box h2 { font-family:var(--font-head); font-size:clamp(1.6rem,4vw,2.2rem); font-weight:700; letter-spacing:-.03em; margin-bottom:12px; }
.cta-box p  { color:var(--text-muted); margin-bottom:32px; font-size:.95rem; }

/* =====================================================
   FOOTER
   ===================================================== */

.site-footer { background:var(--bg); border-top:1px solid var(--border); padding:40px 0; }
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.footer-brand { display:flex; align-items:center; gap:10px; }
.footer-logo  { font-family:var(--font-head); font-size:1.3rem; font-weight:800; color:#fff; }
.footer-tagline { font-size:.85rem; color:var(--text-dim); }
.footer-links a { font-size:.85rem; color:var(--accent); font-weight:500; transition:color .2s; }
.footer-links a:hover { color:#7eb3fa; }
.footer-copy { font-size:.78rem; color:var(--text-dim); }



/* =====================================================
   PAGE SCATTER — random margin logos, absolute in page
   Logos sit in the empty space left/right of content.
   Positions use calc(50% ± Xpx) so they always land
   outside the 1140px content column regardless of viewport.
   Hidden below 1300px where margins disappear.
   ===================================================== */

.page-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* Base logo tile */
.ps-logo {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
}
.ps-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
  display: block;
}
.ps-tt { background: #010101; }
.ps-tt img { padding: 6px; }

/* ── Left margin — varied heights & horizontal offsets ── */
.ps-1 {
  top: 6%;  left: calc(50% - 648px);
  width: 50px; height: 50px; opacity: 0.10;
  animation: psFloat2 8.0s ease-in-out infinite 0.0s;
}
.ps-2 {
  top: 29%; left: calc(50% - 612px);
  width: 40px; height: 40px; opacity: 0.08;
  animation: psFloat4 9.5s ease-in-out infinite 1.7s;
}
.ps-3 {
  top: 57%; left: calc(50% - 658px);
  width: 54px; height: 54px; opacity: 0.11;
  animation: psFloat1 7.5s ease-in-out infinite 0.9s;
}
.ps-4 {
  top: 83%; left: calc(50% - 606px);
  width: 38px; height: 38px; opacity: 0.07;
  animation: psFloat3 10.0s ease-in-out infinite 3.0s;
}

/* ── Right margin — offset heights so no logo aligns with hero floats ── */
.ps-5 {
  top: 16%; right: calc(50% - 636px);
  width: 46px; height: 46px; opacity: 0.09;
  animation: psFloat3 8.5s ease-in-out infinite 0.4s;
}
.ps-6 {
  top: 40%; right: calc(50% - 658px);
  width: 52px; height: 52px; opacity: 0.11;
  animation: psFloat1 7.0s ease-in-out infinite 2.2s;
}
.ps-7 {
  top: 65%; right: calc(50% - 608px);
  width: 36px; height: 36px; opacity: 0.07;
  animation: psFloat2 11.0s ease-in-out infinite 1.1s;
}
.ps-8 {
  top: 87%; right: calc(50% - 644px);
  width: 48px; height: 48px; opacity: 0.09;
  animation: psFloat4 8.0s ease-in-out infinite 2.8s;
}

/* Hide when viewport is too narrow for margins */
@media (max-width: 1300px) { .page-scatter { display: none; } }

/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .intro.intro-exit              { animation:none!important; opacity:0; pointer-events:none; }
  .intro-profile-wrap            { transition:opacity .4s ease!important; }
  .intro-logo.logo-placed        { animation:none!important; }
  .intro-profile-wrap.profile-floating { animation:none!important; }
  .intro-profile-glow            { animation:none!important; }
  .intro-profile-img             { animation:none!important; }
  .ripple, .splash-ring          { animation:none!important; }
  .hero-avatar-ring              { animation:none!important; }
  .hf                            { animation:none!important; }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
  section { padding:64px 0; }
  .intro-scene { width:310px; height:310px; }
  .intro-profile-img { width:132px; height:132px; }
  .intro-ripples { width:128px; height:128px; margin:-64px 0 0 -64px; }
  .intro-logo { width:44px; height:44px; border-radius:12px; }
  .steps { flex-direction:column; align-items:center; gap:16px; }
  .step-arrow { transform:rotate(90deg); margin:-8px 0; padding:0; }
  .step { max-width:100%; width:100%; }
  .cta-box { padding:40px 24px; }
  .hf { display:none; }
}

@media (max-width: 480px) {
  .platform-grid { grid-template-columns:1fr 1fr; }
  .format-grid   { grid-template-columns:1fr; }
  .btn-lg { padding:14px 24px; font-size:.95rem; }
}