/**
 * Pargas Platform — Photo Hero «Industrial Hygiene in Motion» (v2.0.0 — dairy line photo)
 * Static photograph (hero-percidine-dairy.webp) + 7 transparent FX layers:
 *   1 hygiene ripple  2 flowing light trails (SVG dash on the photo's real trail)
 *   3 micro particles 4 water droplets  5 industrial light sweep (broad + glint)
 *   6 product halo (core + ambient)     7 hygiene scan (product → bottle line)
 * v2 LUXURY PASS: cinematic entrance, static vignette, dual halo, 5-ring ripples,
 *   two-band steel sweep, trails traced on the actual photographed light trail.
 * The photo pixels are NEVER altered — FX are additive transparent layers.
 * GPU-friendly only: transform + opacity (+ SVG stroke-dashoffset).
 * Namespace: pg-ph (isolated from legacy .pg-hero).
 */

.pg-ph {
        position: relative;
        overflow: hidden;
        background: #08222C;               /* pre-paint fallback under photo */
        color: #fff;
        isolation: isolate;
}

/* ===== Stage — the photo window (full-bleed desktop, top-strip mobile) ===== */
.pg-ph__stage {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
}

/* ===== Scene — cover-fit stage; JS locks it to the product anchor ===== */
.pg-ph__scene {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translate3d(0, 0, 0);
        will-change: transform;            /* set once, scene itself never animates */
        pointer-events: none;
        /* photo anchors (fractions of hero-percidine-dairy.webp) — tuning knobs */
        --px: 66.6%;                       /* product horizontal center          */
        --pbase: 82.4%;                    /* ripple origin (just under the can base, ON the table) */
        --pcy: 59.8%;                      /* product visual center (halo/trails)*/
}
.pg-ph__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 66% 60%;          /* no-JS fallback framing */
        user-select: none;
        -webkit-user-drag: none;
}

/* ===== Cinematic entrance (JS adds .pg-ph--js, then .pg-ph--ready on img load) ===== */
.pg-ph--js .pg-ph__img {
        opacity: 0;
        transform: scale(1.045);
}
.pg-ph--js.pg-ph--ready .pg-ph__img {
        opacity: 1;
        transform: scale(1);
        transition:
                opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 2.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ===== 6 — Product halo: ambient veil + tight breathing core ===== */
.pg-ph__halo {
        position: absolute;
        left: var(--px);
        top: var(--pcy);
        width: 56%;
        aspect-ratio: 1 / 0.72;
        transform: translate(-50%, -50%);
        background: radial-gradient(closest-side,
                rgba(153, 246, 228, 0.10) 0%,
                rgba(103, 232, 249, 0.065) 40%,
                rgba(34, 211, 238, 0.03) 62%,
                transparent 78%);
        opacity: 0.7;
        animation: pgPhHalo 7.5s ease-in-out infinite;
}
.pg-ph__halo::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 52%;
        width: 34%;
        aspect-ratio: 1 / 0.9;
        transform: translate(-50%, -50%);
        background: radial-gradient(closest-side,
                rgba(224, 255, 250, 0.13) 0%,
                rgba(147, 233, 248, 0.07) 48%,
                transparent 74%);
        animation: pgPhHalo 5.2s ease-in-out infinite;
        animation-delay: -2.1s;
}
@keyframes pgPhHalo {
        0%, 100% { opacity: 0.62; }
        50%      { opacity: 1;   }
}

