:root{
  --projects-bg:#030303;
  --projects-white:#f4f4f0;
  --projects-gold:#d5a13a;
  --projects-gold-light:#f4df9c;
  --projects-duration:12s;
}

.projects-page{background:var(--projects-bg);color:var(--projects-white)}
.projects-page main{background:var(--projects-bg)}
.projects-page .site-header{
  position:sticky;top:0;z-index:200;background:rgba(0,0,0,.97);
  box-shadow:0 1px 0 rgba(255,255,255,.055)
}
.projects-page .site-header .primary-nav a:hover::after,
.projects-page .site-header .primary-nav a:focus-visible::after,
.projects-page .site-header .primary-nav a.is-active::after{background:var(--projects-gold)}

.projects-experience{
  position:relative;width:100%;height:calc(100svh - var(--site-header-height,92px));
  min-height:610px;overflow:hidden;background:var(--projects-bg);isolation:isolate
}
.projects-film{
  position:absolute;inset:0;overflow:hidden;contain:layout paint style;
  font-family:"Montserrat",sans-serif;background:
    radial-gradient(circle at 72% 20%,rgba(255,255,255,.022),transparent 28%),
    radial-gradient(circle at 24% 74%,rgba(213,161,58,.028),transparent 34%),
    linear-gradient(145deg,#010101 0%,#080807 48%,#020202 100%)
}
.projects-film__grain,
.projects-film__vignette,
.projects-film__beam,
.projects-scene{position:absolute;inset:0;pointer-events:none}
.projects-film__grain{
  z-index:1;opacity:.23;background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.008) 0 1px,transparent 1px 4px)
}
.projects-film__vignette{
  z-index:50;background:
    linear-gradient(90deg,rgba(0,0,0,.62),transparent 13%,transparent 87%,rgba(0,0,0,.62)),
    radial-gradient(ellipse at center,transparent 39%,rgba(0,0,0,.62) 100%)
}
.projects-film__beam{z-index:2;opacity:0;will-change:transform,opacity}
.projects-film__beam--a{
  left:-22%;right:auto;width:42%;background:linear-gradient(90deg,transparent,rgba(247,227,168,.16),rgba(255,255,255,.028),transparent);
  transform:skewX(-18deg) translate3d(-22vw,0,0);animation:beamA var(--projects-duration) cubic-bezier(.25,.7,.22,1) infinite
}
.projects-film__beam--b{
  left:auto;right:-20%;width:32%;background:linear-gradient(90deg,transparent,rgba(196,137,30,.13),rgba(255,255,255,.018),transparent);
  transform:skewX(14deg) translate3d(18vw,0,0);animation:beamB var(--projects-duration) cubic-bezier(.3,.65,.2,1) infinite
}

.projects-scene{z-index:10;opacity:0;overflow:hidden;will-change:opacity,transform}
.projects-title{
  position:absolute;z-index:8;margin:0;color:var(--projects-white);font-weight:700;line-height:.78;
  letter-spacing:-.075em;white-space:nowrap;text-shadow:0 0 22px rgba(255,255,255,.025);
  font-size:clamp(4.5rem,15vw,15.5rem);will-change:transform,opacity
}

/* MOTORI — accelerazione, traiettoria, metallo */
.projects-scene--motori{animation:motoriScene var(--projects-duration) ease-in-out infinite}
.motori-speed{
  position:absolute;height:1px;left:-28vw;width:74vw;top:50%;z-index:3;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.10) 28%,rgba(244,223,156,.95) 72%,transparent 100%);
  box-shadow:0 0 10px rgba(213,161,58,.22);transform:rotate(-10deg) translate3d(-35vw,0,0);
  animation:motoriSpeed var(--projects-duration) cubic-bezier(.14,.74,.18,1) infinite
}
.motori-speed--1{top:27%;width:62vw}
.motori-speed--2{top:49%;width:92vw;animation-delay:-.14s}
.motori-speed--3{top:69%;width:70vw;animation-delay:-.28s}
.motori-curve{
  position:absolute;z-index:2;width:88vw;height:70vh;right:-18vw;bottom:-34vh;border:1px solid rgba(244,223,156,.32);
  border-radius:50%;transform:rotate(-18deg) scale(.78);box-shadow:0 0 24px rgba(213,161,58,.045),inset 0 0 50px rgba(213,161,58,.018);
  animation:motoriCurve var(--projects-duration) ease-in-out infinite
}
.projects-title--motori{left:clamp(28px,6vw,92px);top:49%;transform:translate3d(-10vw,-50%,0);animation:motoriTitle var(--projects-duration) cubic-bezier(.16,.78,.18,1) infinite}

