/* ADS STORY — clean build (v50)
   Palette ADS “Blue Metal Platinum Motion”
   Hero: full-width video + smoke top-left + brighter bottom-right
   Progress bar: hidden until scroll
*/

html, body{ margin:0; padding:0; }

#as-story{
  --navy:#050816;
  --ocean:#0B2A45;
  --steel:#2A79C5;
  --plat:#E9EEF6;
  --ivory:#F6F0E4;

  --ink: rgba(233,238,246,.92);
  --sub: rgba(233,238,246,.72);

  /* HERO tuning (FULL HERO) */
  --heroPosX: 70%;
  --heroPosY: 55%;

  min-height:100vh;
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  line-height:1.65;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 75% 10%, rgba(233,238,246,.10), transparent 60%),
    radial-gradient(900px 600px at 15% 30%, rgba(42,121,197,.16), transparent 55%),
    linear-gradient(180deg, var(--navy), var(--ocean) 70%, var(--navy));
}

/* Per-story hero framing (tweak here if needed) */
#as-story[data-story="manuel"]{ --heroPosX: 72%; --heroPosY: 58%; }
#as-story[data-story="lara"]{ --heroPosX: 52%; --heroPosY: 46%; }
#as-story *{ box-sizing:border-box; }
#as-story a{ color: rgba(233,238,246,.9); text-decoration:none; }
#as-story a:hover{ color:#fff; }

html,body{ margin:0; }

#as-story .wrap{ max-width:1100px; margin:0 auto; padding:42px 20px 70px; }

/* =====================
   Progress bar (hidden until scroll)
===================== */
#as-story .readbar{
  position:fixed;
  top:0; left:0; right:0;
  height:0;
  opacity:0;
  z-index:999;
  background:linear-gradient(90deg, var(--steel) var(--w,0%), rgba(233,238,246,.18) 0);
  backdrop-filter: blur(8px);
  transition: opacity .18s ease, height .18s ease;
  pointer-events:none;
}
#as-story .readbar.is-on{ height:4px; opacity:1; }

/* =====================
   HERO
===================== */
#as-story .ads-hero{
  position:relative;
  min-height: clamp(560px, 78vh, 900px);
  overflow:hidden;
}

#as-story .ads-hero__media{
  position:absolute;
  inset:0;
  background: var(--navy);
}

/* base media */
#as-story .ads-hero__video,
#as-story .ads-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: var(--heroPosX) var(--heroPosY);
}

/* FULL HERO video */
#as-story .ads-hero__video--full{
  z-index:1;
  transform:none;
  filter: saturate(102%) contrast(102%) brightness(96%);
}

/* Legacy layers (PRO mode) — hidden in full-hero build */
#as-story .ads-hero__video--bg,
#as-story .ads-hero__video--fg{ display:none; }

/* If you use a single image hero */
#as-story .ads-hero__img{
  z-index:0;
  filter: saturate(102%) contrast(102%) brightness(90%);
  transform: scale(1.02);
}

/* overlays */
#as-story .ads-hero__veil{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    /* scuro solo a sx per testo */
    radial-gradient(950px 620px at 14% 18%, rgba(5,8,22,.86), transparent 62%),
    linear-gradient(100deg,
      rgba(5,8,22,.78) 0%,
      rgba(5,8,22,.46) 34%,
      rgba(5,8,22,.10) 68%,
      rgba(5,8,22,0) 100%
    ),
    /* luce naturale bottom-right */
    radial-gradient(900px 700px at 92% 86%, rgba(255,255,255,.22), transparent 56%);
}

#as-story .ads-hero__smoke{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:1;
  background:
    /* fumè solo top-left */
    radial-gradient(720px 520px at 10% 12%, rgba(233,238,246,.22), transparent 62%),
    radial-gradient(520px 380px at 18% 26%, rgba(233,238,246,.12), transparent 68%);
  filter: blur(1px);
}

