/* ============================================================
   YOLAN PRODS — Portfolio
   Fonts: Awesome Serif Bold (display) + Inter (body)
   Colors: near-black background, white text, #4B62FF accent glow
   ============================================================ */

@font-face {
  font-family: 'Awesome Bold';
  src: url('../fonts/AwesomeBold.woff2') format('woff2'),
       url('../fonts/AwesomeBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #07070a;
  --bg-soft: #101014;
  --card: #121216;
  --line: rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);
  --ink: #ffffff;
  --dim: rgba(255,255,255,.6);
  --dimmer: rgba(255,255,255,.36);
  --blue: #4B62FF;
  --blue-soft: #7C8CFF;
  --blue-dim: rgba(75,98,255,.16);

  --f-display: 'Awesome Bold', 'Inter', sans-serif;
  --f-body: 'Inter', -apple-system, sans-serif;

  --container: 1280px;
  --pad: clamp(20px, 4vw, 64px);
}

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

html{ scroll-behavior:smooth; background:var(--bg); }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--blue); color:#fff; }

.index{
  font-variant-numeric: tabular-nums;
  color:var(--blue-soft);
  font-weight:700;
  margin-right:10px;
}

/* reusable dotted / circuit textures, used sparingly as depth cues */
.dot-grid{
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:14px 14px;
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad);
  background:rgba(7,7,10,.6); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav__logo img{ height:20px; width:auto; filter:brightness(0) invert(1); }
.nav__links{ display:flex; gap:36px; }
.nav__links a{
  font-size:14px; letter-spacing:.01em;
  color:var(--dim); font-weight:500; transition:color .2s;
}
.nav__links a:hover{ color:var(--ink); }
.nav__cta{
  font-size:14px; font-weight:600;
  border:1px solid var(--line); padding:10px 20px; border-radius:100px;
  transition:all .25s;
}
.nav__cta:hover{ background:var(--blue); border-color:var(--blue); box-shadow:0 0 24px rgba(75,98,255,.5); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; z-index:120; }
.nav__burger span{ width:24px; height:2px; background:var(--ink); display:block; }

.mobile-menu{
  position:fixed; inset:0; background:var(--bg); z-index:90;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:24px; padding:0 var(--pad);
  transform:translateY(-100%); transition:transform .4s cubic-bezier(.6,0,.2,1);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--f-display); font-size:34px; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:0 var(--pad); overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.hero__glow{
  position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0;
}
.hero__glow--a{
  width:640px; height:640px; background:radial-gradient(circle, rgba(75,98,255,.35), transparent 70%);
  top:-180px; right:-160px;
}
.hero__glow--b{
  width:420px; height:420px; background:radial-gradient(circle, rgba(75,98,255,.18), transparent 70%);
  bottom:-140px; left:10%;
}
.hero__inner{ position:relative; z-index:2; max-width:640px; padding-top:80px; }
.hero__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(40px, 6.6vw, 92px); line-height:1.04; letter-spacing:-.01em;
}
.hero__title .accent{ color:var(--blue-soft); }
.hero__sub{
  margin-top:28px; max-width:440px; font-size:17px; line-height:1.6; color:var(--dim);
}
.hero__scroll{
  margin-top:56px; display:inline-flex; align-items:center; gap:12px;
  font-size:13px; letter-spacing:.02em; color:var(--dim);
  font-weight:500;
}
.hero__scroll svg{ animation:bob 1.6s ease-in-out infinite; color:var(--blue-soft); }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

.hero__photo{
  position:absolute; right:0; top:0; bottom:0; z-index:1;
  width:min(46vw, 640px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%);
  mask-image:linear-gradient(90deg, transparent, #000 22%);
}
.hero__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(.9) brightness(.85);
}
.hero__photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,7,10,.15), rgba(7,7,10,.55) 78%, var(--bg) 100%);
}