/* MODA — quinte verticali, flash e prospettiva */
.projects-scene--moda{animation:modaScene var(--projects-duration) ease-in-out infinite}
.moda-panel{
  position:absolute;z-index:2;top:-8%;bottom:-8%;width:24%;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,.008),rgba(245,221,153,.09),rgba(255,255,255,.012));
  border-left:1px solid rgba(244,223,156,.10);border-right:1px solid rgba(255,255,255,.025);
  will-change:transform,opacity;animation:modaPanel var(--projects-duration) cubic-bezier(.22,.72,.2,1) infinite
}
.moda-panel--1{left:8%;--x:-14vw;--mid:4vw;--exit:14vw}
.moda-panel--2{left:38%;--x:10vw;--mid:-2vw;--exit:-10vw;animation-delay:-.12s}
.moda-panel--3{left:68%;--x:18vw;--mid:-5vw;--exit:-18vw;animation-delay:-.24s}
.moda-runway{
  position:absolute;left:50%;bottom:-20%;z-index:3;width:min(58vw,900px);height:86%;transform:translateX(-50%) perspective(720px) rotateX(68deg) scale(.72);
  transform-origin:50% 100%;clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(213,161,58,.10));opacity:0;
  box-shadow:inset 0 0 0 1px rgba(244,223,156,.08);animation:modaRunway var(--projects-duration) ease-in-out infinite
}
.projects-title--moda{left:50%;top:49%;transform:translate3d(-50%,2vh,0) scale(.93);animation:modaTitle var(--projects-duration) cubic-bezier(.2,.78,.18,1) infinite}

/* LIVE MUSIC — fasci, impulsi, profondità */
.projects-scene--live{animation:liveScene var(--projects-duration) ease-in-out infinite}
.live-beam{
  position:absolute;z-index:2;top:-32%;left:50%;width:2px;height:112%;transform-origin:50% 0%;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(244,223,156,.12) 35%,transparent 88%);
  box-shadow:0 0 20px rgba(244,223,156,.12);animation:liveBeam var(--projects-duration) ease-in-out infinite
}
.live-beam--1{transform:translateX(-50%) rotate(-24deg)}
.live-beam--2{transform:translateX(-50%) rotate(0deg);animation-delay:-.15s}
.live-beam--3{transform:translateX(-50%) rotate(24deg);animation-delay:-.3s}
.live-pulse{
  position:absolute;left:50%;top:54%;z-index:3;width:20vw;aspect-ratio:1;border-radius:50%;border:1px solid rgba(244,223,156,.26);
  transform:translate(-50%,-50%) scale(.32);opacity:0;animation:livePulse var(--projects-duration) ease-out infinite
}
.live-pulse--2{animation-delay:-.38s;border-color:rgba(255,255,255,.12)}
.projects-title--live{left:50%;top:47%;display:flex;gap:.12em;transform:translate3d(-50%,-50%,0);font-size:clamp(3.7rem,12vw,12.2rem);animation:liveTitle var(--projects-duration) cubic-bezier(.16,.78,.18,1) infinite}
.projects-title--live span{display:block}