/* content overlay (NO rettangolo) */
#as-story .ads-hero__content{
  position:relative;
  z-index:5;
  height:100%;
  padding: 34px 20px 0;
  display:flex;
  align-items:flex-start;
}
#as-story .ads-hero__overlay{
  width: min(680px, 92vw);
  padding: 6px 6px 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

#as-story .ads-hero__kicker{
  display:flex;
  gap:12px;
  align-items:center;
  color: rgba(233,238,246,.68);
  font-size: 13px;
  margin-bottom: 12px;
}
#as-story .back{
  margin-left:auto;
  border:1px solid rgba(233,238,246,.28);
  background: rgba(5,8,22,.25);
  border-radius:999px;
  padding:8px 12px;
  backdrop-filter: blur(10px);
}
#as-story .back:hover{ border-color: rgba(233,238,246,.55); background: rgba(5,8,22,.32); }

#as-story .ads-hero__toprow{ display:flex; gap:14px; align-items:center; }
#as-story .ads-hero__avatar{
  width:74px; height:74px;
  border-radius:999px;
  object-fit:cover;
  border:2px solid rgba(233,238,246,.55);
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
}

#as-story .ads-hero__title{
  margin:0;
  font-size: clamp(22px, 3.6vw, 38px);
  letter-spacing: .10em;
  text-transform: uppercase;
  text-shadow:
    0 14px 40px rgba(0,0,0,.75),
    0 0 22px rgba(42,121,197,.16);
}
#as-story .ads-hero__subtitle{
  margin: 4px 0 0;
  color: rgba(233,238,246,.72);
  font-size: 14px;
  text-shadow: 0 10px 30px rgba(0,0,0,.65);
}
#as-story .ads-hero__lead{
  margin: 12px 0 0;
  color: rgba(233,238,246,.78);
  font-size: 15px;
  line-height: 1.6;
  text-shadow: 0 10px 30px rgba(0,0,0,.65);
  max-width: 62ch;
}
#as-story .ads-hero__buttons{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }

/* Buttons */
#as-story .btn{
  appearance:none;
  border-radius:999px;
  padding: 12px 18px;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#as-story .btn:active{ transform: translateY(1px); }
#as-story .btn-primary{
  background: linear-gradient(180deg, rgba(42,121,197,1), rgba(42,121,197,.86));
  color: #fff;
  box-shadow: 0 18px 55px rgba(42,121,197,.28);
}
#as-story .btn-primary:hover{ box-shadow: 0 20px 66px rgba(42,121,197,.38); }
#as-story .btn-ghost{
  background: rgba(5,8,22,.18);
  border-color: rgba(233,238,246,.26);
  color: rgba(233,238,246,.92);
}
#as-story .btn-ghost:hover{ background: rgba(5,8,22,.26); border-color: rgba(233,238,246,.55); }

/* =====================
   CONTENT CARDS
===================== */
#as-story h2{ font-size: clamp(20px,3.2vw,28px); margin:0 0 8px; }
#as-story .small{ color: rgba(233,238,246,.68); font-size:14px; }

#as-story .card,
#as-story .story-card{
  position:relative;
  border-radius:24px;
  border:1px solid rgba(233,238,246,.32);
  background: linear-gradient(180deg, rgba(11,42,69,.28), rgba(5,8,22,.16));
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
}
#as-story .card{ padding: 18px 18px; margin: 18px 0; }
#as-story .story-card{ padding: 18px 18px 44px; margin: 18px 0; }

#as-story .card::before,
#as-story .story-card::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:18px;
  border:1px solid rgba(233,238,246,.14);
  pointer-events:none;
}

#as-story .story-card__head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
#as-story .story-card__photo img{
  width:86px; height:86px;
  border-radius:999px;
  object-fit:cover;
  border: 2px solid rgba(233,238,246,.55);
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
}
#as-story .story-card__subtitle{ margin: 4px 0 0; color: rgba(233,238,246,.68); font-size:14px; }

