/* ============================================================
   FEDOR SHERISHEW — cinematic scroll portfolio
   ============================================================ */

:root{
  --ink:        #060707;
  --ink-2:      #0a0c0b;
  --ink-3:      #10120f;
  --cream:      #F3EEE2;
  --cream-dim:  rgba(243,238,226,0.60);
  --cream-faint:rgba(243,238,226,0.32);
  --emerald:    #17E39A;
  --emerald-2:  #0FB47C;
  --emerald-ink:#05231a;
  --glow:       rgba(23,227,154,0.35);

  --edge: rgba(243,238,226,0.12);

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

::selection{ background:var(--emerald); color:var(--ink); }

a{ color:inherit; text-decoration:none; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============ BREADCRUMBS ============ */
.crumbs{
  position:fixed; top:4.6rem; left:clamp(1.2rem,4vw,3rem);
  z-index:6900;
  display:flex; align-items:center; gap:.5rem;
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-faint);
  mix-blend-mode:difference;
}
.crumbs a{ color:#fff; opacity:.55; transition:opacity .3s; }
.crumbs a:hover{ opacity:1; }
.crumbs__sep{ opacity:.35; }
.crumbs__here{ color:#fff; opacity:.85; }
@media (max-width:640px){ .crumbs{ top:4.2rem; } }

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--emerald);
  font-weight:600;
}
.eyebrow--center{ display:block; text-align:center; }

/* ============ GRAIN + VIGNETTE ============ */
.grain{
  position:fixed; inset:-50%;
  width:200%; height:200%;
  pointer-events:none; z-index:9000;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)}
  30%{transform:translate(3%,-6%)} 50%{transform:translate(-5%,4%)}
  70%{transform:translate(4%,5%)} 90%{transform:translate(-3%,-2%)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:8000;
  background:radial-gradient(130% 120% at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ============ PRELOADER ============ */
.preloader{
  position:fixed; inset:0; z-index:10000;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__inner{ width:min(80vw,420px); text-align:center; }
.preloader__mark{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(3rem,9vw,6rem); letter-spacing:.05em;
  color:var(--cream); line-height:1;
}
.preloader__bar{
  margin:1.6rem auto .8rem; height:2px; width:100%;
  background:var(--edge); overflow:hidden;
}
.preloader__bar span{
  display:block; height:100%; width:0%;
  background:var(--emerald); box-shadow:0 0 18px var(--glow);
  transition:width .25s linear;
}
.preloader__pct{ font-family:var(--font-display); font-size:1rem; color:var(--emerald); letter-spacing:.1em; }
.preloader__label{
  margin-top:.4rem; font-size:.62rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--cream-faint);
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.2rem,4vw,3rem);
  mix-blend-mode:difference;
  transition:transform .5s var(--ease);
}
.nav.is-hidden{ transform:translateY(-120%); }
.nav__mark{
  font-family:var(--font-display); font-weight:600;
  font-size:1rem; letter-spacing:.12em; line-height:.95;
  display:flex; flex-direction:column; color:#fff;
}
.nav__mark span{ color:#fff; opacity:.6; font-weight:400; }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); }
.nav__links a{
  font-size:.8rem; letter-spacing:.06em; color:#fff;
  text-transform:uppercase; font-weight:500;
  transition:opacity .3s;
}
.nav__links a:hover{ opacity:.6; }
.nav__cta{
  border:1px solid rgba(255,255,255,.5);
  padding:.5rem .9rem; border-radius:100px;
}
@media (max-width:640px){
  .nav__links a:not(.nav__cta){ display:none; }
}

/* ============ HERO ============ */
.hero{ position:relative; }
.hero__pin{
  position:relative; height:100vh; width:100%;
  overflow:hidden;
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; background:var(--ink);
}
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(6,7,7,.6) 100%),
    linear-gradient(to top, rgba(6,7,7,.9) 2%, transparent 30%);
}
.hero__content{
  position:absolute; left:0; right:0; bottom:clamp(3rem,8vh,7rem);
  padding:0 clamp(1.2rem,4vw,3rem);
  z-index:3; pointer-events:none;
}
.hero__kicker{
  display:flex; align-items:center; gap:.6rem;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--cream-dim); margin-bottom:1rem; font-weight:500;
}
.hero__kicker .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--emerald); box-shadow:0 0 14px var(--glow);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