/* ===== 2 — Flowing light trails (SVG traced on the photo's real trail) ===== */
.pg-ph__trails {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
}
.pg-ph__trails path {
        fill: none;
        stroke-linecap: round;
        stroke-dasharray: 12 88;           /* one comet per path (pathLength=100) */
        animation: pgPhDash linear infinite;
}
.pg-ph__trails .glow {
        stroke: rgba(125, 235, 250, 0.26);
        stroke-width: 10;
        opacity: 0.55;
}
.pg-ph__trails .core {
        stroke: url(#pgPhTrailGrad);
        stroke-width: 3.2;
}
.pg-ph__tg--1 path { animation-duration: 12.5s;  animation-delay: -3s; }
.pg-ph__tg--2 path { animation-duration: 17s;    animation-delay: -9s; stroke-dasharray: 9 91; }
.pg-ph__tg--3 path { animation-duration: 10.5s;  animation-delay: -5.4s; stroke-dasharray: 14 86; }
.pg-ph__tg { animation: pgPhTrailBreathe 9.5s ease-in-out infinite; }
.pg-ph__tg--2 { animation-duration: 13s; }
.pg-ph__tg--3 { animation-duration: 8s; }
@keyframes pgPhDash { to { stroke-dashoffset: -100; } }
@keyframes pgPhTrailBreathe {
        0%, 100% { opacity: 0.5; }
        50%      { opacity: 0.95; }
}

/* ===== 1 — Hygiene ripple (5 perspective rings from the product base) ===== */
.pg-ph__ripples i {
        position: absolute;
        left: var(--px);
        top: var(--pbase);
        width: 32%;
        aspect-ratio: 1 / 0.3;             /* matches the table's perspective */
        transform: translate(-50%, -50%) scale(0.14);
        border-radius: 50%;
        background: radial-gradient(closest-side,
                transparent 79%,
                rgba(125, 235, 250, 0.30) 87%,
                rgba(255, 255, 255, 0.34) 93%,
                transparent 100%);
        opacity: 0;
        animation: pgPhRipple 11.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
        will-change: transform, opacity;
}
.pg-ph__ripples i:nth-child(2) { animation-delay: 2.3s; }
.pg-ph__ripples i:nth-child(3) { animation-delay: 4.6s; }
.pg-ph__ripples i:nth-child(4) { animation-delay: 6.9s; }
.pg-ph__ripples i:nth-child(5) { animation-delay: 9.2s; }
@keyframes pgPhRipple {
        0%   { transform: translate(-50%, -50%) scale(0.14); opacity: 0; }
        9%   { opacity: 0.44; }
        55%  { opacity: 0.2; }
        100% { transform: translate(-50%, -50%) scale(1);    opacity: 0; }
}

/* ===== 4 — Water droplets (left trail-end + right splash zone of the photo) ===== */
.pg-ph__drops i {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle at 32% 30%,
                rgba(255, 255, 255, 0.92) 0%,
                rgba(207, 250, 254, 0.5) 45%,
                rgba(103, 232, 249, 0.08) 78%,
                transparent 100%);
        opacity: 0;
        animation: pgPhDrop var(--d, 7s) ease-in-out infinite;
        animation-delay: var(--dl, 0s);
}
/* left — where the photographed trail dissolves on the table */
.pg-ph__drops i:nth-child(1)  { left: 45.5%; top: 79%; width: 5px; height: 5px; --d: 7s;   --dl: -1.2s; }
.pg-ph__drops i:nth-child(2)  { left: 48.5%; top: 82%; width: 4px; height: 4px; --d: 8.5s; --dl: -4s; }
.pg-ph__drops i:nth-child(3)  { left: 51%;   top: 80%; width: 6px; height: 6px; --d: 7.5s; --dl: -2.6s; }
.pg-ph__drops i:nth-child(4)  { left: 43.5%; top: 83%; width: 3px; height: 3px; --d: 9s;   --dl: -6s; }
.pg-ph__drops i:nth-child(5)  { left: 54%;   top: 78%; width: 4px; height: 4px; --d: 8s;   --dl: -5.1s; }
/* right — inside the photographed splash cloud */
.pg-ph__drops i:nth-child(6)  { left: 77.5%; top: 60%; width: 5px; height: 5px; --d: 7.8s; --dl: -0.4s; }
.pg-ph__drops i:nth-child(7)  { left: 79.5%; top: 66%; width: 4px; height: 4px; --d: 6.8s; --dl: -3.2s; }
.pg-ph__drops i:nth-child(8)  { left: 81.5%; top: 57%; width: 3px; height: 3px; --d: 8.8s; --dl: -5.6s; }
.pg-ph__drops i:nth-child(9)  { left: 83%;   top: 71%; width: 5px; height: 5px; --d: 7.2s; --dl: -2s; }
.pg-ph__drops i:nth-child(10) { left: 85.5%; top: 64%; width: 4px; height: 4px; --d: 9.4s; --dl: -7.1s; }
@keyframes pgPhDrop {
        0%   { transform: translate3d(0, 3px, 0);        opacity: 0; }
        25%  { opacity: 0.5; }
        60%  { opacity: 0.28; }
        100% { transform: translate3d(-5px, -15px, 0);   opacity: 0; }
}