/* parchment (warm ivory) */
#as-story .scroll-parchment{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(233,238,246,.28);
  background: rgba(246,240,228,.88);
  box-shadow: inset 0 0 18px rgba(0,0,0,.18);
  overflow:hidden;
}
#as-story .scroll-parchment__inner{
  padding: 16px 18px;
  color: rgba(5,8,22,.92);
  line-height:1.75;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
}
#as-story .scroll-parchment__inner p{ margin:0 0 12px; }

/* signature */
#as-story .story-card__signature{
  position:absolute;
  right: 18px;
  bottom: -6px;   /* prima era -18px */
  width: 160px;
  opacity: 1;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.65));
}
#as-story .story-card__signature img{ width:100%; display:block; }


/* ADS Motion (solo sotto hero) */
#as-story .ads-motion{
  /* FAILSAFE: se JS/IO falliscono, i contenuti restano VISIBILI */
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: transform, opacity;
}

/* Attiva l'animazione SOLO quando la pagina ha JS */
html.js #as-story .ads-motion{
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.985);
  filter: blur(2px);
}
html.js #as-story .ads-motion.is-in{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

/* =====================
   Responsive
===================== */
@media (max-width: 820px){
  #as-story .wrap{ padding: 28px 18px 60px; }
  #as-story .ads-hero__content{ padding: 18px 18px 0; }

  /* mobile tuning: un filo più centrale */
  #as-story{ --heroPosX: 60%; --heroPosY: 50%; }
}

@media (prefers-reduced-motion: reduce){
  #as-story .ads-motion{ opacity:1; transform:none; filter:none; transition:none; }
}

/* =====================
   Metal CTA bar (Se vuoi capire meglio)
===================== */
#as-story .ads-metalbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin: 18px 0;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(233,238,246,.34);
  background:
    radial-gradient(900px 240px at 18% 0%, rgba(233,238,246,.10), transparent 58%),
    linear-gradient(180deg, rgba(11,42,69,.28), rgba(5,8,22,.16));
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  overflow:hidden;
}
#as-story .ads-metalbar::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 16px;
  border: 1px solid rgba(233,238,246,.14);
  pointer-events:none;
}
#as-story .ads-metalbar::after{
  content:"";
  position:absolute;
  inset:-60px -120px auto auto;
  width: 320px;
  height: 220px;
  background: radial-gradient(circle at 30% 40%, rgba(233,238,246,.18), transparent 62%);
  transform: rotate(12deg);
  pointer-events:none;
  opacity:.9;
}
#as-story .ads-metalbar__copy{min-width: 220px; max-width: 640px;}
#as-story .ads-metalbar__copy h2{margin:0 0 6px;}
#as-story .ads-metalbar__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
}

/* home button in hero (sostituisce le CTA) */
#as-story .btn-home{
  background: rgba(11,42,69,.16);
  border-color: rgba(233,238,246,.30);
}
#as-story .btn-home:hover{
  background: rgba(11,42,69,.22);
  border-color: rgba(233,238,246,.55);
}

@media (max-width: 820px){
  #as-story .ads-metalbar{flex-direction:column; align-items:flex-start;}
  #as-story .ads-metalbar__actions{width:100%; justify-content:flex-start;}
  #as-story .ads-metalbar__actions .btn{width:100%; justify-content:center;}
}

/* =====================
   Home-like background (stesso mood della HOME)
===================== */
html, body{ margin:0; background:#050816; }
#as-story{
  background:
    radial-gradient(1200px 700px at 75% 10%, rgba(233,238,246,.10), transparent 60%),
    radial-gradient(900px 600px at 15% 30%, rgba(42,121,197,.16), transparent 55%),
    linear-gradient(180deg, #050816, #0B2A45 70%, #050816);
}
/* fallback sotto al video (se il video tarda o non parte) */
#as-story .ads-hero{
  background:
    radial-gradient(1100px 650px at 70% 12%, rgba(233,238,246,.10), transparent 60%),
    radial-gradient(900px 600px at 12% 30%, rgba(42,121,197,.16), transparent 55%),
    linear-gradient(180deg, #050816, #0B2A45 70%, #050816);
}

/* =========================
   METAL GLAM BUTTONS (ADS)
   (solo nella barra "Se vuoi capire meglio")
========================= */
#as-story .ads-metalbar__actions .btn{
  position: relative;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  letter-spacing: .02em;

  color: rgba(233,238,246,.92);
  border: 1px solid rgba(233,238,246,.36); /* platinum */
  background:
    radial-gradient(900px 220px at 22% 10%, rgba(233,238,246,.14), transparent 55%),
    linear-gradient(180deg, rgba(11,42,69,.52), rgba(5,8,22,.28));

  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(233,238,246,.20),
    inset 0 -10px 18px rgba(0,0,0,.28);

  backdrop-filter: blur(12px);
  transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  overflow: hidden;
}