/* FINALE — il marchio compare solo alla fine */
.projects-scene--finale{
  z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,2.5vh,28px);
  animation:finaleScene var(--projects-duration) ease-in-out infinite
}
.projects-scene--finale img{width:min(58vw,660px);height:auto;display:block;opacity:0;transform:translate3d(0,10px,0) scale(.97);animation:finaleLogo var(--projects-duration) ease-in-out infinite}
.finale-kicker{margin:0;color:rgba(244,244,240,.70);font-size:clamp(.68rem,.9vw,.94rem);font-weight:600;letter-spacing:.34em;opacity:0;transform:translateY(6px);animation:finaleKicker var(--projects-duration) ease-in-out infinite}
.finale-line{width:min(20vw,220px);height:1px;background:linear-gradient(90deg,transparent,var(--projects-gold-light),transparent);opacity:0;transform:scaleX(.18);animation:finaleLine var(--projects-duration) ease-in-out infinite}

@keyframes beamA{
  0%,4%{opacity:0;transform:skewX(-18deg) translate3d(-24vw,0,0)}
  12%{opacity:.95} 23%{opacity:.28;transform:skewX(-18deg) translate3d(72vw,0,0)}
  40%{opacity:0;transform:skewX(-18deg) translate3d(92vw,0,0)}
  100%{opacity:0;transform:skewX(-18deg) translate3d(92vw,0,0)}
}
@keyframes beamB{
  0%,34%{opacity:0;transform:skewX(14deg) translate3d(20vw,0,0)}
  43%{opacity:.65} 57%{opacity:.20;transform:skewX(14deg) translate3d(-66vw,0,0)}
  70%,100%{opacity:0;transform:skewX(14deg) translate3d(-78vw,0,0)}
}
@keyframes motoriScene{0%,7%{opacity:0}12%,27%{opacity:1}34%,100%{opacity:0}}
@keyframes motoriSpeed{
  0%,8%{opacity:0;transform:rotate(-10deg) translate3d(-38vw,0,0)}
  13%{opacity:.78} 26%{opacity:.28;transform:rotate(-10deg) translate3d(118vw,0,0)}
  34%,100%{opacity:0;transform:rotate(-10deg) translate3d(138vw,0,0)}
}
@keyframes motoriCurve{
  0%,8%{opacity:0;transform:rotate(-18deg) scale(.72)}
  16%{opacity:.76;transform:rotate(-10deg) scale(.88)}
  29%{opacity:.28;transform:rotate(3deg) scale(1.03)}
  35%,100%{opacity:0;transform:rotate(8deg) scale(1.10)}
}
@keyframes motoriTitle{
  0%,9%{opacity:0;transform:translate3d(-12vw,-50%,0)}
  14%{opacity:1;transform:translate3d(0,-50%,0)}
  25%{opacity:1;transform:translate3d(2vw,-50%,0)}
  32%{opacity:0;transform:translate3d(11vw,-50%,0)}
  100%{opacity:0;transform:translate3d(11vw,-50%,0)}
}
@keyframes modaScene{0%,29%{opacity:0}35%,52%{opacity:1}59%,100%{opacity:0}}
@keyframes modaPanel{
  0%,29%{opacity:0;transform:translate3d(var(--x),0,0) skewX(-4deg)}
  37%{opacity:.68;transform:translate3d(var(--mid),0,0) skewX(1deg)}
  52%{opacity:.26;transform:translate3d(var(--exit),0,0) skewX(-1deg)}
  59%,100%{opacity:0;transform:translate3d(var(--exit),0,0) skewX(4deg)}
}
@keyframes modaRunway{
  0%,31%{opacity:0;transform:translateX(-50%) perspective(720px) rotateX(68deg) scale(.58)}
  39%{opacity:.72;transform:translateX(-50%) perspective(720px) rotateX(68deg) scale(.86)}
  53%{opacity:.30;transform:translateX(-50%) perspective(720px) rotateX(68deg) scale(1.04)}
  60%,100%{opacity:0;transform:translateX(-50%) perspective(720px) rotateX(68deg) scale(1.10)}
}
@keyframes modaTitle{
  0%,31%{opacity:0;transform:translate3d(-50%,4vh,0) scale(.90)}
  38%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
  52%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1.02)}
  58%{opacity:0;transform:translate3d(-50%,-58%,0) scale(1.04)}
  100%{opacity:0}
}
@keyframes liveScene{0%,55%{opacity:0}61%,78%{opacity:1}85%,100%{opacity:0}}
@keyframes liveBeam{
  0%,55%{opacity:0}
  62%{opacity:.62}
  69%{opacity:.16}
  74%{opacity:.72}
  81%{opacity:.20}
  86%,100%{opacity:0}
}
@keyframes livePulse{
  0%,56%{opacity:0;transform:translate(-50%,-50%) scale(.26)}
  65%{opacity:.62}
  78%{opacity:.10;transform:translate(-50%,-50%) scale(2.1)}
  85%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}
}
@keyframes liveTitle{
  0%,57%{opacity:0;transform:translate3d(-50%,-46%,0) scale(.94)}
  64%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
  77%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1.02)}
  83%{opacity:0;transform:translate3d(-50%,-55%,0) scale(1.04)}
  100%{opacity:0}
}
@keyframes finaleScene{0%,80%{opacity:0}87%,96%{opacity:1}100%{opacity:0}}
@keyframes finaleLogo{0%,81%{opacity:0;transform:translate3d(0,10px,0) scale(.97)}87%,96%{opacity:1;transform:translate3d(0,0,0) scale(1)}100%{opacity:0;transform:translate3d(0,-4px,0) scale(1.01)}}
@keyframes finaleKicker{0%,82%{opacity:0;transform:translateY(6px)}88%,96%{opacity:.78;transform:translateY(0)}100%{opacity:0;transform:translateY(-3px)}}
@keyframes finaleLine{0%,82%{opacity:0;transform:scaleX(.18)}88%{opacity:.78;transform:scaleX(1)}96%{opacity:.42;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.5)}}