/* ============ ABOUT ============ */
.about{
  padding:120px var(--pad); border-bottom:1px solid var(--line-soft);
  display:grid; grid-template-columns:200px 1fr; gap:60px;
}
.about__label{
  display:flex; align-items:flex-start; font-size:14px; letter-spacing:.02em;
  font-weight:600; color:var(--ink); height:fit-content;
  position:sticky; top:100px;
}
.about__text{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(22px, 2.8vw, 34px); line-height:1.45; max-width:780px;
  letter-spacing:-0.005em; color:var(--ink);
}
.about__stats{
  display:flex; gap:48px; margin-top:64px; flex-wrap:wrap;
}
.stat{
  display:flex; flex-direction:column; gap:8px; max-width:220px;
  padding:22px 24px; border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(180deg, rgba(75,98,255,.06), transparent 60%);
}
.stat__num{
  font-family:var(--f-display); font-weight:400; font-size:30px; color:var(--blue-soft);
}
.stat__label{
  font-size:13.5px; letter-spacing:.01em; color:var(--dim); line-height:1.4;
}

/* ============ FEATURED ============ */
.featured{ padding:120px var(--pad) 0; position:relative; }
.featured__label{
  display:flex; align-items:center; font-size:14px; letter-spacing:.02em;
  font-weight:600; margin-bottom:12px;
}
.featured__intro{ font-size:15px; color:var(--dim); margin-bottom:56px; max-width:60ch; }

/* bento grid: two tall portrait bookends (Mauro Forte, Boxing), a wide banner (Miracamp)
   between them, and Adidas + Central Cee sitting side by side underneath it */
.featured__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: clamp(180px, 20vw, 260px) clamp(180px, 20vw, 260px);
  gap:20px;
}
.feature--mauroforte{ grid-column: 1; grid-row: 1 / 3; }
.feature--miracamp{ grid-column: 2 / 4; grid-row: 1; }
.feature--boxing{ grid-column: 4; grid-row: 1 / 3; }
.feature--adidas{ grid-column: 2; grid-row: 2; }
.feature--centralcee{ grid-column: 3; grid-row: 2; }