#as-story .ads-metalbar__actions .btn::before{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: 999px;
  border: 1px solid rgba(233,238,246,.14); /* inner platinum */
  pointer-events:none;
}

#as-story .ads-metalbar__actions .btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background: linear-gradient(120deg, transparent 0%, rgba(233,238,246,.16) 46%, transparent 62%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events:none;
}

#as-story .ads-metalbar__actions .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(233,238,246,.58);
  box-shadow:
    0 22px 60px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(233,238,246,.24),
    inset 0 -10px 18px rgba(0,0,0,.25);
}

#as-story .ads-metalbar__actions .btn:hover::after{
  opacity: 1;
  animation: ads-metal-sheen 1.9s ease-in-out;
}

@keyframes ads-metal-sheen{
  0%{transform:translateX(-130%)}
  100%{transform:translateX(130%)}
}

/* PRIMARY (Steel Blue glam) */
#as-story .ads-metalbar__actions .btn.btn-primary{
  border-color: rgba(42,121,197,.70);
  background:
    radial-gradient(900px 240px at 24% 14%, rgba(233,238,246,.18), transparent 55%),
    linear-gradient(180deg, rgba(42,121,197,.95), rgba(42,121,197,.62));
  color:#fff;
  box-shadow:
    0 26px 75px rgba(42,121,197,.22),
    0 18px 45px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(233,238,246,.26),
    inset 0 -10px 18px rgba(0,0,0,.16);
}
#as-story .ads-metalbar__actions .btn.btn-primary:hover{
  box-shadow:
    0 34px 95px rgba(42,121,197,.30),
    0 22px 60px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(233,238,246,.28),
    inset 0 -10px 18px rgba(0,0,0,.14);
}

/* GHOST (Platinum outline) */
#as-story .ads-metalbar__actions .btn.btn-ghost{
  background:
    radial-gradient(900px 220px at 18% 0%, rgba(233,238,246,.10), transparent 55%),
    linear-gradient(180deg, rgba(11,42,69,.34), rgba(5,8,22,.22));
  border-color: rgba(233,238,246,.32);
}

@media (prefers-reduced-motion: reduce){
  #as-story .ads-metalbar__actions .btn::after{ animation:none !important; }
}

/* =========================
   ADS GLAM (Stories) — sheen/shine
   Attivo SOLO quando .ads-motion.is-visible (vedi ads-story.js v4)
========================= */

/* Titoli: metal gradient + shine */
#as-story .story-card__titles h2,
#as-story .ads-metalbar__copy h2{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;

  background: linear-gradient(90deg,
    rgba(233,238,246,.98),
    rgba(42,121,197,.92),
    rgba(246,240,228,.92),
    rgba(233,238,246,.98)
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 12px 34px rgba(0,0,0,.62),
    0 0 18px rgba(42,121,197,.16);
}

#as-story .ads-motion.is-visible .story-card__titles h2,
#as-story .ads-motion.is-visible .ads-metalbar__copy h2{
  animation: adsTextShine 6.5s linear infinite;
}

@keyframes adsTextShine{
  0%   { background-position: 0% 0%; }
  100% { background-position: 220% 0%; }
}