/* ===== 7 — Hygiene scan (thin verification band, product → bottle line) ===== */
.pg-ph__scan {
        position: absolute;
        inset: 0;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, transparent 38%, #000 46%, #000 66%, transparent 74%);
        mask-image: linear-gradient(180deg, transparent 38%, #000 46%, #000 66%, transparent 74%);
}
.pg-ph__scan i {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 46%;
        width: 19%;
        background: linear-gradient(90deg,
                transparent 0%,
                rgba(165, 243, 252, 0.09) 38%,
                rgba(255, 255, 255, 0.15) 50%,
                rgba(165, 243, 252, 0.09) 62%,
                transparent 100%);
        opacity: 0;
        animation: pgPhScan 10.5s ease-in-out infinite;
        will-change: transform, opacity;
}
@keyframes pgPhScan {
        0%   { transform: translate3d(0, 0, 0);      opacity: 0; }
        8%   { opacity: 0.55; }
        40%  { opacity: 0.4; }
        48%  { transform: translate3d(-244%, 0, 0);  opacity: 0; }
        100% { transform: translate3d(-244%, 0, 0);  opacity: 0; }
}

/* ===== 5 — Industrial light sweep (stainless table + conveyor wash + glint) ===== */
.pg-ph__sweep {
        position: absolute;
        inset: 0;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, transparent 62%, #000 76%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 62%, #000 76%, #000 100%);
        opacity: 0.9;
}
.pg-ph__sweep i {
        position: absolute;
        top: -10%;
        bottom: -10%;
        left: 0;
        width: 46%;
        background: linear-gradient(100deg,
                transparent 12%,
                rgba(255, 255, 255, 0.05) 42%,
                rgba(224, 250, 255, 0.07) 52%,
                rgba(255, 255, 255, 0.045) 62%,
                transparent 88%);
        transform: translate3d(-130%, 0, 0) skewX(-8deg);
        animation: pgPhSweep 12.5s ease-in-out infinite;
        will-change: transform;
}
/* narrow glint riding the table's front edge */
.pg-ph__sweep i:nth-child(2) {
        width: 26%;
        background: linear-gradient(100deg,
                transparent 20%,
                rgba(255, 255, 255, 0.09) 48%,
                rgba(240, 253, 255, 0.11) 52%,
                rgba(255, 255, 255, 0.08) 56%,
                transparent 84%);
        animation-duration: 15s;
        animation-delay: -7.2s;
}
@keyframes pgPhSweep {
        0%   { transform: translate3d(-130%, 0, 0) skewX(-8deg); }
        34%  { transform: translate3d(280%, 0, 0)  skewX(-8deg); }
        100% { transform: translate3d(280%, 0, 0)  skewX(-8deg); }
}

/* ===== 3 — Micro particles (spawned by JS, vars per particle) ===== */
.pg-ph__particles i {
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--s, 3px);
        height: var(--s, 3px);
        border-radius: 50%;
        background: radial-gradient(circle at 35% 32%,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(147, 233, 248, 0.6) 50%,
                rgba(34, 211, 238, 0) 80%);
        opacity: 0;
        animation: pgPhFloat var(--d, 9s) linear infinite;
        animation-delay: var(--dl, 0s);
        will-change: transform, opacity;
}
/* luxury glints: tiny star-like twinkles along the trail crest */
.pg-ph__particles i.gl {
        border-radius: 0;
        background: none;
        animation-name: pgPhGlint;
        animation-timing-function: ease-in-out;
}
.pg-ph__particles i.gl::before,
.pg-ph__particles i.gl::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95) 42%, rgba(224, 253, 255, 0.9) 58%, transparent);
}
.pg-ph__particles i.gl::before {
        width: 1.5px;
        height: 100%;
        transform: translate(-50%, -50%);
}
.pg-ph__particles i.gl::after {
        width: 100%;
        height: 1.5px;
        transform: translate(-50%, -50%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 42%, rgba(224, 253, 255, 0.9) 58%, transparent);
}
@keyframes pgPhFloat {
        0%   { transform: translate3d(0, 0, 0);             opacity: 0; }
        12%  { opacity: var(--o, 0.4); }
        78%  { opacity: calc(var(--o, 0.4) * 0.55); }
        100% { transform: translate3d(var(--dx, 30px), var(--dy, -40px), 0); opacity: 0; }
}
@keyframes pgPhGlint {
        0%, 100% { transform: scale(0.4) rotate(0.001deg); opacity: 0; }
        12%      { transform: scale(0.4) rotate(0.001deg); opacity: 0; }
        30%      { transform: scale(1) rotate(45deg);      opacity: var(--o, 0.85); }
        48%      { transform: scale(0.4) rotate(90deg);    opacity: 0; }
        100%     { transform: scale(0.4) rotate(90deg);    opacity: 0; }
}

