/* ═══════════════════════════════════════════════════════════════════════════
   AFFARINORO — Landing "Recensioni / Nuove aperture"  (shortcode [afn_landing_recensione])
   Stesso impianto di afn-promo-landing.css: tutto scoped sotto .afn-page-review
   per non collidere con Salient/WPBakery. I font (Cinzel, Cormorant Garamond,
   DM Sans) arrivano dall'handle condiviso 'afn-bonus-fonts' — qui NIENTE @import.
   Pagina mono-schermo, mobile-first (pensata per QR scansionato in negozio).
   ═══════════════════════════════════════════════════════════════════════════ */

.afn-page-review{
    --navy-abyss:#08162F;
    --navy-deep:#0d1f3c;
    --gold-deep:#6B4F12;
    --gold-core:#C9A227;
    --gold-bright:#E8C547;
    --gold-glow:#FBEFA3;
    --pearl:#F5EFD9;
    --pearl-dim:#cfdcea;
    --ink-soft:#C6BEA5;
    --ink-dim:#7E8AA0;

    position:relative;
    margin: -40px calc(50% - 50vw) 0;     /* full-bleed: sfonda i padding del builder */
    width: 100vw;
    max-width: 100vw;
    min-height: 100svh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:
        radial-gradient(900px 620px at 50% -8%, rgba(232,197,71,0.18), transparent 60%),
        radial-gradient(760px 520px at 8% 110%, rgba(18,96,154,0.55), transparent 62%),
        linear-gradient(180deg, #0a3a63 0%, #12609a 46%, #0e4f80 100%);
    font-family:'DM Sans', sans-serif;
    color:var(--pearl);
    text-align:center;
}
.afn-page-review *, .afn-page-review *::before, .afn-page-review *::after{ box-sizing:border-box; }

/* grana sottile per dare "materia" allo sfondo */
.afn-page-review::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* scintille dorate (i singoli <i> sono posizionati inline dal PHP) */
.afn-rev-sparks{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.afn-rev-spark{
    position:absolute; opacity:0;
    background:
        linear-gradient(var(--gold-glow),var(--gold-glow)) center/100% 1.5px no-repeat,
        linear-gradient(var(--gold-glow),var(--gold-glow)) center/1.5px 100% no-repeat;
    filter:drop-shadow(0 0 4px rgba(251,239,163,0.9));
    animation: afnRevTwinkle 5s ease-in-out infinite;
}
@keyframes afnRevTwinkle{
    0%,100%{ opacity:0; transform:scale(0.3) rotate(0); }
    50%    { opacity:0.95; transform:scale(1) rotate(45deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO RECENSIONE
   ═══════════════════════════════════════════════════════════════════════════ */
.afn-rev-hero{
    position:relative;
    z-index:2;
    flex:1 1 auto;
    display:flex; align-items:center; justify-content:center;
    padding: clamp(40px,9vw,72px) clamp(22px,5vw,56px) clamp(30px,6vw,48px);
}
/* alone dorato che "respira" dietro la città */
.afn-rev-hero::before{
    content:""; position:absolute; left:50%; top:42%;
    width:min(86vw,560px); aspect-ratio:1; transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(232,197,71,0.20), transparent 62%);
    filter:blur(8px); z-index:0; pointer-events:none;
    animation: afnRevBreathe 9s ease-in-out infinite;
}
@keyframes afnRevBreathe{
    0%,100%{ opacity:0.55; transform:translate(-50%,-50%) scale(1); }
    50%    { opacity:0.85; transform:translate(-50%,-50%) scale(1.1); }
}
.afn-rev-hero__inner{
    position:relative; z-index:2;
    max-width:560px; width:100%;
    display:flex; flex-direction:column; align-items:center;
}

/* marchio AFFARINORO (riusa l'asset wordmark del brand) */
.afn-rev-logo{
    margin:0 0 clamp(24px,4vw,34px);
    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.4));
    animation: afnRevRise 0.8s ease 0.05s both;
}
.afn-rev-logo picture, .afn-rev-logo img{
    display:block; width:clamp(168px,40vw,236px); height:auto; margin:0 auto;
}

/* EYEBROW "Nuova apertura" — stesso stile pill+dot delle altre landing */
.afn-rev-eyebrow{
    display:inline-block;
    font-family:'Cinzel', serif;
    font-size:clamp(10px,1.5vw,12px); font-weight:700;
    letter-spacing:0.42em; text-transform:uppercase; color:var(--gold-bright);
    padding:7px 18px; border:1px solid rgba(232,197,71,0.45); border-radius:999px;
    background:rgba(8,22,47,0.5); backdrop-filter:blur(4px); white-space:nowrap;
    animation: afnRevRise 0.7s ease 0.18s both;
}
.afn-rev-eyebrow .afn-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--gold-bright); margin-right:10px; transform:translateY(-2px);
    box-shadow:0 0 10px var(--gold-bright); animation: afnRevDot 1.6s ease-in-out infinite;
}
.afn-rev-eyebrow .afn-dot--right{ margin-right:0; margin-left:10px; }
@keyframes afnRevDot{
    0%,100%{ opacity:1; transform:translateY(-2px) scale(1); }
    50%    { opacity:0.4; transform:translateY(-2px) scale(0.7); }
}