/* Story card: sheen overlay (non tocca il testo) */
#as-story .story-card{ overflow:visible; }

#as-story .story-card::after{
  content:"";
  position:absolute;
  inset:-45% -70%;
  clip-path: inset(0 round 24px);
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 40%,
    rgba(233,238,246,.42) 50%,
    rgba(42,121,197,.18) 56%,
    rgba(255,255,255,0) 66%
  );
  transform: translateX(-140%) rotate(12deg);
  opacity: 0;
  filter: blur(.6px);
  mix-blend-mode: screen;
  pointer-events:none;
}

#as-story .story-card.ads-motion.is-visible::after{
  opacity: .80;
  animation: adsSheen 7.4s linear infinite;
}

#as-story .story-card:hover::after{
  opacity: .95;
  animation-duration: 3.2s;
}

@keyframes adsSheen{
  0%   { transform: translateX(-140%) rotate(12deg); }
  100% { transform: translateX(140%) rotate(12deg); }
}

/* micro glow premium quando visibile */
#as-story .story-card.ads-motion.is-visible{
  box-shadow:
    0 26px 78px rgba(0,0,0,.62),
    0 0 0 1px rgba(233,238,246,.06),
    0 0 34px rgba(42,121,197,.10);
}

/* Parchment: riflesso leggero */
#as-story .scroll-parchment{ position:relative; }
#as-story .scroll-parchment::before{
  content:"";
  position:absolute;
  inset:-55% -80%;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 44%,
    rgba(255,255,255,.30) 52%,
    rgba(42,121,197,.10) 58%,
    rgba(255,255,255,0) 68%
  );
  transform: translateX(-140%) rotate(10deg);
  opacity:0;
  filter: blur(.7px);
  mix-blend-mode: soft-light;
  pointer-events:none;
}

#as-story .story-card.ads-motion.is-visible .scroll-parchment::before{
  opacity:.55;
  animation: adsSheenParch 10.5s linear infinite;
}

#as-story .story-card:hover .scroll-parchment::before{
  opacity:.70;
  animation-duration: 4.2s;
}

@keyframes adsSheenParch{
  0%   { transform: translateX(-140%) rotate(10deg); }
  100% { transform: translateX(140%) rotate(10deg); }
}

/* CTA bar: sheen via background layer (senza toccare ::before/::after esistenti) */
#as-story .ads-metalbar{
  background:
    linear-gradient(115deg, transparent 40%, rgba(233,238,246,.14) 50%, transparent 60%) -220% 0 / 240% 100% no-repeat,
    radial-gradient(900px 240px at 18% 0%, rgba(233,238,246,.10), transparent 58%),
    linear-gradient(180deg, rgba(11,42,69,.28), rgba(5,8,22,.16));
}

#as-story .ads-metalbar.ads-motion.is-visible{
  animation: adsBarSheen 8.2s linear infinite;
}

#as-story .ads-metalbar:hover{ animation-duration: 3.8s; }

@keyframes adsBarSheen{
  0%   { background-position: -220% 0, 0 0, 0 0; }
  100% { background-position: 220% 0, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce){
  #as-story .ads-motion.is-visible .story-card__titles h2,
  #as-story .ads-motion.is-visible .ads-metalbar__copy h2{ animation:none !important; }
  #as-story .story-card::after,
  #as-story .scroll-parchment::before{ animation:none !important; opacity:0 !important; }
  #as-story .ads-metalbar.ads-motion.is-visible{ animation:none !important; }
}

/* =========================
   METAL GLAM MATCH — come nel sito (senza animazioni infinite)
   - Titoli: gold/platinum bevel
   - Shine: SOLO hover
   - Scroll guard: riduce blur/backdrop durante scroll
========================= */

#as-story{
  /* Glam vars (derivate dal sito) */
  --ads-glam-g1: rgba(246,240,228,.96); /* warm ivory */
  --ads-glam-g2: rgba(248,220,143,.96); /* gold */
  --ads-glam-g3: rgba(233,238,246,.98); /* platinum */
  --ads-glam-g4: rgba(179,208,255,.92); /* cool highlight */

  --ads-title-shadow:
    0 1px 0 rgba(0,0,0,.30),
    0 10px 26px rgba(0,0,0,.55),
    0 0 18px rgba(42,121,197,.12);
}