/* FX off-switches */
.pg-ph--paused .pg-ph__halo,
.pg-ph--paused .pg-ph__halo::before,
.pg-ph--paused .pg-ph__trails path,
.pg-ph--paused .pg-ph__tg,
.pg-ph--paused .pg-ph__ripples i,
.pg-ph--paused .pg-ph__drops i,
.pg-ph--paused .pg-ph__scan i,
.pg-ph--paused .pg-ph__sweep i,
.pg-ph--paused .pg-ph__particles i { animation-play-state: paused !important; }

/* ===== Readability scrim (separate layer — never applied to content opacity) =====
 * v1.3.0 — سند اصلاحات بخش ۴: سفید/نارنجی روی عکس درهم می‌پوشید؛ لایه تیره‌تر
 * و وسیع‌تر + سایه متن برای کنتراست کافی (WCAG-محور) روی هر تصویری. */
.pg-ph__scrim {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
                linear-gradient(to right, rgba(6, 27, 35, 0.88) 0%, rgba(6, 27, 35, 0.62) 34%, rgba(6, 27, 35, 0.14) 62%, rgba(6, 27, 35, 0) 78%),
                linear-gradient(to top, rgba(6, 27, 35, 0.55) 0%, rgba(6, 27, 35, 0) 36%),
                linear-gradient(to bottom, rgba(6, 27, 35, 0.3) 0%, rgba(6, 27, 35, 0) 18%);
}

/* ===== Luxury vignette (static — zero animation cost) ===== */
.pg-ph__vignette {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(118% 92% at 64% 52%,
                transparent 52%,
                rgba(5, 22, 29, 0.05) 72%,
                rgba(5, 22, 29, 0.17) 100%);
}

