/* Yeeps Channel - combined clean + bold + flashy stylesheet
   Uses Londrina Solid for bold headings.
   Replace the iframe VIDEO_ID in index.html with your trailer's YouTube ID.
*/

:root{
  --bg-1: #6a19f2; /* purple */
  --bg-2: #e64adf; /* pink */
  --bg-3: #6be0ff; /* light blue */
  --glass: rgba(255,255,255,0.06);
  --muted: rgba(255,255,255,0.75);
  --radius: 14px;
  --max-width: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(106,25,242,0.12), transparent),
              radial-gradient(900px 500px at 90% 90%, rgba(107,224,255,0.06), transparent),
              linear-gradient(180deg, #050012 0%, #07021a 100%);
  color: white;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-height:100vh;
}

/* Header */
.site-header{
  position:fixed;
  top:16px;
  left:16px;
  right:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:40;
  pointer-events:none;
}
.logo{
  height:72px;
  width:auto;
  pointer-events:auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
}

/* Hero */
.hero{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:120px 24px 48px;
}

.hero-inner{
  max-width:var(--max-width);
  width:100%;
  text-align:center;
  padding:48px;
  border-radius:22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(6px) saturate(110%);
  box-shadow: 0 10px 40px rgba(9,6,20,0.6);
  position:relative;
  overflow:visible;
}

/* Title */
.title{
  font-family: 'Londrina Solid', cursive;
  font-weight:700;
  font-size:clamp(36px, 6vw, 72px);
  letter-spacing:1px;
  margin:10px 0 6px;
  background: linear-gradient(90deg, var(--bg-1), var(--bg-2), var(--bg-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 18px rgba(106,25,242,0.12);
}

.tagline{
  color:var(--muted);
  margin: 0 0 18px;
  font-size:clamp(14px, 1.8vw, 18px);
}

/* Media & Buttons */
.media-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:center;
  justify-items:center;
  margin-top:18px;
}

.video-frame{
  width:100%;
  max-width:900px;
  aspect-ratio:16/9;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 12px 30px rgba(19,7,89,0.5);
}

.video-frame iframe{
  width:100%;
  height:100%;
  display:block;
}

/* CTA */
.cta-row{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  margin-top:6px;
  flex-wrap:wrap;
}

.btn{
  pointer-events:auto;
  display:inline-flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  padding:12px 18px;
  border-radius:12px;
  font-family: 'Londrina Solid', cursive;
  font-weight:700;
  letter-spacing:0.6px;
  transition:transform .18s ease, box-shadow .18s ease;
  transform:translateZ(0);
  user-select:none;
  border: none;
}

.btn .icon{ width:20px; height:20px; opacity:0.95; }

.btn-primary{
  background: linear-gradient(90deg, rgba(106,25,242,0.98), rgba(230,74,223,0.95));
  box-shadow: 0 8px 30px rgba(230,74,223,0.12), 0 2px 8px rgba(106,25,242,0.18);
  color: white;
}

.btn-primary:hover{ transform:translateY(-4px) scale(1.01); box-shadow: 0 18px 60px rgba(230,74,223,0.18); }

.btn-ghost{
  background: transparent;
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  padding:10px 16px;
}

.btn-ghost:hover{ transform:translateY(-3px); color:white; border-color: rgba(255,255,255,0.12); }

/* Decorative animated lines */
.decorations{
  position:absolute;
  left:0;
  right:0;
  bottom:-28px;
  display:flex;
  justify-content:center;
  gap:12px;
  pointer-events:none;
}

.line{
  width:75%;
  height:6px;
  opacity:0.5;
  filter: blur(0.6px);
}

.line path{
  stroke: url(#grad) ;
  stroke-width:2;
  stroke-linecap:round;
  stroke: linear-gradient(90deg, var(--bg-1), var(--bg-2), var(--bg-3));
}

/* We'll fake movement via transforms */
.line-1{ transform: translateY(0); animation: float 6s ease-in-out infinite; opacity:0.18; }
.line-2{ transform: translateY(6px); animation: float 5s ease-in-out infinite reverse; opacity:0.12; }
.line-3{ transform: translateY(12px); animation: float 7s ease-in-out infinite; opacity:0.08; }

@keyframes float{
  0%{ transform: translateY(0) translateX(-4%); filter: blur(0.2px); }
  50%{ transform: translateY(6px) translateX(4%); filter: blur(0.8px); }
  100%{ transform: translateY(0) translateX(-4%); filter: blur(0.2px); }
}

/* Footer */
.site-footer{
  margin-top:auto;
  padding:36px 16px;
  color:rgba(255,255,255,0.6);
  font-size:14px;
  text-align:center;
}

.footer-inner{ max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }

.socials a{ color:rgba(255,255,255,0.6); text-decoration:none; margin-right:12px; }
.socials a:hover{ color:white; text-decoration:underline; }

/* Responsive tweaks */
@media (max-width:800px){
  .site-header{ top:8px; left:8px; right:8px; }
  .logo{ height:56px; }
  .hero-inner{ padding:24px; border-radius:16px; }
  .cta-row{ gap:8px; }
}

@media (max-width:520px){
  .title{ font-size: clamp(28px, 8vw, 42px); }
  .video-frame{ max-width:100%; border-radius:12px; }
  .logo{ height:46px; }
}