:root {
  /* Unified scale so player + strip stay in sync */
  --player-w: clamp(320px, 86vw, 1280px);
  --thumb-w: clamp(140px, 12vw, 210px);
  --gap: 36px;
  --move-t: 300ms;  /* unified with JS; smoother */
  --fade-t: 420ms;
  --bg: #000;
  --ink: #e0e0e0;
}

/* Global Reset & Body */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

/* Header */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 0 10px;
  background:#000;
}

/* Main Container */
.stage {
  max-width:1600px;
  margin:0 auto;
  padding:0 18px;
}

/* Video Player */
#player-frame { display:flex; justify-content:center; margin:12px 0 40px; }
.video-shell {
  position:relative;
  width:100%;
  max-width:var(--player-w);
  aspect-ratio:16/9;
  background:#000;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.video-shell iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--fade-t) ease;
}
.video-shell iframe.active { opacity:1; pointer-events:auto; }

/* Filmstrip */
.filmstrip-wrap {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 46px 26px;
  background:#000;
}
.filmstrip-viewport {
  width: min(calc((var(--thumb-w)*5) + (var(--gap)*4)), var(--player-w));
  max-width: 90vw;
  overflow:hidden;
  position:relative;
}
.filmstrip {
  display:flex;
  align-items:center;
  gap:var(--gap);
  will-change:transform;
  transition:transform var(--move-t) cubic-bezier(.22,.61,.36,1);
}

/* Thumbnails */
.thumb {
  position:relative;
  width:var(--thumb-w);
  aspect-ratio:16/9;
  flex:0 0 var(--thumb-w);
  border-radius:10px;
  background:#111 center/cover no-repeat;
  cursor:pointer;
  opacity:.55;
  filter:saturate(.7) brightness(.7);
  transition:filter .28s ease,opacity .28s ease,box-shadow .28s ease,outline-color .28s ease;
}
.thumb:hover { opacity:.9; filter:saturate(1.2) brightness(1.2); }
.thumb.playing {
  opacity:1;
  filter:saturate(1) brightness(1);
  box-shadow:0 0 8px 3px rgba(130,200,255,0.25);
  outline:1px solid rgba(150,200,255,0.3);
  outline-offset:2px;
}

/* Arrows */
.arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:#ccc;
  width:42px;
  height:42px;
  font-size:42px;
  cursor:pointer;
  z-index:10;
  text-shadow:0 4px 10px rgba(0,0,0,.6);
  transition:transform .18s ease,color .18s ease;
}
.arrow:hover { color:#fff; transform:translateY(-50%) scale(1.1); }
#arrow-left { left:10px; }
#arrow-right { right:10px; }

/* Slides fullscreen button */
.slides-fs-btn {
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  background:rgba(0,0,0,0.45)
    url('data:image/svg+xml;utf8,<svg fill="%23fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14h2v3h3v2H7v-5zm8 5v-2h3v-3h2v5h-5zM7 5h5v2H9v3H7V5zm10 0v5h-2V7h-3V5h5z"/></svg>')
    no-repeat center/60%;
  border-radius:8px;
  cursor:pointer;
  z-index:20;
  opacity:.85;
  transition:opacity .25s ease,transform .25s ease;
}
.slides-fs-btn:hover { opacity:1; transform:scale(1.1); }

/* Contact / Email / Copy */
.contact-email {
  text-align:center;
  margin:18px 0 50px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.contact-email a { color:#4da3ff; font-size:14px; text-decoration:none; }
.contact-email a:hover { text-decoration:underline; }
.copy-icon {
  width:18px; height:18px; cursor:pointer; opacity:0.9;
  transition:opacity .2s ease,transform .2s ease; user-select:none;
}
.copy-icon:hover { opacity:1; transform:scale(1.05); }
.copy-text { color:#7cf97c; font-size:13px; opacity:0; transition:opacity .3s ease; user-select:none; }
.copy-text.visible { opacity:1; }