/* YIFAN AUTO — version 2 : scène studio. La voiture (vue 360° officielle ou détourage) flotte au-dessus d'un halo à sa couleur. */
:root{--tall:"Anton","Noto Sans SC",sans-serif;--halo:150,170,200}
.stage{position:relative;height:520vh}
.stage__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(90% 70% at 50% 46%,#26272b 0,#141518 42%,#060607 100%)}
.stage__word{position:absolute;left:0;right:0;top:calc(var(--hd) - 2vh);text-align:center;font-family:var(--tall);font-size:clamp(120px,27vw,520px);line-height:.86;letter-spacing:.01em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.17);white-space:nowrap;text-transform:uppercase;pointer-events:none;opacity:var(--wo,1);transform:translateY(var(--wy,0));font-stretch:normal;
  -webkit-mask:linear-gradient(#000 30%,transparent 96%);mask:linear-gradient(#000 30%,transparent 96%)}
.stage__floor{position:absolute;left:-10%;right:-10%;top:62%;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%);-webkit-mask:radial-gradient(60% 100% at 50% 0,#000,transparent);mask:radial-gradient(60% 100% at 50% 0,#000,transparent)}
.stage__dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8}
.stage__car{position:absolute;left:50%;top:54%;width:min(74vw,128vh);aspect-ratio:1316/740;transform:translate(-50%,-50%) translate3d(var(--cx,0),var(--cy,0),0) scale(var(--cs,1));will-change:transform;display:grid;place-items:center}
.stage__car::before{content:"";position:absolute;left:4%;right:4%;bottom:6%;height:26%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--halo),.75),rgba(var(--halo),.22) 55%,transparent 100%);filter:blur(22px);opacity:var(--ho,.8);transform:scale(var(--hs,1))}
.stage__car::after{content:"";position:absolute;left:14%;right:14%;bottom:13.5%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.9),transparent);filter:blur(7px)}
.stage__car .bob{position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-1.1%)}}
.stage__car img{grid-area:1/1;max-width:100%;max-height:100%;object-fit:contain;transition:opacity .7s var(--ease);filter:drop-shadow(0 30px 30px rgba(0,0,0,.55))}
.stage__car img.off{opacity:0}
.stage__ring{position:absolute;left:50%;top:54%;width:min(86vw,150vh);aspect-ratio:1/1;border-radius:50%;transform:translate(-50%,-50%) scale(var(--rs,.4));background:radial-gradient(closest-side,rgba(var(--halo),.0) 46%,rgba(var(--halo),.28) 60%,rgba(255,255,255,.1) 64%,transparent 72%);opacity:var(--ro,0);filter:blur(10px);pointer-events:none}
.sp{position:absolute;z-index:5;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 40px));pointer-events:none;visibility:hidden}
.sp.live{pointer-events:auto;visibility:visible}
.sp--a{left:var(--pad);right:var(--pad);bottom:clamp(26px,6vh,70px);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.sp--a h1{font-family:var(--tall);font-size:clamp(64px,10.5vw,200px);line-height:.9;text-transform:uppercase;letter-spacing:.005em;font-weight:400;font-stretch:normal}
.sp__tag{color:#c9cdd4;max-width:52ch;margin-top:14px;font-size:clamp(14px,1.2vw,18px)}
.sp__r{display:grid;gap:14px;justify-items:end;text-align:right}
.sp--b{left:var(--pad);top:calc(var(--hd) + 5vh);max-width:min(40vw,520px)}
.sp--b h2,.sp--c h2{font-family:var(--tall);font-weight:400;font-stretch:normal;text-transform:uppercase;letter-spacing:.005em}
.sp--b h2{font-size:clamp(46px,6.4vw,118px);line-height:.92;margin-top:12px}
.sp--b p{color:#c9cdd4;margin-top:16px;font-size:clamp(14px,1.15vw,17px);max-width:42ch}
.chips{position:absolute;inset:0;z-index:4;pointer-events:none}
.chipx{position:absolute;display:inline-flex;align-items:baseline;gap:10px;padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(18,19,22,.55);backdrop-filter:blur(12px);font-size:13px;color:var(--mut);opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 26px)) scale(calc(.94 + var(--o,0) * .06));white-space:nowrap}
.chipx b{font-family:var(--disp);font-size:17px;color:#fff;font-weight:700}
.chipx i{width:6px;height:6px;border-radius:50%;background:rgb(var(--halo));box-shadow:0 0 12px rgb(var(--halo));align-self:center;font-style:normal}
.sp--c{left:0;right:0;top:calc(var(--hd) + 3vh);text-align:center}
.sp--c h2{font-size:clamp(34px,4.4vw,76px);margin-top:10px}
.feats{position:absolute;z-index:5;top:26vh;bottom:8vh;width:min(25vw,330px);display:grid;gap:12px;align-content:center;pointer-events:none}
.feats--l{left:var(--pad)}.feats--r{right:var(--pad)}
.feat{padding:18px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));backdrop-filter:blur(10px);opacity:var(--o,0);transform:translateX(calc((1 - var(--o,0)) * var(--dx,-40px)))}
.feats--r .feat{--dx:40px}
.feat small{display:block;color:var(--mut);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.feat b{display:block;font-family:var(--disp);font-size:clamp(17px,1.5vw,22px);margin-top:6px;line-height:1.15}
.stage__hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:6;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);opacity:var(--o,1)}
.stage__deg{position:absolute;right:var(--pad);top:calc(var(--hd) + 20px);z-index:6;font-family:var(--disp);font-size:12px;letter-spacing:.2em;color:var(--mut);display:flex;align-items:center;gap:10px}
.stage__deg i{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-style:normal}
.stage__deg i::before{content:"";width:1px;height:12px;background:#fff;transform:rotate(var(--deg,0deg));transform-origin:50% 100%;margin-top:-12px}
/* cartes v2 : voiture détourée sur tuile studio */
.card--v2 .card__img{background:radial-gradient(80% 70% at 50% 60%,#2a2b30,#111215 70%);display:grid;place-items:center}
.card--v2 .card__img::after{content:"";position:absolute;left:12%;right:12%;bottom:12%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--halo),.6),transparent);filter:blur(16px);opacity:.55;transition:opacity .6s,transform .8s var(--ease)}
.card--v2:hover .card__img::after{opacity:1;transform:scale(1.25)}
.card--v2 .card__img img{position:relative;inset:auto;z-index:1;width:84%;height:74%;object-fit:contain;filter:drop-shadow(0 16px 14px rgba(0,0,0,.6));transition:transform 1s var(--ease)}
.card--v2:hover .card__img img{transform:scale(1.07) translateX(2%)}
.card--v2 .card__img img+img{display:none}
@media (max-width:900px){
  .stage{height:460vh}
  .stage__car{width:112vw;top:46%}
  .sp--a{grid-template-columns:1fr;gap:14px}.sp__r{justify-items:start;text-align:left}
  .sp--b{max-width:none;right:var(--pad);top:calc(var(--hd) + 2vh)}
  .feats{position:absolute;top:auto;bottom:5vh;width:44vw;gap:8px}.feat{padding:10px 12px}.feat b{font-size:14px}
  .chipx{padding:7px 11px;font-size:11px}.chipx b{font-size:14px}
  .stage__deg{display:none}
}
@media (prefers-reduced-motion:reduce){.stage__car .bob{animation:none}}
.stage__car.is-spin{width:min(108vw,186vh);top:52%}
.stage__car.is-spin::before{left:24%;right:24%;bottom:17%;height:20%}
.stage__car.is-spin::after{left:30%;right:30%;bottom:21%;height:4%}
.stage__floor{top:58%;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 46%);-webkit-mask:radial-gradient(70% 100% at 50% 0,#000 10%,transparent 78%);mask:radial-gradient(70% 100% at 50% 0,#000 10%,transparent 78%)}
@media (max-width:900px){.stage__car.is-spin{width:176vw}}