/* ============================================================
   MOTION CARD "Siti Web" — hero di realizzazione-sito-web.html
   Scoped: tutte le classi sono prefissate "rswm-" (rsw motion) per
   evitare collisioni con style.css / main.js / hero-particles.js.
   Il frame reale (bordo, radius, blur, overlay) resta gestito da
   .video-placeholder.rsw-hero-video in style.css / realizzazione-sito-web.css:
   qui riempiamo solo quel contenitore in modalità "cover".
   ============================================================ */

.rswm-scene{
  --rswm-dur: 16s;
  --rswm-brand:#164f96;
  --rswm-deep:#0b1a30;
  --rswm-showcase-bg:#133A6F;
  --rswm-glow:#00f2fe;
  --rswm-act3-bg:#143F78;

  /* riempie .video-placeholder.rsw-hero-video in modalità "cover":
     mantiene il ratio interno 520/293 ma scala per coprire tutto lo
     spazio del contenitore reale (~428x380), centrata, con l'eccesso
     tagliato dall'overflow:hidden del contenitore stesso. */
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  width:auto; height:auto;
  min-width:100%; min-height:100%;
  aspect-ratio: 520 / 293;
  background: linear-gradient(135deg, var(--rswm-deep) 0%, var(--rswm-brand) 130%);
}

.rswm-stage{ position:relative; width:100%; height:100%; }

/* ============================================================
   ARROW BADGE — persistente, sempre visibile, bagliore che pulsa
   ============================================================ */
.rswm-arrow-badge{ position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
      display:flex; align-items:center; justify-content:center; z-index:10;
      backdrop-filter: blur(4px); }
.rswm-arrow-badge svg{ width:16px; height:16px; }
.rswm-arrow-glow{ position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
      box-shadow:0 0 0 0 rgba(0,242,254,.0);
      animation: rswmArrowPulse 2.6s ease-in-out infinite; pointer-events:none; z-index:9; }
@keyframes rswmArrowPulse{
  0%   { box-shadow:0 0 0 0 rgba(0,242,254,.28), 0 0 10px 2px rgba(0,242,254,.10); }
  50%  { box-shadow:0 0 0 9px rgba(0,242,254,0), 0 0 22px 8px rgba(0,242,254,.22); }
  100% { box-shadow:0 0 0 0 rgba(0,242,254,.0), 0 0 10px 2px rgba(0,242,254,.10); }
}

/* ============================================================
   rotazioni condivise
   ============================================================ */
@keyframes rswmRingSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes rswmCounterspin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(-360deg); } }

/* ============================================================
   ATTO 1 — SHOWCASE: mosaico diagonale di foto portfolio in
   scorrimento + headline
   ============================================================ */
.rswm-act-showcase{ position:absolute; inset:0; opacity:0; background:var(--rswm-showcase-bg); overflow:hidden;
      animation: rswmActShowcaseFade var(--rswm-dur) linear infinite; }

.rswm-mosaic{ position:absolute; left:-20%; top:-30%; width:140%; height:160%;
      transform:rotate(-10deg); display:flex; flex-direction:column; gap:10px; }
.rswm-mosaic-row{ display:flex; gap:10px; flex:none; animation: rswmMosaicScroll 16s linear infinite; }
.rswm-mosaic-row.rswm-rev{ animation-direction:reverse; }
.rswm-mosaic-tile{ flex:none; width:110px; height:70px; border-radius:8px; background-size:cover;
      background-position:center; opacity:.55; box-shadow:0 0 0 1px rgba(255,255,255,.10); }
@keyframes rswmMosaicScroll{ from{ transform:translateX(0); } to{ transform:translateX(-360px); } }