.feature{
  position:relative; cursor:pointer; border-radius:10px; overflow:hidden;
  background:#000; border:1px solid var(--line); transition:box-shadow .25s;
}
.feature video{ width:100%; height:100%; object-fit:cover; display:block; }
.feature__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.8) 100%);
  opacity:.85; transition:opacity .25s; pointer-events:none;
}
.feature:hover .feature__scrim{ opacity:.95; }
.feature:hover{ box-shadow:0 0 0 1px rgba(75,98,255,.5), 0 24px 60px -20px rgba(75,98,255,.45); }
.feature__badge{
  position:absolute; left:14px; top:14px; z-index:2;
  width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(7,7,10,.5); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.feature__expand{
  position:absolute; right:14px; top:14px; z-index:2;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.95); color:var(--bg);
  border-radius:100px; padding:7px 13px; font-size:11.5px; font-weight:600;
  opacity:0; transform:translateY(-4px); transition:all .25s;
}
.feature:hover .feature__expand{ opacity:1; transform:translateY(0); }
.feature__caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px;
}
.feature__caption h3{ font-family:var(--f-display); font-weight:400; font-size:19px; color:#fff; }
.feature__caption p{ font-size:13px; color:rgba(255,255,255,.72); margin-top:4px; max-width:38ch; }
.feature__extra{
  display:inline-block; margin-top:8px; font-size:11.5px; color:var(--blue-soft);
  font-weight:600; letter-spacing:.01em;
}

/* ============ WORK / TIMELINE (full reel) ============ */
.work{ padding:120px var(--pad) 100px; border-bottom:1px solid var(--line-soft); }
.work__label{
  display:flex; align-items:center; font-size:14px; letter-spacing:.02em;
  font-weight:600; margin-bottom:8px;
}
.work__intro{ font-size:15px; color:var(--dim); margin-bottom:56px; max-width:60ch; }

.stage{
  display:grid; grid-template-columns:1.3fr 1fr; gap:48px;
  margin-bottom:56px; min-height:380px;
}
.stage__media{
  position:relative; border-radius:10px; overflow:hidden;
  background:#000; border:1px solid var(--line);
  aspect-ratio:16/9;
}
.stage__media video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.stage__expand{
  position:absolute; right:16px; bottom:16px;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.95);
  border:none; color:var(--bg); border-radius:100px;
  padding:9px 16px; font-size:13px;
  font-weight:600; transition:all .2s;
}
.stage__expand:hover{ background:var(--blue); color:#fff; }

.stage__info{ display:flex; flex-direction:column; padding-top:6px; }
.stage__count{
  font-size:13px; color:var(--dimmer); letter-spacing:.02em; margin-bottom:18px;
}
.stage__count em{ font-style:normal; color:var(--blue-soft); font-weight:700; }
.stage__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(24px, 2.6vw, 34px); line-height:1.1; margin-bottom:14px;
}
.stage__tag{
  font-size:13px; letter-spacing:.01em; color:var(--blue-soft);
  font-weight:600; margin-bottom:18px;
}
.stage__thumbs{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.stage__thumbs button{
  width:60px; height:60px; border-radius:6px; overflow:hidden; border:2px solid transparent;
  background:#000; padding:0; position:relative; opacity:.5; transition:all .2s;
}
.stage__thumbs button img{ width:100%; height:100%; object-fit:cover; }
.stage__thumbs button.active{ border-color:var(--blue); opacity:1; }
.stage__thumbs button:hover{ opacity:1; }

.stage__nav{ display:flex; gap:10px; margin-top:auto; padding-top:28px; }
.stage__nav button{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); font-size:16px; transition:all .2s;
}
.stage__nav button:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* --- editing timeline strip --- */
.timeline-wrap{ position:relative; }
.timeline-ruler{
  display:flex; height:20px; border-bottom:1px solid var(--line-soft); margin-bottom:2px;
}
.ruler-tick{
  flex:1; position:relative; font-size:10px; color:var(--dimmer);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.ruler-tick::before{
  content:''; position:absolute; left:0; top:8px; bottom:0; width:1px; background:var(--line-soft);
}
.ruler-tick span{ position:absolute; left:6px; top:0; }

.timeline{
  position:relative; height:104px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  cursor:pointer; touch-action:pan-y;
}
.timeline__track{ display:flex; height:100%; }
.clip{
  position:relative; height:100%; flex-shrink:0;
  border-right:1px solid var(--line);
  overflow:hidden; transition:filter .25s;
  filter:brightness(.5) saturate(.7);
}
.clip:last-child{ border-right:none; }
.clip.active{ filter:brightness(1) saturate(1); }
.clip:hover{ filter:brightness(.8) saturate(.9); }
.clip.active:hover{ filter:brightness(1) saturate(1); }
.clip__thumb{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6;
}
.clip.active .clip__thumb{ opacity:.45; }
.clip__waveform{
  position:absolute; left:0; right:0; bottom:0; height:30px;
  display:flex; align-items:flex-end; gap:2px; padding:0 6px;
  z-index:2;
}
.clip__waveform i{
  flex:1; background:rgba(255,255,255,.5); border-radius:1px; min-width:2px;
}
.clip.active .clip__waveform i{ background:var(--blue-soft); }
.clip__label{
  position:absolute; left:10px; top:8px; right:36px; z-index:2;
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.clip__num{
  position:absolute; right:10px; top:8px; z-index:2; font-size:10px; color:rgba(255,255,255,.75);
  font-variant-numeric:tabular-nums; text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.clip__scrim{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55));
  z-index:1;
}

.playhead{
  position:absolute; top:-20px; bottom:0; width:2px; background:var(--blue);
  left:0; z-index:5; pointer-events:none; box-shadow:0 0 12px rgba(75,98,255,.7);
}
.playhead__handle{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:14px; height:14px; background:var(--blue); border-radius:3px;
  pointer-events:auto; cursor:grab; box-shadow:0 0 10px rgba(75,98,255,.8);
}
.playhead__handle:active{ cursor:grabbing; }
.playhead__time{
  position:absolute; top:-38px; left:50%; transform:translateX(-50%);
  font-size:10px; background:var(--blue); color:#fff; padding:3px 6px; border-radius:3px;
  white-space:nowrap; font-weight:600; font-variant-numeric:tabular-nums;
}
.timeline__hint{
  margin-top:16px; font-size:13px; color:var(--dimmer); text-align:center;
  letter-spacing:.01em;
}

/* ============ CONTACT ============ */
.contact{
  padding:120px var(--pad); display:flex; flex-direction:column; align-items:center;
}
.contact__label{
  display:flex; align-items:center; font-size:14px; letter-spacing:.02em;
  font-weight:600; margin-bottom:36px; align-self:flex-start;
}
.contact__panel{
  position:relative; width:100%; text-align:center; overflow:hidden;
  border:1px solid var(--line); border-radius:16px;
  padding:100px var(--pad); display:flex; flex-direction:column; align-items:center;
  background:radial-gradient(60% 100% at 50% 0%, rgba(75,98,255,.28), transparent 70%), var(--card);
}
.contact__title{
  position:relative; z-index:1;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(36px, 7vw, 84px); line-height:1.02; letter-spacing:-.01em;
}
.contact__title .accent{ color:var(--blue-soft); }
.contact__links{
  position:relative; z-index:1;
  margin-top:56px; display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
}
.contact__link{
  border:1px solid var(--line); border-radius:100px; padding:18px 34px;
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  min-width:260px; text-align:left; transition:all .25s; background:rgba(255,255,255,.02);
}
.contact__link span{ font-size:12.5px; color:var(--dim); }
.contact__link strong{ font-size:17px; font-weight:600; }
.contact__link:hover{ background:var(--blue); border-color:var(--blue); box-shadow:0 12px 40px -10px rgba(75,98,255,.6); }
.contact__link:hover span{ color:rgba(255,255,255,.8); }

.footer{
  padding:36px var(--pad); display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line-soft);
}
.footer__logo{ height:15px; width:auto; filter:brightness(0) invert(1); opacity:.7; }
.footer p{ font-size:12.5px; color:var(--dimmer); }