.hero__name{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(4rem, 17vw, 19rem);
  line-height:.82; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--cream);
}
.hero__name .line{ display:block; overflow:hidden; }
.hero__name .char{ display:inline-block; will-change:transform; }
.hero__name .line:nth-child(2){ color:transparent; -webkit-text-stroke:1.5px var(--cream); }
.hero__name .line:nth-child(2) .char{ transition:none; }

.hero__subtitle{
  margin-top:1.2rem;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.1rem,2.4vw,2rem);
  letter-spacing:.06em; color:var(--emerald);
}

.hero__scrollcue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.6rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--cream-faint); z-index:3;
}
.hero__scrollcue-line{
  width:1px; height:44px;
  background:linear-gradient(var(--emerald), transparent);
  animation:cue 1.8s ease-in-out infinite;
  transform-origin:top;
}
@keyframes cue{ 0%,100%{transform:scaleY(.3);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

/* ============ STATS ============ */
.stats{
  position:relative; z-index:2;
  background:var(--ink);
  padding:clamp(5rem,12vh,10rem) 0 0;
  border-top:1px solid var(--edge);
}
.stats__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  max-width:1400px; margin:0 auto;
  padding:0 clamp(1.2rem,4vw,3rem) clamp(5rem,12vh,9rem);
  gap:clamp(2rem,4vw,4rem);
}
.stat{ position:relative; padding-top:2rem; border-top:1px solid var(--edge); }
.stat__num{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(3.4rem,8vw,8rem); line-height:.9;
  color:var(--cream); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat:nth-child(2) .stat__num{ color:var(--emerald); }
.stat__label{
  margin-top:1rem; font-size:clamp(.85rem,1.1vw,1rem);
  color:var(--cream-dim); max-width:22ch; line-height:1.35;
}
@media (max-width:820px){
  .stats__grid{ grid-template-columns:1fr; gap:0; }
  .stat{ padding:1.6rem 0; }
}

/* marquee */
.stats__marquee{
  overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
  padding:1.1rem 0;
}
.stats__track{ display:inline-flex; animation:marq 34s linear infinite; }
.stats__track span{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1rem,2vw,1.6rem); letter-spacing:.18em;
  color:var(--cream-faint); text-transform:uppercase;
}
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============ SHARED SECTION BG VIDEO ============ */
.section-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; filter:saturate(1.05) contrast(1.02);
}
.section-bg__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right, rgba(6,7,7,.94) 0%, rgba(6,7,7,.7) 45%, rgba(6,7,7,.55) 100%);
}

/* ============ PILLARS ============ */
.pillars{ position:relative; background:var(--ink); overflow:hidden; }
.pillars__pin{
  position:relative; z-index:2;
  height:100vh; width:100%;
  display:flex; flex-direction:column;
  padding:clamp(6rem,12vh,8rem) clamp(1.2rem,5vw,5rem) clamp(3rem,6vh,4rem);
}
.pillars__head{ display:flex; justify-content:space-between; align-items:center; }
.pillars__progress{ width:120px; height:2px; background:var(--edge); overflow:hidden; }
.pillars__progress span{ display:block; height:100%; width:0%; background:var(--emerald); box-shadow:0 0 12px var(--glow); }

.pillars__stage{ position:relative; flex:1; }
.pillar{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  max-width:900px;
}
.pillar__index{
  font-family:var(--font-display); font-weight:600;
  font-size:1rem; letter-spacing:.3em; color:var(--emerald);
  margin-bottom:1rem;
}
.pillar__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(3.2rem,12vw,11rem); line-height:.86;
  text-transform:uppercase; color:var(--cream); letter-spacing:-.01em;
}
.pillar__desc{
  margin-top:1.6rem; max-width:46ch;
  font-size:clamp(1rem,1.4vw,1.35rem); line-height:1.5;
  color:var(--cream-dim);
}

.pillars__ticks{ display:flex; gap:1.4rem; }
.tick{
  display:flex; align-items:center; gap:.6rem;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-weight:500;
  font-size:.9rem; letter-spacing:.1em; color:var(--cream-faint);
  transition:color .4s;
}
.tick span{ width:26px; height:2px; background:var(--edge); transition:background .4s, width .4s; }
.tick.is-active{ color:var(--cream); }
.tick.is-active span{ background:var(--emerald); width:42px; box-shadow:0 0 12px var(--glow); }