.rswm-showcase-text{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center;
      font-family:'Montserrat',sans-serif; color:#fff; width:420px; }
.rswm-showcase-text .rswm-t1{ display:block; font-weight:800; font-size:24px; opacity:0; transform:translateY(10px);
      animation: rswmScText1 var(--rswm-dur) ease infinite; }
.rswm-showcase-text .rswm-t2{ display:block; font-weight:600; font-size:15px; margin-top:8px; color:rgba(255,255,255,.9);
      opacity:0; transform:translateY(10px); animation: rswmScText2 var(--rswm-dur) ease infinite; }
@keyframes rswmScText1{
  0%,4%   { opacity:0; transform:translateY(10px); }
  7%,20%  { opacity:1; transform:translateY(0); }
  26%,100%{ opacity:0; transform:translateY(0); }
}
@keyframes rswmScText2{
  0%,7%   { opacity:0; transform:translateY(10px); }
  10%,20% { opacity:1; transform:translateY(0); }
  26%,100%{ opacity:0; transform:translateY(0); }
}

@keyframes rswmActShowcaseFade{
  0%{opacity:0} 2%{opacity:1} 28%{opacity:1} 31%{opacity:0} 100%{opacity:0}
}

/* ============================================================
   ATTO 2 — lista parole fluida, autoplay. Sfondo blu molto scuro.
   ============================================================ */
.rswm-act-words{ position:absolute; inset:0; opacity:0; background:#060f1e;
      animation: rswmActWordsFade var(--rswm-dur) linear infinite; }

.rswm-act-words-eyebrow{ position:absolute; left:50%; top:38px; transform:translateX(-50%);
      font-family:'Inter',sans-serif; font-weight:600; font-size:11px; letter-spacing:.14em;
      text-transform:uppercase; color:rgba(255,255,255,.35); }

.rswm-word-window{ position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
      width:440px; height:150px; overflow:hidden;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 16%, #000 42%, #000 58%, rgba(0,0,0,.18) 84%, transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 16%, #000 42%, #000 58%, rgba(0,0,0,.18) 84%, transparent 100%); }

.rswm-word-window::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      width:300px; height:1px; background:linear-gradient(90deg, transparent, rgba(0,242,254,.55), transparent); }

.rswm-word-list{ list-style:none; margin:0; padding:0; position:absolute; left:0; top:0; width:100%;
      animation: rswmWordScroll var(--rswm-dur) cubic-bezier(.65,0,.35,1) infinite; }
.rswm-word-list li{ height:30px; display:flex; align-items:center; justify-content:center;
      font-family:'Montserrat',sans-serif; font-weight:700; font-size:17px;
      color:var(--rswm-glow); text-shadow:0 0 10px rgba(0,242,254,.35); white-space:nowrap; }

@keyframes rswmWordScroll{
  0%,33%     { transform:translateY(60px); }
  36.7%      { transform:translateY(30px); }
  40.4%      { transform:translateY(0px); }
  44.1%      { transform:translateY(-30px); }
  47.8%      { transform:translateY(-60px); }
  51.5%      { transform:translateY(-90px); }
  55.2%,63%  { transform:translateY(-120px); }
  63.01%,100%{ transform:translateY(60px); }
}

@keyframes rswmActWordsFade{
  0%{opacity:0} 31%{opacity:0} 34%{opacity:1} 60%{opacity:1} 63%{opacity:0} 100%{opacity:0}
}

/* ============================================================
   ATTO 3 — "Siti Web" centrale + tag orbitanti (sempre orizzontali)
   easing morbido stile After Effects, sfondo #143F78
   ============================================================ */
.rswm-act-siti-web{ position:absolute; inset:0; opacity:0; background:var(--rswm-act3-bg);
      animation: rswmActSitiWebFade var(--rswm-dur) linear infinite; }

.rswm-core{ position:absolute; left:50%; top:52%; width:0; height:0; }

.rswm-core-title{ position:absolute; left:0; top:0; transform:translate(-50%,-50%) translateY(8px) scale(.92);
      white-space:nowrap; font-family:'Montserrat',sans-serif; font-weight:900; font-size:21px;
      letter-spacing:.03em;
      background:linear-gradient(90deg, #ffffff, #a9ecef);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      text-shadow:0 0 8px rgba(0,242,254,.22);
      opacity:0; animation: rswmSitiWebTitle var(--rswm-dur) cubic-bezier(.22,1,.36,1) infinite; }
@keyframes rswmSitiWebTitle{
  0%,66%   { opacity:0; transform:translate(-50%,-50%) translateY(8px) scale(.92); }
  70%,82%  { opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1); }
  85%,100% { opacity:0; transform:translate(-50%,-50%) translateY(0) scale(1); }
}

.rswm-orbit-ring{ position:absolute; left:0; top:0; width:0; height:0;
      animation: rswmRingSpin calc(var(--rswm-dur) * 1.7) linear infinite; }

/* .rswm-sat = posiziona il satellite sull'orbita (rotazione statica + raggio) */
.rswm-sat{ position:absolute; left:0; top:0; }
.rswm-sat-1{ transform:rotate(0deg)   translateX(118px); }
.rswm-sat-2{ transform:rotate(60deg)  translateX(124px); }
.rswm-sat-3{ transform:rotate(120deg) translateX(112px); }
.rswm-sat-4{ transform:rotate(180deg) translateX(126px); }
.rswm-sat-5{ transform:rotate(240deg) translateX(110px); }
.rswm-sat-6{ transform:rotate(300deg) translateX(122px); }

/* .rswm-sat-fix = annulla la rotazione statica del satellite → testo sempre dritto */
.rswm-sat-fix{ position:absolute; left:0; top:0; }
.rswm-fix-1{ transform:rotate(0deg); }
.rswm-fix-2{ transform:rotate(-60deg); }
.rswm-fix-3{ transform:rotate(-120deg); }
.rswm-fix-4{ transform:rotate(-180deg); }
.rswm-fix-5{ transform:rotate(-240deg); }
.rswm-fix-6{ transform:rotate(-300deg); }

/* .rswm-sat-inner = annulla la rotazione dinamica dell'orbit-ring → testo sempre orizzontale */
.rswm-sat-inner{ position:absolute; left:0; top:0;
      font-family:'Inter',sans-serif; font-weight:600; font-size:12px; white-space:nowrap;
      color:rgba(255,255,255,.62); opacity:0;
      animation: rswmCounterspin calc(var(--rswm-dur) * 1.7) linear infinite, rswmSitiWebSat var(--rswm-dur) cubic-bezier(.22,1,.36,1) infinite; }
@keyframes rswmSitiWebSat{
  0%,68%   { opacity:0; }
  72%,82%  { opacity:1; }
  85%,100% { opacity:0; }
}

@keyframes rswmActSitiWebFade{
  0%{opacity:0} 63%{opacity:0} 66%{opacity:1} 82%{opacity:1} 85%{opacity:0} 100%{opacity:0}
}

/* ============================================================
   ATTO 4 — CTA "Richiedi ora bozza gratuita home page sito web"
   Righe skewate a scala (staircase diagonale), ognuna con due
   parole impilate (sopra/sotto) in overflow:hidden; un "flip"
   verticale rivela la parola sotto, a cascata riga per riga
   (autoplay, per il loop della card)
   ============================================================ */
.rswm-act-cta{ position:absolute; inset:0; opacity:0; background:var(--rswm-act3-bg);
      animation: rswmActCtaFade var(--rswm-dur) linear infinite; }

.rswm-cta-glow-bg{ position:absolute; left:50%; top:50%; width:320px; height:170px; transform:translate(-50%,-50%);
      background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0,242,254,.14) 0%, transparent 72%);
      opacity:.4; animation: rswmCtaGlowPulse 1.8s ease-in-out infinite; pointer-events:none; }
