/* ============================================================
   Artrig Studio — recreated from Claude Design handoff
   ============================================================ */

:root{
  --red:#d62323;
  --red-bright:#f0403f;
  --red-deep:#a81c1c;
  --bg:#0f0f10;
  --card:#1a1b1e;
  --line:rgba(255,255,255,0.07);
  --muted:rgba(255,255,255,0.60);
  --head:#f5f5f6;
  --maxw:1320px;
  --pad:clamp(20px,4vw,56px);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:#fff;
  font-family:'Poppins',system-ui,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

img{display:block;}

.display{font-family:'Archivo Black',system-ui,sans-serif;font-weight:400;}
.muted{color:var(--muted);}

@keyframes spin{to{transform:rotate(360deg);}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.4);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;cursor:pointer;
  border:none;font-family:inherit;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn--primary{
  padding:11px 22px;border-radius:999px;
  background:var(--red);color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:1.2px;
  box-shadow:0 6px 22px rgba(214,35,35,0.4);white-space:nowrap;
}
.btn--primary:hover{background:var(--red-bright);}
.btn--light{
  background:#fff;color:#101012;font-weight:600;
  font-size:11.5px;letter-spacing:1.5px;padding:11px 20px;border-radius:999px;
}
.btn--light:hover{background:#e9e9ea;}

/* ---------- Image placeholder slots ---------- */
.img-slot{
  position:relative;width:100%;height:100%;
  border-radius:8px;overflow:hidden;
  background:
    radial-gradient(120% 120% at 30% 20%,rgba(214,35,35,0.14),transparent 60%),
    linear-gradient(145deg,#202126,#141519);
  display:flex;align-items:center;justify-content:center;
}
.img-slot::before{
  content:"";position:absolute;inset:0;
  border:1.5px dashed rgba(255,255,255,0.16);
  border-radius:inherit;pointer-events:none;
}
.img-slot::after{
  content:attr(data-caption);
  position:relative;z-index:1;
  padding:10px 14px;max-width:80%;text-align:center;
  font-size:11.5px;letter-spacing:.5px;line-height:1.4;
  color:rgba(255,255,255,0.55);
}
.img-slot[data-shape="circle"]{border-radius:999px;}
/* Slots sized by aspect-ratio must not inherit height:100% — inside a
   stretched grid item that resolves to the full card height and the
   text below overflows onto the next row. */
.asset-card__cover.img-slot,.work__shot.img-slot,.youtube__thumb.img-slot{height:auto;}
.img-slot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.img-slot.has-img::before,.img-slot.has-img::after{display:none;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--pad);
  backdrop-filter:blur(16px);
  background:linear-gradient(to bottom,rgba(15,15,16,0.92),rgba(15,15,16,0.5));
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand__logo{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(214,35,35,0.45));}
.brand__text{display:flex;flex-direction:column;line-height:.92;}
.brand__name{font-family:'Archivo Black',sans-serif;font-size:21px;letter-spacing:.5px;color:#fff;}
.brand__sub{font-size:9px;letter-spacing:4px;color:var(--muted);margin-top:3px;}

.nav{
  display:flex;align-items:center;gap:2px;padding:6px 8px;border-radius:999px;
  background:linear-gradient(180deg,rgba(44,44,48,0.55),rgba(20,20,22,0.55));
  border:1px solid var(--line);box-shadow:inset 0 0 22px rgba(214,35,35,0.06);
}
.nav__link{
  padding:9px 17px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:1.2px;
  text-decoration:none;color:var(--muted);transition:color .18s ease,background .18s ease,box-shadow .18s ease;
}
.nav__link:hover{color:#fff;}
.nav__link.is-active{
  color:#fff;background:rgba(214,35,35,0.16);
  box-shadow:0 0 0 1px rgba(214,35,35,0.32),0 4px 18px rgba(214,35,35,0.22);
}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:12px;
  background:rgba(20,20,22,0.6);cursor:pointer;
}
.nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================
   Shared section shell
   ============================================================ */
.section{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 84px;scroll-margin-top:88px;}
.panel{border:1px solid var(--line);}

.eyebrow{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:500;letter-spacing:.5px;}
.tri{width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:16px solid #fff;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:44px var(--pad) 70px;min-height:82vh;
  display:flex;flex-direction:column;justify-content:center;scroll-margin-top:88px;
}
.hero__decor{position:absolute;top:70px;left:var(--pad);pointer-events:none;z-index:0;}
.hero__decor .d{position:absolute;display:block;}
.hero__decor .d1{top:0;left:64px;width:66px;height:52px;border:1px solid rgba(255,255,255,0.13);}
.hero__decor .d2{top:44px;left:0;width:42px;height:42px;background:rgba(255,255,255,0.05);}
.hero__decor .d3{top:74px;left:118px;width:46px;height:46px;background:rgba(255,255,255,0.06);}
.hero__decor .d4{top:128px;left:64px;width:30px;height:30px;border:1px solid rgba(255,255,255,0.1);}
.hero__decor .d5{top:104px;left:182px;width:20px;height:20px;background:rgba(255,255,255,0.05);}

.hero__title-wrap{position:relative;z-index:2;margin-top:24px;}
.hero__bar{
  position:absolute;left:-8vw;right:2vw;top:50%;transform:translateY(-50%);
  height:clamp(70px,10.5vw,132px);
  background:linear-gradient(90deg,var(--red-deep),var(--red) 45%,var(--red-bright));
  box-shadow:0 0 60px rgba(214,35,35,0.5);z-index:1;
}
.hero__title{
  position:relative;z-index:2;margin:0;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(72px,15.5vw,214px);line-height:.78;letter-spacing:-3px;
  color:#fff;text-align:center;text-shadow:0 8px 34px rgba(0,0,0,0.55);
}
.hero__car{
  position:absolute;z-index:3;right:-1.5vw;top:50%;transform:translateY(-50%);
  width:clamp(160px,21vw,300px);height:clamp(90px,11.5vw,158px);
}
/* Let the accent bar read straight through the (empty) car slot so the
   two form one continuous stripe, like the original. A real car PNG
   dropped in here sits on the bar exactly the same way. */
.hero__car .img-slot{background:transparent;}
.hero__car .img-slot::before{border-color:rgba(255,255,255,0.32);}
.hero__car .img-slot::after{color:rgba(255,255,255,0.9);text-shadow:0 1px 6px rgba(0,0,0,0.6);}
.hero__studio{display:flex;justify-content:center;margin-top:26px;padding-right:6vw;}
.studio-chip{
  display:inline-block;background:#fff;color:#101012;
  font-family:'Archivo Black',sans-serif;font-size:clamp(20px,2.6vw,32px);
  padding:5px 22px;border-radius:15px;letter-spacing:.5px;
}
.hero__quote{position:relative;max-width:720px;margin:52px auto 0;padding-left:60px;}
.hero__quote-mark{
  position:absolute;left:0;top:-18px;
  font-family:'Archivo Black',sans-serif;font-size:90px;line-height:1;color:rgba(255,255,255,0.14);
}
.hero__quote p{
  margin:0;text-align:center;
  font-size:clamp(16px,1.35vw,20px);line-height:1.65;color:rgba(255,255,255,0.78);
}

/* ============================================================
   ASSET STORE
   ============================================================ */
.assets{padding-top:0;}
.assets__grid{display:grid;grid-template-columns:340px minmax(0,1fr);background:rgba(255,255,255,0.008);}
.assets__intro{padding:52px 40px;display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.assets__heading{margin:6px 0 4px;font-size:clamp(28px,3.2vw,40px);color:var(--head);line-height:1;}
.assets__intro .muted{margin:10px 0 0;font-size:16px;line-height:1.7;}

.assets__cards{
  padding:40px;border-left:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px 32px;
}
.asset-card__cover{width:100%;aspect-ratio:16/10;border-radius:8px;}
.asset-card h4{margin:14px 0 9px;font-size:16px;font-weight:600;color:#fff;}
.asset-card__meta{display:flex;align-items:center;justify-content:space-between;}
.stars{color:var(--red);letter-spacing:2px;font-size:14px;}
.likes{color:var(--muted);font-size:13px;display:inline-flex;gap:6px;align-items:center;}
.heart{color:var(--red);}

/* ============================================================
   OUR WORK
   ============================================================ */
.work__grid{display:grid;grid-template-columns:minmax(0,1fr) 384px;}
.work__stage{padding:52px 48px;position:relative;}
.work__shot{width:100%;aspect-ratio:16/10;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.work__name{margin:26px 0 12px;text-align:center;font-size:26px;color:#fff;}
.work__desc{margin:0 auto;max-width:520px;text-align:center;font-size:14.5px;line-height:1.7;}
.work__intro{padding:52px 44px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:24px;align-items:flex-start;}
.work__heading{margin:0;font-size:clamp(30px,3.4vw,44px);color:var(--head);display:flex;align-items:center;gap:12px;}
.work__intro .muted{margin:8px 0 0;font-size:17px;line-height:1.75;}

/* ============================================================
   CAROUSEL (shared)
   ============================================================ */
.carousel{position:relative;}
.carousel__track{display:flex;overflow:hidden;scroll-behavior:smooth;}
.carousel__slide{flex:0 0 100%;min-width:0;}

.carousel__arrow{
  position:absolute;top:38%;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--line);background:rgba(20,20,22,0.7);color:#fff;
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,border-color .18s ease;z-index:4;
}
.carousel__arrow:hover{background:var(--red);border-color:var(--red);}
.carousel__arrow--prev{left:12px;}
.carousel__arrow--next{right:12px;}

.carousel__dots{display:flex;gap:8px;justify-content:center;margin-top:26px;}
.dot{
  width:8px;height:8px;border-radius:999px;border:none;padding:0;cursor:pointer;
  transition:all .3s ease;background:rgba(255,255,255,0.25);
}
.dot.is-active{width:22px;background:var(--red);}

/* ============================================================
   YOUTUBE
   ============================================================ */
.youtube__top{display:grid;grid-template-columns:320px minmax(0,1fr);}
.youtube__intro{padding:52px 40px;display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.yt-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:26px;background:var(--red);border-radius:7px;}
.yt-badge__tri{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid #fff;margin-left:3px;}
.youtube__heading{margin:0;font-size:clamp(30px,3.4vw,44px);color:var(--head);line-height:1;}
.youtube__intro .muted{margin:8px 0 0;font-size:16px;line-height:1.75;}

.youtube__stage{padding:52px 48px;border-left:1px solid var(--line);position:relative;}
.carousel--yt .carousel__track{max-width:560px;margin:0 auto;}
.carousel--yt .carousel__slide{padding:0 6px;}
.youtube__thumb{width:100%;aspect-ratio:16/9;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,0.5);}
.carousel--yt .carousel__arrow{width:40px;height:40px;font-size:18px;top:calc(50% - 22px);background:rgba(20,20,22,0.75);}
.carousel--yt .carousel__arrow--prev{left:14px;}
.carousel--yt .carousel__arrow--next{right:14px;}
.carousel--yt .carousel__dots{margin-top:22px;}

.youtube__stats{
  border-top:1px solid var(--line);padding:44px;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:44px 70px;
}
.stat{text-align:center;}
.stat__num{color:#fff;line-height:.9;font-size:clamp(30px,4.4vw,58px);}
.stat:nth-child(1) .stat__num{font-size:clamp(38px,5vw,64px);}
.stat__label{margin-top:6px;font-size:12px;letter-spacing:2px;color:var(--muted);}

/* ============================================================
   ABOUT
   ============================================================ */
.about{max-width:1180px;padding:30px var(--pad) 90px;}
.about__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:center;}
.about__copy{display:flex;flex-direction:column;gap:22px;}
.about__copy p{margin:0;font-size:clamp(16px,1.3vw,19px);line-height:1.7;}
.about__copy .lead{color:rgba(255,255,255,0.82);}
.about__copy .lead strong{color:#fff;font-weight:600;}
.about__wheel-wrap{display:flex;justify-content:center;}
.about__wheel-halo{
  position:relative;width:280px;height:280px;border-radius:999px;padding:14px;
  background:radial-gradient(circle at 50% 40%,rgba(214,35,35,0.18),transparent 65%);
}
.about__wheel-ring{
  width:100%;height:100%;border-radius:999px;border:3px solid var(--red);
  box-shadow:0 0 40px rgba(214,35,35,0.4),inset 0 0 30px rgba(214,35,35,0.15);
  padding:10px;animation:spin 26s linear infinite;
}
.about__wheel{width:100%;height:100%;}

/* ============================================================
   ACHIEVEMENTS
   ============================================================ */
.ach__heading{margin:0 0 26px;font-size:clamp(30px,4vw,54px);color:var(--head);}
.ach__stage{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 40px;position:relative;}
.ach__row{display:flex;align-items:center;gap:56px;padding:0 40px;}
.ach__badge{flex:0 0 190px;width:190px;height:190px;}
.ach__text h3{margin:0 0 12px;font-size:24px;color:#fff;}
.ach__text p{margin:0;max-width:560px;font-size:16px;line-height:1.7;}
.carousel--ach .carousel__arrow{top:calc(50% - 22px);}
.carousel--ach .carousel__arrow--prev{left:8px;}
.carousel--ach .carousel__arrow--next{right:8px;}
.ach__dots{margin-top:22px;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:#0a0a0b;border-top:1px solid var(--line);}
.contact__inner{max-width:1180px;margin:0 auto;padding:80px var(--pad) 90px;}
.contact__heading{margin:0 0 44px;font-size:clamp(34px,5vw,60px);color:var(--head);}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;}

.contact__form{display:flex;flex-direction:column;gap:30px;}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;}
.contact__form input,.contact__form textarea{
  background:transparent;border:none;border-bottom:1px solid var(--line);
  color:#fff;font-family:inherit;font-size:15px;padding:12px 2px;outline:none;width:100%;
  transition:border-color .18s ease;
}
.contact__form textarea{resize:vertical;}
.contact__form input:focus,.contact__form textarea:focus{border-bottom-color:var(--red);}
.contact__submit{align-self:flex-start;margin-top:6px;padding:13px 30px;font-size:14px;}

.contact__info{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:32px;display:flex;flex-direction:column;gap:24px;
}
.contact__info h3{margin:0;font-size:22px;color:#fff;}
.info-row{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,0.85);font-size:14px;}
.info-icon{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;background:rgba(214,35,35,0.14);color:var(--red);flex:0 0 auto;
}
.socials{display:flex;gap:12px;margin-top:4px;}
.social{
  width:42px;height:42px;border-radius:12px;background:#242427;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:background .18s ease;
}
.social:hover{background:var(--red);}
/* Instagram glyph */
.ig{width:18px;height:18px;border:2px solid #fff;border-radius:6px;position:relative;display:inline-block;}
.ig__ring{position:absolute;top:3px;left:3px;width:8px;height:8px;border:2px solid #fff;border-radius:999px;}
.ig__dot{position:absolute;top:1px;right:1px;width:2.5px;height:2.5px;background:#fff;border-radius:999px;}
/* Discord glyph */
.dc{width:20px;height:15px;background:#fff;border-radius:8px 8px 7px 7px;position:relative;display:inline-block;}
.dc__eye{position:absolute;top:5px;left:4px;width:3px;height:4px;background:#242427;border-radius:999px;}
.dc__eye--r{left:auto;right:4px;}
.social:hover .dc__eye{background:var(--red);}
/* YouTube glyph */
.ytg{display:inline-flex;align-items:center;justify-content:center;width:22px;height:16px;background:#fff;border-radius:5px;}
.ytg__tri{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid #242427;margin-left:2px;}

.contact__bar{
  border-top:1px solid var(--line);padding:26px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;
}
.brand--sm{gap:10px;}
.brand--sm .brand__logo{width:26px;height:26px;}
.brand--sm .brand__name{font-size:15px;}
.copyright{font-size:12.5px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav,.header__cta{display:none;}
  .nav-toggle{display:flex;}

  /* Mobile dropdown nav */
  .nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:6px;
    position:absolute;top:calc(100% + 10px);right:var(--pad);left:var(--pad);
    padding:14px;border-radius:18px;background:rgba(18,18,20,0.98);
    backdrop-filter:blur(16px);
  }
  .nav.is-open .nav__link{padding:12px 16px;border-radius:12px;}

  .assets__grid,
  .work__grid,
  .youtube__top,
  .about__grid,
  .contact__grid{grid-template-columns:1fr;}

  .assets__cards{border-left:none;border-top:1px solid var(--line);}
  .work__intro,
  .youtube__stage{border-left:none;border-top:1px solid var(--line);}

  /* Put the intro before the carousel on small screens */
  .work__intro{order:-1;}

  .about__grid{gap:40px;}
  .about__wheel-wrap{order:-1;}
}

@media (max-width:620px){
  .field-row{grid-template-columns:1fr;}
  .assets__cards{grid-template-columns:1fr;}
  .assets__intro,.work__stage,.work__intro,.youtube__intro,.youtube__stage{padding:34px 24px;}
  .ach__row{flex-direction:column;gap:26px;text-align:center;padding:0 8px;}
  .ach__text p{margin:0 auto;}
  .youtube__stats{gap:28px 40px;padding:34px 20px;}
  .hero{min-height:auto;padding-top:36px;}
  .hero__quote{padding-left:0;}
  .hero__quote-mark{position:static;display:block;text-align:center;}
}

/* ============================================================
   MOTION — intro loader, hero entrance, scroll reveals
   ============================================================ */

/* ---------- Intro loader ---------- */
.intro{
  position:fixed;inset:0;z-index:200;overflow:hidden;
  background:#0a0a0b;
  display:flex;align-items:center;justify-content:center;
  animation:introOut .6s ease 2.7s forwards;
}
@keyframes introOut{to{opacity:0;visibility:hidden;pointer-events:none;}}

.intro__word{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
.intro__name{
  font-size:clamp(56px,11vw,132px);line-height:.8;letter-spacing:-2px;color:#fff;
  text-shadow:0 8px 34px rgba(0,0,0,.55);
}
.intro__chip{
  background:#fff;color:#101012;font-size:clamp(15px,2.1vw,26px);
  padding:4px 16px;border-radius:12px;letter-spacing:.5px;
}

.intro__bars{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;}
.intro__bar{
  flex:1;
  background:linear-gradient(90deg,var(--red-deep),var(--red) 45%,var(--red-bright));
  transform-origin:left center;transform:scaleX(0);
  animation:barIn .5s cubic-bezier(.6,0,.2,1) forwards,
            barOut .6s cubic-bezier(.6,0,.2,1) both;
}
.intro__bar:nth-child(1){animation-delay:0s,1.25s;}
.intro__bar:nth-child(2){animation-delay:.08s,1.33s;}
.intro__bar:nth-child(3){animation-delay:.16s,1.41s;}
.intro__bar:nth-child(4){animation-delay:.24s,1.49s;}
.intro__bar:nth-child(5){animation-delay:.32s,1.57s;}
@keyframes barIn{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes barOut{from{transform:scaleX(1);}to{transform:scaleX(0);}}

/* ---------- Hero entrance (only when JS is present, synced to the intro) ---------- */
.js .site-header{animation:headerDrop .7s ease 2.5s both;}
.js .hero__title{opacity:0;animation:heroTitle .8s ease 2.55s forwards;}
.js .hero__bar{transform:translateY(-50%) scaleX(0);transform-origin:left center;
  animation:heroBar .75s cubic-bezier(.6,0,.2,1) 2.6s forwards;}
.js .hero__car{animation:carDrive 1.15s cubic-bezier(.34,.85,.4,1) 2.6s both,
  carFloat 3.4s ease-in-out 3.9s infinite;}
.js .hero__studio{opacity:0;animation:fadeUp .7s ease 2.95s forwards;}
.js .hero__quote{opacity:0;animation:fadeUp .7s ease 3.15s forwards;}
.js .hero__decor{opacity:0;animation:fadeIn .9s ease 3.2s forwards;}

@keyframes headerDrop{from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:none;}}
@keyframes heroTitle{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes heroBar{from{transform:translateY(-50%) scaleX(0);}to{transform:translateY(-50%) scaleX(1);}}
@keyframes carDrive{from{transform:translateY(-50%) translateX(-135vw);}to{transform:translateY(-50%) translateX(0);}}
@keyframes carFloat{0%,100%{transform:translateY(-50%);}50%{transform:translateY(-57%);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* Skip: user interacted during the intro — jump straight to the final state */
.intro-skip .intro{display:none;}
.intro-skip .site-header,
.intro-skip .hero__title,
.intro-skip .hero__studio,
.intro-skip .hero__quote,
.intro-skip .hero__decor{opacity:1 !important;transform:none !important;animation:none !important;}
.intro-skip .hero__bar{animation:none !important;transform:translateY(-50%) !important;}
.intro-skip .hero__car{animation:none !important;transform:translateY(-50%) !important;}

/* ---------- Scroll reveals ---------- */
.js [data-animate]:not([data-animate-group]){
  opacity:0;transform:translateY(28px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.js [data-animate]:not([data-animate-group]).is-visible{opacity:1;transform:none;}

.js [data-animate-group] > *{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.js [data-animate-group].is-visible > *{opacity:1;transform:none;}
.js [data-animate-group].is-visible > *:nth-child(1){transition-delay:.04s;}
.js [data-animate-group].is-visible > *:nth-child(2){transition-delay:.12s;}
.js [data-animate-group].is-visible > *:nth-child(3){transition-delay:.20s;}
.js [data-animate-group].is-visible > *:nth-child(4){transition-delay:.28s;}

/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .about__wheel-ring{animation:none;}
  .carousel__track{scroll-behavior:auto;}

  /* No intro theatrics, no reveal offsets — show everything at rest */
  .intro{display:none;}
  .js .site-header,
  .js .hero__title,.js .hero__studio,.js .hero__quote,.js .hero__decor{
    opacity:1;transform:none;animation:none;
  }
  .js .hero__bar{animation:none;transform:translateY(-50%);}
  .js .hero__car{animation:none;transform:translateY(-50%);}
  .js [data-animate]:not([data-animate-group]),
  .js [data-animate-group] > *{opacity:1 !important;transform:none !important;transition:none;}
}

/* ============================================================
   INTERACTIVE LAYER — cursor, tilt, magnetism, toys
   ============================================================ */

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

::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:#0a0a0b;}
::-webkit-scrollbar-thumb{background:#2a2b2f;border-radius:8px;border:2px solid #0a0a0b;}
::-webkit-scrollbar-thumb:hover{background:var(--red);}

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:80;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--red-deep),var(--red) 55%,var(--red-bright));
  box-shadow:0 0 12px rgba(214,35,35,0.8);pointer-events:none;
}

/* ---------- Cursor glow + ring (desktop pointers only) ---------- */
.cursor-glow,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:140;
  opacity:0;transition:opacity .35s ease;
}
.cursor-glow{
  width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:999px;
  background:radial-gradient(circle,rgba(214,35,35,0.16),rgba(214,35,35,0.05) 45%,transparent 70%);
  mix-blend-mode:screen;
}
.cursor-ring{
  width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:999px;
  border:1.5px solid rgba(240,64,63,0.65);
}
.cursor-glow.is-on,.cursor-ring.is-on{opacity:1;}
.cursor-ring.is-hot{border-color:rgba(240,64,63,1);background:rgba(214,35,35,0.10);}
html:not(.js) .cursor-glow,html:not(.js) .cursor-ring{display:none;}
@media (pointer:coarse){.cursor-glow,.cursor-ring{display:none;}}

/* ---------- Hero letters ---------- */
.hero-letter{display:inline-block;transition:transform .3s cubic-bezier(.25,1.6,.35,1);}
.hero-letter:hover{transform:translateY(-14px) rotate(-4deg);}

/* ---------- Hero car: rev on hover, lap on click ---------- */
.hero__car{cursor:pointer;}
.hero__car:focus-visible{outline:2px solid var(--red-bright);outline-offset:8px;border-radius:12px;}
.hero__car:hover .img-slot:not(.car-dash):not(.car-return){animation:carRev .18s linear infinite;}
@keyframes carRev{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  30%{transform:translate(-1.5px,1px) rotate(-.5deg);}
  70%{transform:translate(1.5px,-1px) rotate(.45deg);}
}
.hero__car .img-slot.car-dash{animation:carDash .85s cubic-bezier(.55,0,.85,.36) forwards;}
.hero__car .img-slot.car-return{animation:carReturn 1.15s cubic-bezier(.25,.75,.3,1) forwards;}
@keyframes carDash{to{transform:translateX(118vw);}}
@keyframes carReturn{from{transform:translateX(-118vw);}to{transform:translateX(0);}}

/* ---------- Speed lines along the accent bar ---------- */
.speed-lines{
  position:absolute;left:-8vw;right:2vw;top:50%;transform:translateY(-50%);
  height:clamp(70px,10.5vw,132px);z-index:2;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .18s ease;
}
.speed-lines span{
  position:absolute;left:100%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9));
  animation:lineZip .55s linear infinite;
}
.speed-lines span:nth-child(1){top:16%;width:150px;animation-delay:0s;}
.speed-lines span:nth-child(2){top:40%;width:100px;animation-delay:.14s;}
.speed-lines span:nth-child(3){top:64%;width:130px;animation-delay:.27s;}
.speed-lines span:nth-child(4){top:84%;width:90px;animation-delay:.4s;}
@keyframes lineZip{to{transform:translateX(calc(-110vw - 220px));}}
.hero.is-driving .speed-lines{opacity:1;}

/* ---------- Like buttons ---------- */
.likes{
  background:none;border:0;font-family:inherit;cursor:pointer;
  padding:4px 8px;border-radius:8px;
  transition:background .15s ease,transform .15s ease;
}
.likes:hover{background:rgba(214,35,35,0.12);}
.likes:active{transform:scale(.92);}
.likes .heart{display:inline-block;}
.likes.liked{color:rgba(255,255,255,0.85);}
.likes.liked .heart{color:var(--red-bright);}
@keyframes heartPop{0%{transform:scale(1);}40%{transform:scale(1.7);}100%{transform:scale(1);}}
.likes .heart.pop{animation:heartPop .35s ease;}

/* ---------- 3D tilt cards ---------- */
[data-tilt]{will-change:transform;}

/* ---------- Magnetic elements ---------- */
.magnet{
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,
             transform .28s cubic-bezier(.3,1.4,.4,1);
}

/* ---------- Draggable carousels ---------- */
.carousel__track{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.carousel__track.is-dragging{cursor:grabbing;scroll-behavior:auto;}

/* ---------- Micro-delights ---------- */
.studio-chip{transition:transform .25s cubic-bezier(.3,1.5,.4,1);}
.studio-chip:hover{transform:rotate(-2.5deg) scale(1.06);}
.brand__logo{transition:transform .3s cubic-bezier(.3,1.5,.4,1);}
.brand:hover .brand__logo{transform:rotate(-12deg) scale(1.1);}

/* ---------- Confetti ---------- */
.confetti-bit{position:fixed;z-index:300;pointer-events:none;}

/* JS drives the wheel spin so it can speed up on hover */
.js .about__wheel-ring.js-spin{animation:none;}

/* ============================================================
   DRIVE LAYER — ported from the original Artrig site (drive.js v4)
   The car + neon trails render on a fixed canvas above content
   (under the sticky header). Pointer events pass through, so the
   site stays 100% usable.
   ============================================================ */
#driveCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:55;pointer-events:none;}

/* HUD — bottom-left dash cluster (desktop only) */
.hud{
  position:fixed;left:22px;bottom:22px;z-index:72;pointer-events:none;
  display:flex;flex-direction:column;gap:8px;min-width:132px;
  padding:14px 16px 12px;border-radius:14px;
  background:rgba(13,13,16,0.72);border:1px solid var(--line);
  backdrop-filter:blur(10px);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.22,.61,.16,1),transform .5s cubic-bezier(.22,.61,.16,1);
}
.hud.show{opacity:1;transform:none;}
.hud__speed{display:flex;align-items:baseline;gap:6px;}
.hud__speed span{
  font-weight:800;font-size:2rem;line-height:1;
  background:linear-gradient(100deg,#e23b46,#ff7a2f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  min-width:2.2ch;font-variant-numeric:tabular-nums;
}
.hud__speed small{letter-spacing:.14em;text-transform:uppercase;font-size:.6rem;color:var(--muted);}
.hud__mid{display:flex;align-items:center;gap:10px;}
.hud__gear{font-size:.86rem;color:#f4f4f6;border:1px solid rgba(255,255,255,0.16);border-radius:6px;padding:1px 7px;min-width:24px;text-align:center;}
.hud__nos{flex:1;height:5px;border-radius:3px;background:var(--line);overflow:hidden;}
.hud__nos i{display:block;height:100%;background:linear-gradient(100deg,#e23b46,#ff7a2f);transform-origin:left;transform:scaleX(1);}
.hud__row{display:flex;justify-content:space-between;gap:12px;letter-spacing:.1em;font-size:.64rem;color:var(--muted);text-transform:uppercase;}
.hud__bolts{color:#ff7a2f;}

/* controls card — bottom-right */
.drive-card{
  position:fixed;right:22px;bottom:22px;z-index:72;
  display:flex;flex-direction:column;gap:7px;max-width:290px;
  padding:16px 40px 14px 18px;border-radius:14px;
  background:rgba(13,13,16,0.78);border:1px solid var(--line);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s cubic-bezier(.22,.61,.16,1),transform .5s cubic-bezier(.22,.61,.16,1);
}
.drive-card.show{opacity:1;transform:none;pointer-events:auto;}
.drive-card strong{font-size:.92rem;background:linear-gradient(100deg,#e23b46,#ff7a2f);-webkit-background-clip:text;background-clip:text;color:transparent;}
.drive-card span{font-size:.78rem;color:var(--muted);}
.drive-card span b{color:#f4f4f6;font-weight:600;}
.drive-card em{font-style:normal;letter-spacing:.12em;text-transform:uppercase;font-size:.6rem;color:var(--muted);}
.drive-card__close{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1;padding:4px;}
.drive-card__close:hover{color:#f4f4f6;}

/* toast — checkpoint / bolt announcements */
.drive-toast{
  position:fixed;top:92px;left:50%;transform:translate(-50%,-14px);z-index:72;
  padding:10px 22px;border-radius:999px;pointer-events:none;
  background:rgba(13,13,16,0.85);border:1px solid rgba(255,255,255,0.16);backdrop-filter:blur(10px);
  letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:#f4f4f6;
  box-shadow:0 12px 34px -12px rgba(226,59,70,0.5);
  opacity:0;transition:opacity .3s ease,transform .3s ease;
}
.drive-toast.show{opacity:1;transform:translate(-50%,0);}

/* layer disabled (reduced motion / no canvas / runtime failure) */
.no-drive #driveCanvas,.no-drive .hud,.no-drive .drive-card,.no-drive .drive-toast{display:none !important;}

@media (max-width:680px){
  .hud,.drive-card{display:none;}
  .drive-toast{top:84px;font-size:.64rem;max-width:86vw;text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  #driveCanvas,.hud,.drive-card,.drive-toast{display:none !important;}
}

@media (prefers-reduced-motion:reduce){
  .cursor-glow,.cursor-ring,.speed-lines{display:none;}
  .hero-letter,.studio-chip,.brand__logo,.magnet{transition:none;}
  .hero-letter:hover,.studio-chip:hover{transform:none;}
  .hero__car:hover .img-slot{animation:none;}
}