/* Performance: durante scroll alleggeriamo effetti costosi */
#as-story.is-scrolling .card,
#as-story.is-scrolling .story-card,
#as-story.is-scrolling .ads-metalbar{
  backdrop-filter: none !important;
}
#as-story.is-scrolling .ads-hero__smoke{ filter:none !important; opacity:.38; }
#as-story.is-scrolling .ads-hero__video--full{ filter:none !important; }

/* Non far catturare scroll dal video */
#as-story .ads-hero__media,
#as-story .ads-hero__video{ pointer-events:none; }
#as-story .ads-hero__video{ transform: translateZ(0); will-change: transform; }

/* Stop animazioni infinite "glam" vecchie */
#as-story .ads-motion.is-visible .story-card__titles h2,
#as-story .ads-motion.is-visible .ads-metalbar__copy h2,
#as-story .story-card.ads-motion.is-visible::after,
#as-story .story-card.ads-motion.is-visible .scroll-parchment::before,
#as-story .ads-metalbar.ads-motion.is-visible{
  animation: none !important;
}

/* TITOLI — base (fallback) */
#as-story .ads-hero__title,
#as-story .story-card__titles h2,
#as-story .ads-metalbar__copy h2{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(233,238,246,.94);
  text-shadow: var(--ads-title-shadow);
}

/* Metal glam vero (Chrome/Safari/Edge) */
@supports (-webkit-background-clip:text){
  #as-story .ads-hero__title,
  #as-story .story-card__titles h2,
  #as-story .ads-metalbar__copy h2{
    background:
      linear-gradient(90deg,
        var(--ads-glam-g1) 0%,
        var(--ads-glam-g2) 18%,
        var(--ads-glam-g3) 44%,
        var(--ads-glam-g4) 62%,
        var(--ads-glam-g2) 78%,
        var(--ads-glam-g1) 100%
      );
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: 0.45px rgba(0,0,0,.34);
    transition: background-position .75s ease, filter .25s ease;
  }
}

/* Kicker un filo più "gold" */
#as-story .ads-hero__kicker{ color: rgba(233,238,246,.72); }
@supports (-webkit-background-clip:text){
  #as-story .ads-hero__kicker span{
    background:
      linear-gradient(90deg, var(--ads-glam-g2), var(--ads-glam-g3), var(--ads-glam-g2));
    background-size: 180% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: 0.25px rgba(0,0,0,.25);
  }
}

/* HOVER: come nel sito (shimmer solo quando interagisci) */
@media (hover:hover){
  @supports (-webkit-background-clip:text){
    #as-story .ads-hero__overlay:hover .ads-hero__title,
    #as-story .story-card:hover .story-card__titles h2,
    #as-story .ads-metalbar:hover .ads-metalbar__copy h2{
      background-position: 100% 50%;
      filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
    }
  }

  /* Sheen: SOLO hover (usa keyframes già presenti) */
  #as-story .story-card:hover::after{
    opacity: .85;
    animation: adsSheen 3.2s linear 1;
  }
  #as-story .story-card:hover .scroll-parchment::before{
    opacity: .55;
    animation: adsSheenParch 4.2s linear 1;
  }
  #as-story .ads-metalbar:hover{
    animation: adsBarSheen 4.0s linear 1;
  }
}

/* Riduci un filo lo spacing del titolo hero (più "premium") */
#as-story .ads-hero__title{ letter-spacing: .08em; }

/* Motion reduce: zero sheen */
@media (prefers-reduced-motion: reduce){
  #as-story .story-card::after,
  #as-story .scroll-parchment::before{ opacity:0 !important; }
}

/* Video filter off (evita lag) */
#as-story .ads-hero__video--full{ filter:none !important; }