/* /public/css/index.css */
/* Stunde13 – Index Styling (düster, modern, episch) */

:root{
  --bg: #050508;
  --bg2:#07070c;
  --card:#0b0b12cc;
  --card2:#0d0d18e6;

  --text:#e8e8f2;
  --muted:#a7a7bf;

  --stroke: rgba(255,255,255,.08);
  --stroke2: rgba(255,255,255,.14);

  --glow: rgba(140, 90, 255, .22);
  --glow2: rgba(70, 210, 255, .14);

  --shadow: 0 18px 60px rgba(0,0,0,.65);
  --shadow2: 0 10px 40px rgba(0,0,0,.55);

  --radius: 18px;
  --radius2: 26px;

  --max: 1240px;
  --pad: clamp(16px, 2.6vw, 30px);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Player controls sizing */
  --vc-w: 56px;     /* width for play + volume capsule to match */
  --vc-mute: 42px;  /* mute button inside capsule */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;

  background-image:
    radial-gradient(1100px 500px at 50% -5%, rgba(120,90,255,.10), transparent 60%),
    radial-gradient(1000px 600px at 8% 35%, rgba(70,210,255,.07), transparent 65%),
    radial-gradient(900px 700px at 92% 40%, rgba(255,70,120,.05), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.88)),
    url("/public/img/bg.png");
  background-size: auto, auto, auto, auto, cover;
  background-position: center, center, center, center, center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a{ color:inherit; text-decoration:none; }
button, input{ font: inherit; }

.page-index .site-main{
  position: relative;
  z-index: 1;
}

/* Soft film grain */
.page-index .site-main:before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.07;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* -------------------------------------
   HERO / INTRO VIDEO
------------------------------------- */

.hero{
  position: relative;
  margin-top: clamp(18px, 2.2vw, 26px);
  padding: 0 var(--pad);
  z-index: 2;
  scroll-margin-top: 120px;
}

.hero-media{
  position: relative;
  border-radius: var(--radius2);
  overflow: hidden;

  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(140,90,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(12,12,20,.9), rgba(8,8,12,.92));

  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.hero-video{
  display:block;
  width: 100%;
  height: clamp(360px, 52vh, 560px);
  object-fit: cover;
  filter: contrast(1.06) saturate(.9) brightness(.75);
  transform: scale(1.01);
}

.hero-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(70,210,255,.06), transparent 55%),
    radial-gradient(900px 500px at 50% 15%, rgba(140,90,255,.10), transparent 55%),
    radial-gradient(100% 85% at 50% 45%, transparent 55%, rgba(0,0,0,.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}

/* -------------------------------------
   Custom Controls (bottom-right)
   Wunsch: Volume unten, Play darüber
------------------------------------- */

.video-controls{
  position:absolute;
  right: 18px;
  bottom: 18px;

  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;

  z-index: 3;
  pointer-events: auto;
}

/* Reihenfolge */
.vc-hint{ order: 1; }
#btnPlayPause{ order: 2; } /* Play über Volume */
.vc-volume{ order: 3; }    /* Volume ganz unten */

/* General glass button */
.vc-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,16,.55);
  color: rgba(255,255,255,.92);
  border-radius: 999px;

  padding: 10px 12px;
  line-height: 1;
  cursor:pointer;

  box-shadow: 0 14px 38px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, filter .15s ease;
}

.vc-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
  background: rgba(14,14,22,.62);
  box-shadow: 0 18px 48px rgba(0,0,0,.58);
}

.vc-btn:active{ transform: translateY(0px); }

.vc-icon{
  font-size: 16px;
  display:inline-block;
  transform: translateY(-.8px);
  font-weight: 700;
}

/* Play/Pause – gleiche Breite wie Volume-Kapsel */
#btnPlayPause{
  width: var(--vc-w);
  height: var(--vc-w);
  padding: 0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(260px 180px at 50% 10%, rgba(140,90,255,.18), transparent 62%),
    radial-gradient(220px 160px at 50% 120%, rgba(70,210,255,.10), transparent 65%),
    rgba(0,0,0,.30);

  box-shadow: 0 18px 50px rgba(0,0,0,.58);

  position: relative;
  overflow: hidden;
}

#btnPlayPause:before{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(90px 70px at 50% 20%, rgba(255,255,255,.05), transparent 70%);
  pointer-events:none;
}

#btnPlayPause .vc-icon{
  font-size: 17px;
  transform: translateY(-1.2px);
}

/* Volume capsule (unten) – gleiche Breite wie Play */
.vc-volume{
  width: var(--vc-w);
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;

  padding: 12px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);

  background:
    radial-gradient(260px 180px at 50% 10%, rgba(140,90,255,.16), transparent 62%),
    rgba(0,0,0,.30);

  box-shadow: 0 18px 50px rgba(0,0,0,.58);
  backdrop-filter: blur(10px);
}

/* Mute button inside capsule */
.vc-btn.vc-mute{
  width: var(--vc-mute);
  height: var(--vc-mute);
  padding: 0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-color: rgba(255,255,255,.12);
  background: rgba(10,10,16,.45);
  box-shadow: 0 14px 38px rgba(0,0,0,.55);
}