/* ============ WORK ============ */
.work{ position:relative; overflow:hidden; background:var(--ink); }
.work__scrim{ background:linear-gradient(to bottom, rgba(6,7,7,.9) 0%, rgba(6,7,7,.72) 40%, rgba(6,7,7,.92) 100%); }
.work__inner{
  position:relative; z-index:2;
  max-width:1400px; margin:0 auto;
  padding:clamp(6rem,14vh,11rem) clamp(1.2rem,4vw,3rem);
}
.work__head{ margin-bottom:clamp(3rem,6vh,5rem); }
.work__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem,7vw,6rem); line-height:.9;
  text-transform:uppercase; color:var(--cream); margin-top:.8rem;
}
.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.6rem); }
@media (max-width:900px){ .work__grid{ grid-template-columns:1fr; } }

.work__card{
  position:relative; display:flex; flex-direction:column;
  min-height:clamp(300px,42vh,420px);
  padding:clamp(1.6rem,2.4vw,2.4rem);
  border:1px solid var(--edge);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  backdrop-filter:blur(6px);
  transition:transform .6s var(--ease), border-color .5s, background .5s, box-shadow .6s;
  transform-style:preserve-3d; will-change:transform;
  overflow:hidden;
}
.work__card::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(120% 80% at 50% 120%, var(--glow), transparent 60%);
  transition:opacity .6s; pointer-events:none;
}
.work__card:hover{
  border-color:rgba(23,227,154,.5);
  box-shadow:0 30px 80px -40px var(--glow);
}
.work__card:hover::after{ opacity:1; }
.work__card-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.work__card-idx{
  font-family:var(--font-display); font-weight:600;
  font-size:.85rem; letter-spacing:.28em; color:var(--emerald);
}
.work__card-arrow{
  font-size:1.4rem; color:var(--cream); transition:transform .5s var(--ease);
}
.work__card:hover .work__card-arrow{ transform:translate(6px,-6px); }
.work__card-name{
  margin-top:auto;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.8rem,3.4vw,3rem); line-height:.95;
  text-transform:uppercase; color:var(--cream);
}
.work__card-pitch{
  margin-top:1rem; font-size:.98rem; line-height:1.45;
  color:var(--cream-dim); max-width:30ch;
}
.work__card-tag{
  margin-top:1.4rem; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream-faint);
  border-top:1px solid var(--edge); padding-top:1rem;
}

/* ============ CREDS — verified expertise ============ */
.creds{
  position:relative; z-index:2;
  background:var(--ink);
  border-top:1px solid var(--edge);
}
.creds__inner{
  max-width:1400px; margin:0 auto;
  padding:clamp(5rem,12vh,9rem) clamp(1.2rem,4vw,3rem);
}
.creds__head{ margin-bottom:clamp(2.6rem,5vh,4rem); max-width:900px; }
.creds__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.4rem,6vw,5.4rem); line-height:.94;
  text-transform:uppercase; color:var(--cream); margin-top:.8rem;
}
.creds__sub{
  margin-top:1.4rem; max-width:56ch;
  font-size:clamp(.95rem,1.2vw,1.1rem); line-height:1.55;
  color:var(--cream-dim);
}
.creds__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.6rem); }
@media (max-width:900px){ .creds__grid{ grid-template-columns:1fr; } }