@keyframes rswmCtaGlowPulse{ 0%,100%{ opacity:.26; } 50%{ opacity:.44; } }

.rswm-stair{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      display:flex; flex-direction:column; align-items:center; margin:0; padding:0; }

.rswm-stair li{ position:relative; overflow:hidden; height:24px; list-style:none; }
.rswm-stair li:nth-child(1){ transform:translateX(-36px) skew(60deg,-30deg) scaleY(.66667); }
.rswm-stair li:nth-child(2){ transform:translateX(-24px) skew(0deg,-30deg)  scaleY(1.33333); }
.rswm-stair li:nth-child(3){ transform:translateX(-12px) skew(60deg,-30deg) scaleY(.66667); }
.rswm-stair li:nth-child(4){ transform:translateX(0px)   skew(0deg,-30deg)  scaleY(1.33333); }
.rswm-stair li:nth-child(5){ transform:translateX(12px)  skew(60deg,-30deg) scaleY(.66667); }
.rswm-stair li:nth-child(6){ transform:translateX(24px)  skew(0deg,-30deg)  scaleY(1.33333); }
.rswm-stair li:nth-child(7){ transform:translateX(36px)  skew(60deg,-30deg) scaleY(.66667); }

.rswm-stair .rswm-flip{ position:relative; }
.rswm-stair p{ height:24px; margin:0; padding:0 5px; line-height:22px; white-space:nowrap;
      font-family:'Montserrat',sans-serif; font-weight:900; text-transform:uppercase;
      letter-spacing:-.4px; font-size:16px; color:#ffffff; }

.rswm-stair li:nth-child(1) .rswm-flip{ animation: rswmCtaFlip1 var(--rswm-dur) ease infinite; }
.rswm-stair li:nth-child(2) .rswm-flip{ animation: rswmCtaFlip2 var(--rswm-dur) ease infinite; }
.rswm-stair li:nth-child(3) .rswm-flip{ animation: rswmCtaFlip3 var(--rswm-dur) ease infinite; }
.rswm-stair li:nth-child(4) .rswm-flip{ animation: rswmCtaFlip4 var(--rswm-dur) ease infinite; }
.rswm-stair li:nth-child(5) .rswm-flip{ animation: rswmCtaFlip5 var(--rswm-dur) ease infinite; }
.rswm-stair li:nth-child(6) .rswm-flip{ animation: rswmCtaFlip6 var(--rswm-dur) ease infinite; }
.rswm-stair li:nth-child(7) .rswm-flip{ animation: rswmCtaFlip7 var(--rswm-dur) ease infinite; }

@keyframes rswmCtaFlip1{ 0%,86%{transform:translateY(0);} 87%,100%{transform:translateY(-24px);} }
@keyframes rswmCtaFlip2{ 0%,87%{transform:translateY(0);} 88%,100%{transform:translateY(-24px);} }
@keyframes rswmCtaFlip3{ 0%,88%{transform:translateY(0);} 89%,100%{transform:translateY(-24px);} }
@keyframes rswmCtaFlip4{ 0%,89%{transform:translateY(0);} 90%,100%{transform:translateY(-24px);} }
@keyframes rswmCtaFlip5{ 0%,90%{transform:translateY(0);} 91%,100%{transform:translateY(-24px);} }
@keyframes rswmCtaFlip6{ 0%,91%{transform:translateY(0);} 92%,100%{transform:translateY(-24px);} }
@keyframes rswmCtaFlip7{ 0%,92%{transform:translateY(0);} 93%,100%{transform:translateY(-24px);} }

@keyframes rswmActCtaFade{
  0%{opacity:0} 83%{opacity:0} 86%{opacity:1} 99%{opacity:1} 100%{opacity:0}
}

/* ============================================================
   ACCESSIBILITÀ
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .rswm-act-showcase, .rswm-act-words, .rswm-act-siti-web, .rswm-act-cta,
  .rswm-mosaic-row, .rswm-word-list, .rswm-core-title, .rswm-sat-inner,
  .rswm-orbit-ring, .rswm-arrow-glow, .rswm-cta-glow-bg, .rswm-stair .rswm-flip{
    animation:none !important;
  }
  .rswm-act-siti-web{ opacity:1; }
  .rswm-core-title, .rswm-sat-inner{ opacity:1; }
  .rswm-act-cta{ opacity:0; }
}