/* Vertical slider */
.vc-slider{
  height: 128px;
  width: 14px;
  cursor: pointer;

  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: bt-lr;

  accent-color: rgba(140,90,255,.78);
}

.vc-slider::-webkit-slider-runnable-track{
  width: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}

.vc-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(10px 10px at 35% 35%, rgba(255,255,255,.85), rgba(255,255,255,.35));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    0 10px 22px rgba(0,0,0,.55),
    0 10px 30px rgba(140,90,255,.12);
}

.vc-slider::-moz-range-track{
  width: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.vc-slider::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.25);
}

/* Hint */
.vc-hint{
  font-size: 12px;
  color: rgba(235,235,255,.76);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
  letter-spacing: .2px;
}

/* -------------------------------------
   SECTIONS
------------------------------------- */

.section{
  padding: 28px var(--pad);
  margin: 0 auto;
  max-width: calc(var(--max) + (var(--pad) * 2));
  position: relative;
  z-index: 2;
}

.section-head{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.section-title{
  margin:0;
  font-size: clamp(22px, 2.3vw, 30px);
  letter-spacing: .2px;
  text-shadow: 0 14px 40px rgba(0,0,0,.65);
}

.section-subtitle{
  margin:0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 70ch;
}

/* -------------------------------------
   PLAYLIST GRID
------------------------------------- */

.playlist-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.playlist-card{
  text-align:left;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(140,90,255,.16), transparent 55%),
    linear-gradient(180deg, rgba(13,13,22,.88), rgba(9,9,14,.90));
  box-shadow: var(--shadow2);
  padding: 16px 16px 14px;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
  position: relative;
  overflow:hidden;
}

.playlist-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 180px at 10% 20%, rgba(70,210,255,.10), transparent 55%),
    radial-gradient(520px 220px at 90% 0%, rgba(140,90,255,.18), transparent 60%);
  opacity:.55;
  pointer-events:none;
}

.playlist-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.03);
}

.pl-title{
  display:block;
  font-weight: 650;
  letter-spacing: .2px;
  margin-bottom: 6px;
}

.pl-meta{
  display:block;
  color: rgba(235,235,255,.70);
  font-size: 12px;
}

/* -------------------------------------
   VIDEO GRID (4x4)
------------------------------------- */

.video-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.video-card{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(14,14,24,.86), rgba(9,9,14,.92));
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}

.video-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  filter: brightness(1.03);
}

.video-frame{
  position: relative;
  aspect-ratio: 16/9;
  background:
    radial-gradient(900px 450px at 20% 0%, rgba(140,90,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(12,12,18,.95), rgba(6,6,10,.95));
  overflow:hidden;
}

.yt-embed{
  width: 100%;
  height: 100%;
  border: 0;
  display:block;
}

.video-skeleton{
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg, rgba(255,255,255,.04) 8%, rgba(255,255,255,.08) 18%, rgba(255,255,255,.04) 33%);
  background-size: 240% 100%;
  animation: shimmer 1.35s linear infinite;
  filter: brightness(.9);
}

@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

.video-badge{
  position:absolute;
  left: 12px;
  bottom: 12px;
  font-size: 12px;
  color: rgba(235,235,255,.82);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
}

.video-meta{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.vm-title{
  font-weight: 650;
  letter-spacing: .2px;
  font-size: 14px;
  color: rgba(255,255,255,.92);
}

.vm-sub{
  font-size: 12px;
  color: rgba(235,235,255,.65);
}

/* -------------------------------------
   PAGINATION
------------------------------------- */

.pagination-wrap{
  display:flex;
  justify-content: center;
  margin-top: 18px;
}

.pagination{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,10,16,.55);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}

.page-nav,
.page-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.30);
  color: rgba(245,245,255,.9);
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  user-select:none;
}

.page-nav:hover,
.page-num:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.40);
}

.page-num.is-active{
  border-color: rgba(140,90,255,.35);
  background:
    radial-gradient(240px 120px at 50% 0%, rgba(140,90,255,.22), transparent 60%),
    rgba(0,0,0,.35);
  box-shadow: 0 12px 35px rgba(140,90,255,.12);
}

.page-ellipsis{
  color: rgba(235,235,255,.55);
  padding: 0 6px;
}

.page-nav.is-disabled{
  opacity: .35;
  pointer-events:none;
}

/* -------------------------------------
   RESPONSIVE
------------------------------------- */

@media (max-width: 1120px){
  .playlist-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-slider{ height: 116px; }
}

@media (max-width: 640px){
  .hero{ padding: 0 12px; }
  .section{ padding: 22px 12px; }
  .playlist-grid{ grid-template-columns: 1fr; }
  .video-grid{ grid-template-columns: 1fr; }

  .video-controls{
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }

  :root{
    --vc-w: 54px;
    --vc-mute: 40px;
  }

  .vc-slider{ height: 104px; }
  .vc-hint{ display:none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .video-skeleton{ animation: none; }
  .playlist-card, .video-card, .vc-btn, .page-nav, .page-num{ transition:none; }
}