/* ===== Copy — same texts, same hierarchy; staggered cinematic reveal ===== */
.pg-ph__inner {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        min-height: 620px;
        padding-block: var(--pg-space-11) calc(var(--pg-space-12) + 24px);
}
.pg-ph__copy {
        width: min(560px, 100%);
        margin-right: auto;                /* physical LEFT in both LTR/RTL — clear photo zone */
        padding-left: 8px;
        padding-right: 8px;
}
.pg-ph__badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--pg-accent);
        color: var(--pg-accent-ink);
        font-size: 0.71875rem;
        font-weight: 900;
        border-radius: var(--pg-round);
        padding: 5px 14px;
        margin-bottom: var(--pg-space-4);
}
.pg-ph__badge .pg-ico { width: 14px; height: 14px; }
/* v1.3.0 — سایه متن برای خوانایی همیشگی روی عکس */
.pg-ph__title {
        color: #fff;
        text-shadow: 0 1px 3px rgba(4, 20, 26, 0.55), 0 2px 14px rgba(4, 20, 26, 0.45);
}
.pg-ph__title em {
        font-style: normal;
        color: var(--pg-accent-bright);
        position: relative;
        white-space: nowrap;
        text-shadow: 0 1px 3px rgba(4, 20, 26, 0.6), 0 2px 14px rgba(4, 20, 26, 0.5);
}
.pg-ph__desc {
        margin-top: var(--pg-space-4);
        color: rgba(255, 255, 255, 0.92);
        font-size: 0.9375rem;
        line-height: 2.1;
        max-width: 540px;
        text-shadow: 0 1px 2px rgba(4, 20, 26, 0.5);
}
.pg-ph__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--pg-space-6); }
.pg-ph__stats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--pg-space-5) var(--pg-space-7);
        margin-top: var(--pg-space-7);
        padding-top: var(--pg-space-5);
        border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.pg-ph__stat { display: flex; align-items: center; gap: 10px; }
.pg-ph__stat .pg-ico { color: var(--pg-accent-bright); width: 22px; height: 22px; flex: none; }
.pg-ph__stat b { display: block; font-size: 0.9375rem; font-weight: 900; color: #fff; line-height: 1.5; }
.pg-ph__stat span { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.6); }