@media (max-width:900px){
  .projects-experience{height:calc(100svh - var(--site-header-height,76px));min-height:560px}
  /* COMING SOON viene regolato dalle media query V0192 poste dopo il blocco principale. */
  .projects-title{font-size:clamp(4rem,18vw,10rem)}
  .projects-title--motori{left:6vw}
  .projects-title--live{font-size:clamp(3rem,13vw,7.2rem)}
  .motori-curve{width:120vw;right:-48vw}
  .moda-runway{width:82vw}
  .projects-scene--finale img{width:min(76vw,620px)}
}
@media (max-width:540px){
  .projects-experience{height:calc(100svh - var(--site-header-height,70px));min-height:520px}
  .projects-title{font-size:clamp(3.25rem,19vw,6.7rem)}
  .projects-title--motori{left:7vw}
  .projects-title--live{font-size:clamp(2.55rem,12.7vw,5.15rem);gap:.09em;flex-direction:column;text-align:center;line-height:.72}
  .motori-speed{width:110vw}
  .motori-curve{width:150vw;height:64vh;right:-78vw;bottom:-30vh}
  .moda-panel{width:34%}.moda-panel--1{left:-2%}.moda-panel--2{left:34%}.moda-panel--3{left:70%}
  .moda-runway{width:112vw;height:72%;bottom:-11%}
  .live-pulse{width:34vw}
  .projects-scene--finale img{width:86vw}
  .finale-kicker{font-size:.62rem;letter-spacing:.28em}
  .finale-line{width:34vw}
}
@media (prefers-reduced-motion:reduce){
  .projects-film__beam,.projects-scene,.motori-speed,.motori-curve,.projects-title,.moda-panel,.moda-runway,.live-beam,.live-pulse,.projects-scene--finale img,.finale-kicker,.finale-line{animation:none!important}
  .projects-scene--finale{opacity:1}
  .projects-scene--finale img{opacity:1;transform:none}
  .finale-kicker{opacity:.78;transform:none}
  .finale-line{opacity:.78;transform:none}
}

/* ========================================================================
   V0189 — PROGETTI / STRAIGHT MOTION + LIVE FINALE TEST
   Base V0185. L'ultima immagine ha una dissolvenza dedicata e completa;
   COMING SOON nasce realmente dietro di lei con una sola animazione GPU
   continua. Se il browser blocca l'audio dopo refresh, la sequenza visiva
   ======================================================================== */