/* ============ MODAL ============ */
.modal{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  padding:40px;
}
.modal.open{ display:flex; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(4,4,6,.82); backdrop-filter:blur(10px); }
.modal__box{
  position:relative; z-index:2; width:min(760px, 100%); background:var(--card);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  animation:pop .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 30px 80px -20px rgba(75,98,255,.35);
}
@keyframes pop{ from{ transform:scale(.94); opacity:0;} to{ transform:scale(1); opacity:1;} }
.modal__box video, .modal__box img{ width:100%; max-height:65vh; height:auto; display:block; background:#000; object-fit:contain; }
.modal__close{
  position:absolute; top:12px; right:14px; z-index:3; background:rgba(0,0,0,.55);
  border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:20px;
  line-height:1;
}
.modal__meta{ padding:22px 24px; }
.modal__meta h4{ font-family:var(--f-display); font-weight:400; font-size:20px; margin-bottom:14px; }
.modal__thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.modal__thumbs button{
  width:52px; height:52px; border-radius:6px; overflow:hidden; border:2px solid transparent;
  padding:0; opacity:.5;
}
.modal__thumbs button img{ width:100%; height:100%; object-fit:cover; }
.modal__thumbs button.active{ border-color:var(--blue); opacity:1; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .hero__photo{ width:44vw; opacity:.9; }
  .about{ grid-template-columns:1fr; gap:32px; }
  .about__label{ position:static; }
  .featured__grid{
    grid-template-columns:1fr; grid-template-rows:none;
  }
  .featured__grid > .feature{
    grid-column:auto !important; grid-row:auto !important; aspect-ratio:4/3;
  }
  .feature--mauroforte, .feature--boxing{ aspect-ratio:3/4; }
  .stage{ grid-template-columns:1fr; }
  .stage__media{ aspect-ratio:16/9; }
  .contact__panel{ padding:64px 24px; }
}

@media (max-width: 560px){
  .hero{ align-items:flex-end; padding-bottom:64px; }
  .hero__photo{
    position:absolute; inset:0; width:100%; height:100%; opacity:1;
    -webkit-mask-image:none; mask-image:none;
  }
  .hero__photo img{ filter:saturate(.85) brightness(.7); }
  .hero__photo::after{
    background:linear-gradient(180deg, rgba(7,7,10,.6) 0%, rgba(7,7,10,.35) 30%, rgba(7,7,10,.55) 60%, var(--bg) 100%);
  }
  .hero__glow{ z-index:0; }
  .timeline{ height:88px; }
  .clip__waveform{ height:22px; }
  .about, .featured, .work, .contact{ padding-left:20px; padding-right:20px; }
  .contact__link{ min-width:0; width:100%; }
}