/* staged reveal — enabled only when JS is present (progressive enhancement) */
.pg-ph--js .pg-ph__copy > * {
        opacity: 0;
        transform: translateY(16px);
}
.pg-ph--js.pg-ph--ready .pg-ph__copy > * {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pg-ph--js.pg-ph--ready .pg-ph__copy > *:nth-child(1) { transition-delay: 0.15s; }
.pg-ph--js.pg-ph--ready .pg-ph__copy > *:nth-child(2) { transition-delay: 0.27s; }
.pg-ph--js.pg-ph--ready .pg-ph__copy > *:nth-child(3) { transition-delay: 0.39s; }
.pg-ph--js.pg-ph--ready .pg-ph__copy > *:nth-child(4) { transition-delay: 0.51s; }
.pg-ph--js.pg-ph--ready .pg-ph__copy > *:nth-child(5) { transition-delay: 0.63s; }

/* FX layers fade in after the photo lands */
.pg-ph--js .pg-ph__halo,
.pg-ph--js .pg-ph__trails,
.pg-ph--js .pg-ph__ripples,
.pg-ph--js .pg-ph__drops,
.pg-ph--js .pg-ph__scan,
.pg-ph--js .pg-ph__sweep,
.pg-ph--js .pg-ph__particles,
.pg-ph--js .pg-ph__vignette {
        opacity: 0;
}
.pg-ph--js.pg-ph--ready .pg-ph__halo,
.pg-ph--js.pg-ph--ready .pg-ph__trails,
.pg-ph--js.pg-ph--ready .pg-ph__ripples,
.pg-ph--js.pg-ph--ready .pg-ph__drops,
.pg-ph--js.pg-ph--ready .pg-ph__scan,
.pg-ph--js.pg-ph--ready .pg-ph__sweep,
.pg-ph--js.pg-ph--ready .pg-ph__particles {
        opacity: 1;
        transition: opacity 1.4s ease 0.9s;
}
/* vignette lands WITH the photo (it is part of the grade, not an FX layer) */
.pg-ph--js.pg-ph--ready .pg-ph__vignette {
        opacity: 1;
        transition: opacity 1.2s ease 0.1s;
}

/* ===== Tablet ===== */
@media (max-width: 1023px) {
        .pg-ph__inner { min-height: 540px; padding-block: var(--pg-space-10) var(--pg-space-11); }
        .pg-ph__copy { width: min(440px, 56%); }
        .pg-ph__scrim {
                background:
                        linear-gradient(to right, rgba(6, 27, 35, 0.72) 0%, rgba(6, 27, 35, 0.44) 34%, rgba(6, 27, 35, 0) 62%),
                        linear-gradient(to top, rgba(6, 27, 35, 0.4) 0%, rgba(6, 27, 35, 0) 30%);
        }
        .pg-ph__ripples i:nth-child(n + 4) { display: none; }
        .pg-ph__drops i:nth-child(n + 8) { display: none; }
        .pg-ph__sweep i { width: 54%; }
}

/* ===== Mobile — re-anchored composition, NOT a shrink:
   photo stage is an in-flow strip (whole product visible), copy flows on ink ===== */
@media (max-width: 639px) {
        .pg-ph { background: linear-gradient(180deg, #0A2A36 0%, #08222C 100%); }
        .pg-ph__stage {
                position: relative;
                inset: auto;
                height: 336px;
                -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
        }
        .pg-ph__inner {
                display: block;
                min-height: 0;
                padding-block: 0 var(--pg-space-9);
        }
        .pg-ph__copy { width: 100%; margin-right: 0; padding-top: 14px; }
        .pg-ph__scrim {
                background: linear-gradient(to top, rgba(8, 34, 44, 0.85) 0%, rgba(8, 34, 44, 0) 24%);
        }
        .pg-ph__vignette { background: none; }
        .pg-ph__ripples i { width: 44%; }
        .pg-ph__ripples i:nth-child(n + 3) { display: none; }
        .pg-ph__drops i:nth-child(n + 6) { display: none; }
        .pg-ph__scan i { animation-duration: 12.5s; }
        .pg-ph__halo { width: 78%; }
        .pg-ph__ctas .pg-btn { flex: 1 1 auto; justify-content: center; }
        .pg-ph__stats { gap: var(--pg-space-4) var(--pg-space-5); }
}

/* ===== Reduced motion — the pure static photograph, everything visible at once ===== */
@media (prefers-reduced-motion: reduce) {
        .pg-ph--js .pg-ph__img,
        .pg-ph--js .pg-ph__copy > * { opacity: 1; transform: none; transition: none !important; }
        .pg-ph__halo,
        .pg-ph__trails,
        .pg-ph__ripples,
        .pg-ph__drops,
        .pg-ph__scan,
        .pg-ph__sweep,
        .pg-ph__particles { display: none !important; }
        .pg-ph__vignette { opacity: 1 !important; }
}

/* ============================================================
 * v1.1.5 — Hero v2 (consumers-v3): انیمیشن ورود متن‌ها + نشانگر اسکرول
 * هر دو فقط با مارک‌آپ/کلاس صریح PHP فعال می‌شوند؛ بدون تنظیم = کیت.
 * ============================================================ */
.pg-ph--anim .pg-ph__badge,
.pg-ph--anim .pg-ph__title,
.pg-ph--anim .pg-ph__desc,
.pg-ph--anim .pg-ph__ctas,
.pg-ph--anim .pg-ph__stats {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s ease, transform .55s ease;
}
.pg-ph--anim.is-animated .pg-ph__badge,
.pg-ph--anim.is-animated .pg-ph__title,
.pg-ph--anim.is-animated .pg-ph__desc,
.pg-ph--anim.is-animated .pg-ph__ctas,
.pg-ph--anim.is-animated .pg-ph__stats {
        opacity: 1;
        transform: none;
}
.pg-ph__scroll {
        position: absolute;
        inset-inline-start: 50%;
        bottom: 18px;
        transform: translateX(50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .45);
        background: rgba(255, 255, 255, .12);
        color: #fff;
        cursor: pointer;
        z-index: 3;
        transition: background var(--pg-dur) var(--pg-ease), transform var(--pg-dur) var(--pg-ease);
}
.pg-ph__scroll:hover { background: rgba(255, 255, 255, .24); transform: translateX(50%) translateY(2px); }
.pg-ph__scroll svg { width: 20px; height: 20px; }