.afn-rev-overline{
    font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:500;
    font-size:clamp(17px,4.4vw,22px); color:var(--pearl-dim);
    margin:clamp(18px,3vw,24px) 0 0;
    animation: afnRevRise 0.7s ease 0.3s both;
}

/* CITTÀ — protagonista, Cinzel oro animato */
.afn-rev-city{
    font-family:'Cinzel', serif; font-weight:700; text-transform:uppercase;
    font-size:clamp(52px,16vw,116px); line-height:0.96; letter-spacing:0.01em;
    margin:0.04em 0 0;
    background:linear-gradient(135deg, var(--gold-core) 0%, var(--gold-bright) 34%, var(--gold-glow) 50%, var(--gold-bright) 66%, var(--gold-core) 100%);
    background-size:220% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    filter:drop-shadow(0 12px 30px rgba(201,162,39,0.22));
    animation: afnRevRise 0.85s cubic-bezier(.2,.7,.2,1) 0.42s both, afnRevGold 5.5s linear infinite 0.42s;
}

.afn-rev-tagline{
    font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:600;
    font-size:clamp(21px,5.6vw,30px); line-height:1.25; color:var(--pearl);
    margin:clamp(12px,2vw,16px) 0 0;
    animation: afnRevRise 0.7s ease 0.6s both;
}
.afn-rev-tagline em{
    font-style:italic;
    background:linear-gradient(135deg, var(--gold-core), var(--gold-bright) 45%, var(--gold-glow) 55%, var(--gold-core));
    background-size:220% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation: afnRevGold 5s linear infinite;
}

.afn-rev-lead{
    font-family:'DM Sans', sans-serif; font-size:clamp(14.5px,3.8vw,16px);
    line-height:1.55; color:var(--ink-soft); max-width:34ch;
    margin:clamp(12px,2vw,16px) auto 0;
    animation: afnRevRise 0.7s ease 0.74s both;
}

/* STELLE — tappabili, si accendono in sequenza */
.afn-rev-stars{
    position:relative; display:inline-flex; gap:clamp(6px,2.4vw,12px);
    margin:clamp(22px,4vw,30px) 0 0; padding:6px 4px;
    text-decoration:none; outline:none; -webkit-tap-highlight-color:transparent;
}
.afn-rev-star{
    width:clamp(40px,11.5vw,56px); height:auto; display:block;
    filter:drop-shadow(0 4px 12px rgba(201,162,39,0.45));
    transform:scale(0); opacity:0;
    animation: afnRevStarPop 0.62s cubic-bezier(.18,.9,.32,1.45) both;
}
.afn-rev-stars .afn-rev-star:nth-child(1){ animation-delay:0.92s; }
.afn-rev-stars .afn-rev-star:nth-child(2){ animation-delay:1.04s; }
.afn-rev-stars .afn-rev-star:nth-child(3){ animation-delay:1.16s; }
.afn-rev-stars .afn-rev-star:nth-child(4){ animation-delay:1.28s; }
.afn-rev-stars .afn-rev-star:nth-child(5){ animation-delay:1.40s; }
@keyframes afnRevStarPop{
    0%  { transform:scale(0) rotate(-28deg); opacity:0; }
    70% { transform:scale(1.16) rotate(7deg); opacity:1; }
    100%{ transform:scale(1) rotate(0); opacity:1; }
}
.afn-rev-stars::after{
    content:""; position:absolute; inset:-12% -6%; pointer-events:none; border-radius:14px;
    background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.7) 50%, transparent 58%);
    transform:translateX(-130%); mix-blend-mode:screen;
    animation: afnRevStarShine 6.5s ease-in-out 1.85s infinite;
}
@keyframes afnRevStarShine{
    0%  { transform:translateX(-130%); }
    16% { transform:translateX(130%); }
    100%{ transform:translateX(130%); }
}
.afn-rev-stars:hover .afn-rev-star, .afn-rev-stars:focus-visible .afn-rev-star{
    filter:drop-shadow(0 6px 16px rgba(232,197,71,0.7));
}
.afn-rev-stars:active{ transform:scale(0.985); }