.creds__card{
  position:relative; display:flex; flex-direction:column;
  min-height:clamp(220px,30vh,300px);
  padding:clamp(1.5rem,2.2vw,2.2rem);
  border:1px solid var(--edge);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  backdrop-filter:blur(6px);
  transition:transform .6s var(--ease), border-color .5s, box-shadow .6s;
  transform-style:preserve-3d; will-change:transform;
  overflow:hidden;
}
.creds__card::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(120% 80% at 50% 120%, var(--glow), transparent 60%);
  transition:opacity .6s; pointer-events:none;
}
.creds__card:hover{
  border-color:rgba(23,227,154,.5);
  box-shadow:0 30px 80px -40px var(--glow);
}
.creds__card:hover::after{ opacity:1; }
.creds__card-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.creds__issuer{
  font-family:var(--font-display); font-weight:600;
  font-size:.85rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--emerald);
}
.creds__arrow{ font-size:1.3rem; color:var(--cream); transition:transform .5s var(--ease); }
.creds__card:hover .creds__arrow{ transform:translate(6px,-6px); }
.creds__name{
  margin-top:auto;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.3rem); line-height:.95;
  text-transform:uppercase; color:var(--cream);
}
.creds__meta{
  margin-top:.7rem; font-size:.92rem; line-height:1.4;
  color:var(--cream-dim); max-width:32ch;
}
.creds__verify{
  margin-top:1.3rem; display:flex; align-items:center; gap:.7rem;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-faint);
  border-top:1px solid var(--edge); padding-top:1rem;
  transition:color .4s;
}
.creds__card:hover .creds__verify{ color:var(--emerald); }
.creds__badge{
  display:inline-block; padding:.2rem .55rem;
  border:1px solid rgba(23,227,154,.4); border-radius:100px;
  font-family:var(--font-display); font-weight:600;
  font-size:.66rem; letter-spacing:.14em; color:var(--emerald);
}

/* ============ FINALE ============ */
.finale{ position:relative; background:var(--ink); overflow:hidden; }
.finale__glow{
  position:absolute; left:50%; top:35%; transform:translate(-50%,-50%);
  width:min(90vw,1000px); height:min(90vw,1000px);
  background:radial-gradient(circle, var(--glow), transparent 62%);
  filter:blur(40px); opacity:.6; pointer-events:none;
}
.finale__inner{
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; text-align:center;
  padding:clamp(7rem,18vh,14rem) clamp(1.2rem,4vw,3rem) clamp(4rem,8vh,7rem);
}
.finale__title{
  margin-top:1.6rem;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.4rem,7vw,6.4rem); line-height:.98;
  text-transform:uppercase; color:var(--cream);
  letter-spacing:-.01em;
}
.finale__title .word{ display:inline-block; overflow:hidden; }
.finale__title .word i{ display:inline-block; font-style:normal; }
.finale__title .word.accent i{ color:var(--emerald); }

.finale__actions{
  margin-top:clamp(2.4rem,5vh,3.6rem);
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1.1rem 2rem; border-radius:100px;
  font-family:var(--font-display); font-weight:600;
  font-size:1rem; letter-spacing:.06em; text-transform:uppercase;
  transition:transform .4s var(--ease), background .4s, color .4s, box-shadow .4s;
}
.btn span{ transition:transform .4s var(--ease); }
.btn--primary{ background:var(--emerald); color:var(--ink); box-shadow:0 20px 60px -20px var(--glow); }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 26px 70px -18px var(--glow); }
.btn--primary:hover span{ transform:translateX(5px); }
.btn--ghost{ border:1px solid var(--edge); color:var(--cream); }
.btn--ghost:hover{ border-color:var(--emerald); color:var(--emerald); transform:translateY(-3px); }

.finale__ticker{
  overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--edge);
  padding:1.6rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.finale__ticker-track{ display:inline-flex; align-items:center; animation:marq 42s linear infinite; }
.finale__ticker-track .grp{ display:inline-flex; align-items:center; }
.finale__ticker-track span{
  font-family:var(--font-display); font-weight:500;
  font-size:.9rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-dim); padding:0 1.7rem; white-space:nowrap;
}
.finale__ticker-track i{ font-style:normal; color:var(--emerald); font-size:.55rem; opacity:.9; }

/* ============ FOOTER ============ */
.footer{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1.2rem;
  padding:clamp(2.4rem,5vh,3.6rem) clamp(1.2rem,4vw,3rem);
  border-top:1px solid var(--edge);
}
.footer__mark{ font-family:var(--font-display); font-weight:600; letter-spacing:.14em; font-size:1rem; }
.footer__links{ display:flex; gap:1.6rem; }
.footer__links a{ font-size:.9rem; color:var(--cream-dim); transition:color .3s; }
.footer__links a:hover{ color:var(--emerald); }
.footer__copy{ font-size:.72rem; letter-spacing:.1em; color:var(--cream-faint); text-transform:uppercase; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .grain, .hero__scrollcue-line, .hero__kicker .dot{ animation:none; }
  .stats__track, .finale__ticker-track{ animation:none; }
}