:root{
  --bg: #121212;
  --panel: #1a1a1a;
  --ink: #ececea;
  --ink-dim: #8a8a86;
  --line: #2c2c2a;
  --accent: #ff3b30;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

a{color:inherit;}

.section-title{
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  font-weight:600;
  letter-spacing:-0.01em;
}

/* ============ LANGUAGE SWITCH ============ */
.lang-switch{
  position:fixed;
  top:20px;
  right:24px;
  z-index:20;
  display:flex;
  gap:4px;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.06em;
  background:rgba(18,18,18,.55);
  backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:20px;
  padding:4px;
}
.lang-switch__btn{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--ink-dim);
  padding:6px 12px;
  border-radius:16px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lang-switch__btn:hover{color:var(--ink);}
.lang-switch__btn.is-active{
  background:var(--accent);
  color:#121212;
  font-weight:600;
}

@media (max-width: 480px){
  .lang-switch{top:12px; right:12px;}
  .lang-switch__btn{padding:5px 9px;}
}

/* ============ PLAYHEAD TRACK ============ */
.track{
  position:fixed;
  left:24px;
  top:0;
  bottom:0;
  width:2px;
  z-index:5;
  pointer-events:none;
}
.track__line{
  position:absolute;
  inset:0;
  background:var(--line);
}
.track__fill{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:0%;
  background:var(--accent);
}
.track__head{
  position:absolute;
  left:50%;
  top:0%;
  width:10px;
  height:10px;
  transform:translate(-50%,-50%);
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 10px rgba(255,59,48,.7);
}

@media (max-width: 720px){
  .track{left:14px;}
}

/* ============ HERO ============ */
.hero{
  height:100svh;
  padding:0;
  display:flex;
}
.hero__frame{
  position:relative;
  flex:1;
  margin:14px;
  border-radius:6px;
  background:
    radial-gradient(120% 90% at 50% 20%, #1c1c1c 0%, #101010 60%, #0b0b0b 100%);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  outline:1px solid var(--line);
}
.hero__grain{
  position:absolute;
  inset:0;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  pointer-events:none;
}
.hero__vignette{
  position:absolute;
  inset:0;
  box-shadow: inset 0 0 160px rgba(0,0,0,.75);
  pointer-events:none;
}

.hero__topbar{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 140px 20px 28px;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--ink-dim);
}

@media (max-width: 640px){
  .hero__topbar{padding-right:28px;}
  .hero__coords{display:none;}
}
.rec{display:flex; align-items:center; gap:6px; color:var(--accent);}
.rec__dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.hero__coords{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw;}

.hero__center{
  position:relative;
  text-align:center;
  padding:0 24px;
}
.hero__eyebrow{
  font-family:var(--font-mono);
  font-size:clamp(.62rem,1.4vw,.78rem);
  letter-spacing:.14em;
  color:var(--ink-dim);
  margin-bottom:18px;
}
.hero__name{
  font-size:clamp(3.4rem, 12vw, 8rem);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:.95;
}
.hero__tagline{
  max-width:520px;
  margin:22px auto 0;
  color:var(--ink-dim);
  font-size:clamp(.95rem,2vw,1.1rem);
  line-height:1.6;
}

.hero__scrub{
  position:relative;
  padding:22px 28px 26px;
}
.hero__scrubbar{
  position:relative;
  height:3px;
  background:var(--line);
  border-radius:2px;
}
.hero__scrubfill{
  position:absolute;
  left:0; top:0; height:100%;
  width:0%;
  background:var(--accent);
  border-radius:2px;
}
.hero__playhead{
  position:absolute;
  top:50%;
  left:0%;
  width:12px;height:12px;
  background:var(--ink);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.hero__timecode{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-dim);
  letter-spacing:.05em;
}
.hero__scroll-hint{
  color:var(--ink-dim);
  animation:hint 2.2s ease-in-out infinite;
}
@keyframes hint{0%,100%{opacity:.4;}50%{opacity:1;}}

/* ============ ABOUT ============ */
.about{
  position:relative;
  padding:120px 28px 100px 90px;
  max-width:900px;
}
.about__content{max-width:640px;}
.about__text{
  margin-top:24px;
  font-size:clamp(1rem,2vw,1.15rem);
  line-height:1.75;
  color:#c9c9c6;
  max-width:64ch;
}
.about__stack{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--ink-dim);
}
.about__stack li{
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:3px;
}

/* ============ CLIP MARKER (shared) ============ */
.clip__marker{
  position:absolute;
  left:0;
  top:6px;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
}
.about .clip__marker{left:20px;}
.clip__tc{
  font-size:.72rem;
  color:var(--ink-dim);
  letter-spacing:.05em;
}
.clip__dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--bg);
  border:2px solid var(--ink-dim);
}

/* ============ TIMELINE / WORK ============ */
.timeline{
  padding:60px 28px 60px 90px;
}
.timeline__header{margin-bottom:60px;}
.timeline__sub{
  margin-top:10px;
  color:var(--ink-dim);
  font-family:var(--font-mono);
  font-size:.85rem;
}

.clip{
  position:relative;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:32px;
  padding:40px 0;
  border-top:1px solid var(--line);
}
.clip:first-of-type{border-top:1px solid var(--line);}
.clip[data-role="current"] .clip__dot{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 8px rgba(255,59,48,.6);
}

.clip__thumb{
  position:relative;
  aspect-ratio:16/10;
  border-radius:6px;
  background:linear-gradient(155deg, var(--from), var(--to));
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.clip__play{
  color:rgba(255,255,255,.55);
  font-size:1.4rem;
}
.clip__badge{
  position:absolute;
  top:10px; right:10px;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.08em;
  color:var(--accent);
  border:1px solid var(--accent);
  padding:3px 8px;
  border-radius:3px;
}

.clip__body{max-width:640px;}
.clip__title{
  font-size:1.35rem;
  font-weight:600;
}
.clip__role{
  font-weight:400;
  color:var(--ink-dim);
  font-size:1rem;
}
.clip__desc{
  margin-top:12px;
  color:#c9c9c6;
  line-height:1.65;
  max-width:56ch;
}
.clip__reel{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.clip__reelitem{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:.85rem;
}
.clip__reelname{color:var(--ink);}
.clip__reeldesc{color:var(--ink-dim); text-align:right;}

@media (max-width: 720px){
  .timeline, .about{padding-left:56px;}
  .clip{grid-template-columns:1fr;}
  .clip__marker{position:static; margin-bottom:16px;}
  .clip__reelitem{flex-direction:column; gap:4px;}
  .clip__reeldesc{text-align:left;}
}

/* ============ CREDITS / FOOTER ============ */
.credits{
  padding:140px 28px 80px 90px;
  border-top:1px solid var(--line);
}
.credits__eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--accent);
}
.credits__title{
  margin-top:18px;
  font-size:clamp(2rem,6vw,3.4rem);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.1;
}
.credits__cta{
  display:inline-block;
  margin-top:32px;
  font-family:var(--font-mono);
  font-size:1rem;
  color:var(--ink);
  border-bottom:1px solid var(--ink-dim);
  padding-bottom:4px;
  text-decoration:none;
}
.credits__cta:hover{border-color:var(--accent); color:var(--accent);}

.credits__links{
  display:flex;
  gap:22px;
  margin-top:40px;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--ink-dim);
}
.credits__links a{text-decoration:none;}
.credits__links a:hover{color:var(--ink);}

.credits__loc{
  margin-top:60px;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-dim);
  letter-spacing:.05em;
}

@media (max-width: 720px){
  .credits{padding-left:56px;}
}