/* CTA — oro metallico animato (stesso linguaggio della promo) */
.afn-rev-cta{
    position:relative; overflow:hidden;
    margin:clamp(26px,4vw,32px) 0 0;
    display:inline-flex; align-items:center; justify-content:center; gap:12px;
    min-height:60px; padding:0 clamp(26px,6vw,40px); width:100%; max-width:380px;
    border:none; border-radius:16px; cursor:pointer; text-decoration:none;
    font-family:'Cinzel', serif; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    font-size:clamp(0.92rem,3.6vw,1.05rem); color:var(--navy-abyss);
    background:linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-core) 25%, var(--gold-bright) 50%, var(--gold-glow) 60%, var(--gold-bright) 70%, var(--gold-core) 85%, var(--gold-deep) 100%);
    background-size:250% 100%;
    box-shadow:0 12px 30px rgba(201,162,39,0.4), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(107,79,18,0.3);
    animation: afnRevGold 5s linear infinite, afnRevCtaGlow 2.8s ease-in-out 1.6s infinite, afnRevRise 0.7s ease 1.5s both;
    transition:transform .18s ease, box-shadow .3s ease;
}
.afn-rev-cta::after{
    content:""; position:absolute; top:0; left:-75%; width:40%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:skewX(-22deg); animation: afnRevCtaShine 3.6s ease-in-out 2.2s infinite;
}
@keyframes afnRevCtaShine{ 0%,45%{ left:-75%; } 65%,100%{ left:130%; } }
@keyframes afnRevCtaGlow{
    0%,100%{ box-shadow:0 12px 30px rgba(201,162,39,0.38), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(107,79,18,0.3); }
    50%    { box-shadow:0 16px 44px rgba(232,197,71,0.6), 0 0 24px rgba(232,197,71,0.3), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(107,79,18,0.3); }
}
.afn-rev-cta:hover{ transform:translateY(-2px); }
.afn-rev-cta:active{ transform:translateY(1px) scale(0.99); }
.afn-rev-cta__g{
    flex:0 0 auto; width:24px; height:24px; background:#fff; border-radius:50%;
    display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.afn-rev-cta__g svg{ width:15px; height:15px; display:block; }

.afn-rev-micro{
    font-family:'DM Sans', sans-serif; font-size:12.5px; letter-spacing:0.02em;
    color:var(--pearl-dim); margin:clamp(14px,2vw,18px) 0 0;
    animation: afnRevRise 0.7s ease 1.7s both;
}
.afn-rev-micro b{ color:var(--gold-glow); font-weight:700; }

@keyframes afnRevRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes afnRevGold{ to{ background-position:220% center; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER (stesso look condiviso delle altre landing)
   ═══════════════════════════════════════════════════════════════════════════ */
.afn-page-review .afn-page-footer{
    position:relative; z-index:2; flex:0 0 auto; text-align:center;
    padding:clamp(28px,4vw,46px) clamp(22px,5vw,56px) clamp(34px,5vw,52px);
    border-top:1px solid rgba(232,197,71,0.18);
    background:linear-gradient(180deg, transparent, rgba(8,22,47,0.6));
}
.afn-page-review .afn-page-footer__claim{
    font-family:'Cormorant Garamond', Georgia, serif; font-style:italic;
    font-size:clamp(1.05rem,2.4vw,1.45rem); color:var(--pearl); margin:0 0 8px; letter-spacing:0.2px;
}
.afn-page-review .afn-page-footer__reminder{
    font-family:'DM Sans', sans-serif; font-size:0.84rem; color:var(--ink-dim);
    max-width:460px; margin:0 auto; line-height:1.5;
}
.afn-page-review .afn-page-footer__reminder strong{ color:var(--gold-bright); font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — viewport da QR (320-430)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:380px){
    .afn-rev-eyebrow{ letter-spacing:0.32em; font-size:9.5px; padding:6px 14px; }
    .afn-rev-lead{ max-width:30ch; }
}

/* Riduci movimento */
@media (prefers-reduced-motion: reduce){
    .afn-page-review *{ animation:none !important; transition:none !important; }
    .afn-rev-city, .afn-rev-tagline em{ background-position:50% center; }
    .afn-rev-sparks, .afn-page-review::after, .afn-rev-stars::after, .afn-rev-cta::after, .afn-rev-hero::before{ display:none; }
    .afn-rev-star{ transform:none; opacity:1; }
}