.projects-film--desktop{display:block}
.projects-film--legacy{display:none}

@media (min-width:0px){
  .projects-film--legacy{display:none}
  .projects-film--desktop{
    display:block;
    background:
      radial-gradient(ellipse at 50% 46%,rgba(7,31,52,.36) 0%,rgba(2,12,22,.16) 38%,transparent 69%),
      radial-gradient(circle at 18% 70%,rgba(0,120,216,.05),transparent 34%),
      radial-gradient(circle at 83% 29%,rgba(0,111,205,.045),transparent 31%),
      #010306;
  }

  .projects-worlds-bg,
  .projects-worlds-stage,
  .projects-worlds-aura,
  .projects-coming,
  .projects-worlds-vignette,
  .projects-soundtrack{
    position:absolute;inset:0;pointer-events:none;
  }

  .projects-worlds-bg{z-index:0;overflow:hidden}
  .projects-worlds-bg::before{
    content:"";position:absolute;inset:-22%;opacity:.56;
    background:
      radial-gradient(ellipse at 42% 55%,rgba(0,178,255,.085),transparent 30%),
      radial-gradient(ellipse at 64% 38%,rgba(76,202,255,.055),transparent 25%);
    filter:blur(36px);transform:scale(.94);
    animation:projectsWorldBgBreath 12s ease-in-out infinite alternate;
  }
  .projects-worlds-bg::after{
    content:"";position:absolute;left:-16%;right:-16%;top:52%;height:1px;opacity:.14;
    background:linear-gradient(90deg,transparent 4%,rgba(88,207,255,.14) 28%,rgba(189,241,255,.52) 50%,rgba(88,207,255,.14) 72%,transparent 96%);
    box-shadow:0 0 22px rgba(0,160,255,.18);
    transform:rotate(-2deg) scaleX(.72);
  }

  .projects-worlds-stage{z-index:20;overflow:hidden}
  .projects-world{
    --scene-size:1;
    position:absolute;left:50%;top:50%;margin:0;
    width:min(calc(76vw * var(--scene-size)),1260px);
    height:min(77vh,800px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:translate3d(-50%,-50%,0);
    transform-origin:50% 50%;backface-visibility:hidden;
    will-change:opacity,transform;
  }
  .projects-world img{
    display:block;width:100%;height:100%;object-fit:contain;
    filter:drop-shadow(0 0 12px rgba(59,195,255,.16)) drop-shadow(0 0 38px rgba(0,126,255,.07));
    mix-blend-mode:screen;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 58%,rgba(0,0,0,.96) 72%,rgba(0,0,0,.52) 88%,transparent 100%);
    mask-image:radial-gradient(ellipse at center,#000 58%,rgba(0,0,0,.96) 72%,rgba(0,0,0,.52) 88%,transparent 100%);
    user-select:none;-webkit-user-drag:none;
  }
  .projects-world[data-world="art"],
  .projects-world[data-world="basket"],
  .projects-world[data-world="volley"]{width:min(calc(66vw * var(--scene-size)),1080px);height:min(78vh,800px)}
  .projects-world[data-world="yachting"]{
    /* V0193: asset esteso e sfumato in alto senza giunture; la maggiore altezza riduce moderatamente la barca su ogni viewport. */
    width:min(calc(86vw * var(--scene-size)),1360px);height:min(88vh,880px)
  }
  .projects-world[data-world="yachting"] img{
    /* L'asset V0193 contiene gia la dissolvenza superiore: niente maschera radiale aggiuntiva o bordi di maschera visibili. */
    -webkit-mask-image:none;mask-image:none;
  }

  .projects-worlds-aura{
    z-index:14;opacity:0;mix-blend-mode:screen;
    background:radial-gradient(circle at 50% 50%,rgba(88,206,255,.10),rgba(0,139,255,.03) 24%,transparent 50%);
    will-change:opacity,transform;
  }

  /* Il finale è sotto lo stage: l'ultima immagine lo copre davvero finché sfuma. */
  .projects-coming{
    z-index:16;display:flex;align-items:center;justify-content:center;
    opacity:0;transform:translate3d(0,0,0) scale(.28);
    transform-origin:50% 50%;backface-visibility:hidden;
    will-change:opacity,transform;
  }
  .projects-coming__flare{
    position:absolute;left:50%;top:50%;width:min(76vw,1320px);height:1px;
    transform:translate(-50%,-50%) scaleX(.06);transform-origin:center;
    opacity:0;background:linear-gradient(90deg,transparent 0%,rgba(63,191,255,.04) 18%,rgba(203,246,255,.82) 50%,rgba(63,191,255,.04) 82%,transparent 100%);
    box-shadow:0 0 14px rgba(88,212,255,.34),0 0 38px rgba(0,132,255,.16);
    will-change:opacity,transform;
  }
  .projects-coming__text{
    position:relative;white-space:nowrap;
    font-family:"Montserrat",sans-serif;font-size:clamp(4.8rem,7.8vw,9.4rem);
    font-weight:700;line-height:.86;letter-spacing:.075em;
    color:transparent;-webkit-text-fill-color:transparent;
    background:repeating-linear-gradient(0deg,rgba(222,250,255,.96) 0 1px,rgba(89,211,255,.82) 1px 2px,rgba(15,88,137,.24) 2px 4px);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-stroke:1.15px rgba(124,224,255,.88);
    text-shadow:
      0 0 4px rgba(231,251,255,.92),
      0 0 13px rgba(86,207,255,.78),
      0 0 34px rgba(0,150,255,.54),
      0 0 82px rgba(0,105,255,.28);
    filter:brightness(1.02) saturate(1.06);
  }
  .projects-coming__text::before{
    content:attr(data-text);position:absolute;inset:0;color:transparent;
    -webkit-text-stroke:1px rgba(218,248,255,.34);opacity:.18;
    transform:translate3d(1.1px,-.7px,0);
  }
  .projects-coming__text::after{
    content:"";position:absolute;left:-5%;right:-5%;top:51%;height:2px;
    opacity:0;background:linear-gradient(90deg,transparent,rgba(211,249,255,.96),transparent);
    box-shadow:0 0 17px rgba(66,207,255,.72);
    transform:scaleX(.10);transform-origin:center;
  }
  .projects-coming.is-readable .projects-coming__flare{animation:projectsComingFlare 2.8s ease-out forwards}
  .projects-coming__text.is-flashing::before{animation:projectsComingFlashSingle .28s ease-out}
  .projects-coming.is-readable .projects-coming__text::after{animation:projectsComingTrace 4.4s ease-in-out forwards}

  .projects-worlds-vignette{
    z-index:55;background:
      linear-gradient(90deg,rgba(0,0,0,.76),transparent 8%,transparent 92%,rgba(0,0,0,.76)),
      linear-gradient(180deg,rgba(0,0,0,.46),transparent 10%,transparent 86%,rgba(0,0,0,.64)),
      radial-gradient(ellipse at center,transparent 54%,rgba(0,0,0,.40) 100%);
  }

  .projects-soundtrack{width:0;height:0;opacity:0;visibility:hidden}


  @keyframes projectsWorldBgBreath{
    0%{opacity:.72;transform:scale(.94) translate3d(-1.5%,1%,0)}
    100%{opacity:1;transform:scale(1.06) translate3d(1.5%,-1%,0)}
  }
  @keyframes projectsComingFlare{
    0%{opacity:0;transform:translate(-50%,-50%) scaleX(.06)}
    24%{opacity:.46;transform:translate(-50%,-50%) scaleX(.70)}
    48%{opacity:.12;transform:translate(-50%,-50%) scaleX(1.00)}
    100%{opacity:0;transform:translate(-50%,-50%) scaleX(1.10)}
  }
  @keyframes projectsComingFlashSingle{
    0%{opacity:.18;transform:translate3d(1.1px,-.7px,0)}
    22%{opacity:1;transform:translate3d(.4px,-.2px,0);filter:brightness(2.8) drop-shadow(0 0 18px rgba(223,251,255,.92)) drop-shadow(0 0 38px rgba(42,188,255,.72))}
    100%{opacity:.18;transform:translate3d(1.1px,-.7px,0);filter:none}
  }
  @keyframes projectsComingTrace{
    0%,14%{opacity:0;transform:translateY(-3px) scaleX(.08)}
    28%{opacity:.42;transform:translateY(0) scaleX(.82)}
    38%{opacity:.06;transform:translateY(3px) scaleX(.42)}
    62%{opacity:0;transform:translateY(-2px) scaleX(.12)}
    72%{opacity:.54;transform:translateY(0) scaleX(1)}
    82%,100%{opacity:0;transform:translateY(3px) scaleX(.34)}
  }
}

/* ========================================================================
   V0194 — COMING SOON / Android-safe finale.
   Sul mobile evitiamo la combinazione che su alcuni GPU Android puo causare
   clipping a tasselli: background-clip:text + filter + pseudo-elementi filtrati
   dentro un parent scalato. Il desktop resta invariato.
   ======================================================================== */
.projects-coming__flash{display:none}

@media (max-width:900px){
  .projects-film--desktop{display:block!important}
  .projects-film--legacy{display:none!important}

  /* Niente paint-containment sul finale mobile: evita il ritaglio del layer
     durante la crescita e lascia respirare glow e lettere. */
  .projects-film{contain:layout style}

  .projects-coming{
    overflow:visible;
    backface-visibility:visible;
    will-change:opacity,transform;
  }

  /* Quando la barca ha gia finito di dissolversi, il testo passa sopra la
     vignettatura: nessuna "velina" sui caratteri laterali. */
  .projects-coming.is-readable{z-index:60}

  .projects-film--desktop .projects-coming__text{
    color:#dff9ff;
    -webkit-text-fill-color:#dff9ff;
    background:none;
    -webkit-background-clip:border-box;
    background-clip:border-box;
    -webkit-text-stroke:.8px rgba(124,224,255,.80);
    filter:none;
    text-shadow:
      0 0 3px rgba(231,251,255,.90),
      0 0 11px rgba(86,207,255,.72),
      0 0 28px rgba(0,150,255,.46),
      0 0 58px rgba(0,105,255,.22);
  }

  /* I due pseudo del desktop sono le parti piu delicate sui compositor
     Android. Il flash mobile usa invece un vero span e sola opacita. */
  .projects-film--desktop .projects-coming__text::before,
  .projects-film--desktop .projects-coming__text::after{display:none!important}

  .projects-coming__flash{
    display:block;
    position:absolute;
    inset:0;
    opacity:0;
    color:#f5fdff;
    -webkit-text-fill-color:#f5fdff;
    -webkit-text-stroke:.7px rgba(223,251,255,.88);
    text-shadow:
      0 0 5px rgba(243,253,255,.98),
      0 0 16px rgba(114,225,255,.90),
      0 0 34px rgba(42,188,255,.64);
    pointer-events:none;
  }
}

/* Scala continua con margine reale anche alla fine della crescita (V0194
   termina a scale(1) sul mobile, non a 1.10). */
@media (max-width:750px){
  .projects-film--desktop .projects-coming__text{
    font-size:clamp(1.75rem,8.9vw,4.171875rem);
  }
}
@media (min-width:751px) and (max-width:900px){
  .projects-film--desktop .projects-coming__text{
    font-size:calc(2.3vw + 49.5px);
  }
}

@media (prefers-reduced-motion:reduce){
  .projects-film--desktop .projects-worlds-stage{display:none!important}
  .projects-film--desktop .projects-coming{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .projects-film--desktop .projects-coming__flare,.projects-film--desktop .projects-coming__text,.projects-film--desktop .projects-coming__text::before,.projects-film--desktop .projects-coming__text::after{animation:none!important}
}