/* Página Clube Mialich — iPhone animado no topo e vantagens com animação própria.
   Só azul e papel; nada de vermelho/amarelo. Respeita "reduzir movimento", a pausa do painel de acessibilidade
   (html.a11y-pausar) e o botão "Pausar animação" desta página (html.motion-paused). */

/* ---------- Cena do iPhone ---------- */
.phone-scene { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 600px; isolation: isolate; }
.blue-orbit {
    position: absolute; z-index: -1; left: 50%; top: 45%; width: min(100%, 520px); aspect-ratio: 1; border-radius: 50%;
    background:
        radial-gradient(ellipse at 24% 18%, #92b7fa88, transparent 49%),
        radial-gradient(ellipse at 78% 80%, #082f8377, transparent 55%),
        linear-gradient(145deg, #5d88d7 0%, #2453ae 48%, #003898 100%);
    background-size: 160% 160%, 150% 150%, 100% 100%;
    box-shadow: inset 0 1px 2px #dbe9ff99, inset -18px -22px 48px #001b5c35, 0 18px 45px #00389812;
    transform: translate(-50%, -50%); animation: blue-light-drift 14s ease-in-out infinite;
}
.blue-orbit::before, .blue-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.blue-orbit::before { inset: -5%; border: 1px solid #4470c322; border-top: 2px solid #78a2eb9c; border-bottom: 2px solid #00389845; animation: orbit-turn 28s linear infinite; }
.blue-orbit::after { inset: -10%; border: 1px solid #0038980e; border-left: 1px solid #4470c34d; border-right: 1px solid #92b4f270; animation: orbit-turn 40s linear infinite reverse; }
.phone-arrival { width: 264px; animation: phone-arrive 1.6s cubic-bezier(.16, 1, .3, 1) both; }
.phone-float { animation: phone-float 7s ease-in-out 1.6s infinite both; }
.iphone {
    position: relative; padding: 9px; border-radius: 43px; transform: rotate(-5deg);
    background: linear-gradient(115deg, #8b95a5, #151a24 8%, #535b69 48%, #171c25 90%, #8c95a4);
    box-shadow: 0 3px 0 #78828d inset, 0 0 0 1px #222a38, 16px 24px 36px #00194248, 3px 8px 12px #001d4a35;
}
.phone-screen { position: relative; overflow: hidden; border-radius: 34px; background: #0c1b43; border: 2px solid #10141d; }
.clube-visual .phone-screen > img { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.dynamic-island { position: absolute; width: 28%; height: 16px; background: #070a10; border-radius: 20px; left: 50%; top: 9px; transform: translateX(-50%); box-shadow: inset 0 0 0 1px #222; }
.dynamic-island::after { content: ""; position: absolute; width: 5px; height: 5px; background: #10223f; border: 1px solid #242a3b; border-radius: 50%; right: 9px; top: 5px; }
.side-button { position: absolute; width: 3px; background: linear-gradient(#6d7788, #1b2330); left: -3px; border-radius: 3px; }
.side-button--one { height: 24px; top: 83px; }
.side-button--two { height: 45px; top: 124px; }
.iphone::after { content: ""; position: absolute; width: 3px; height: 55px; right: -3px; top: 135px; border-radius: 3px; background: #404b5d; }
.phone-caption { margin-top: 34px; font-size: calc(12px * var(--a11y-fs, 1)); letter-spacing: .14em; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: 8px; text-align: center; }
.live-dot { height: 6px; width: 6px; border-radius: 50%; background: #4470c3; flex: none; }
.motion-toggle { margin-top: 12px; border: 1px solid var(--blue-100); background: var(--white); color: var(--blue); padding: 6px 14px; border-radius: 999px; font: 600 calc(13px * var(--a11y-fs, 1)) var(--font-body); cursor: pointer; }
.motion-toggle:hover { background: var(--blue-50); }
.phone-scene.is-paused *, .phone-scene.is-paused *::before, .phone-scene.is-paused *::after { animation-play-state: paused !important; }
@keyframes phone-arrive { from { opacity: 0; transform: translateY(35px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes phone-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-11px) rotate(1deg); } }
@keyframes blue-light-drift {
    0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; transform: translate(-50%, -50%) scale(1); }
    50% { background-position: 100% 35%, 0% 65%, 0 0; transform: translate(-50%, -50%) scale(1.018); }
}
@keyframes orbit-turn { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (max-width: 860px) {
    .phone-scene { min-height: 520px; width: min(100%, 380px); margin: 0 auto; }
    .phone-arrival { width: 220px; }
    .blue-orbit { width: 95%; top: 44%; }
}

/* ---------- Vantagens animadas (dentro dos cartões .vc-card) ---------- */
.vc-card { overflow: hidden; }
.vc-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.vc-anim { display: grid; place-items: center; min-height: 190px; margin: 0 0 14px; }

/* 01 contador de preço */
.discount-counter { min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; }
.counter-caption { font-size: calc(11px * var(--a11y-fs, 1)); letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.discount-counter strong { font-family: var(--font-display); font-size: clamp(36px, 3.4vw, 48px); font-weight: 700; line-height: 1.1; color: #e5101b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter-note, .visual-note { font-size: calc(12px * var(--a11y-fs, 1)); color: var(--muted); }
.visual-note { display: block; margin-top: 10px; }

/* 02 selo de troca de pontos */
.rewards-seal {
    position: relative; text-align: center; font-family: var(--font-display); font-weight: 800; line-height: .93; max-width: 230px; margin: 0 auto; padding: 4px 22px;
    color: var(--blue); animation: seal-breathe 5s ease-in-out infinite;
}
.rewards-seal > span { display: block; position: relative; }
.seal-intro { font-size: 25px; letter-spacing: .6px; }
.seal-points { font-size: 50px; color: #2a62d6; }
.seal-connector { font-size: 15px; line-height: 1.5; color: #7188b1; letter-spacing: 2px; }
.seal-prizes { font-size: 36px; color: var(--blue); }
.seal-discounts { font-size: 25px; color: #3868c3; }
.reward-arrow { position: absolute; width: 27px; height: 25px; top: 50%; overflow: visible; filter: drop-shadow(0 2px 2px #00389818); }
.arrow-left { left: -26px; fill: #2a62d6; animation: arrow-left 2.8s ease-in-out infinite; }
.arrow-right { right: -26px; fill: #4470c3; animation: arrow-right 2.8s ease-in-out .35s infinite; }
@keyframes seal-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes arrow-left { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(-6px, -50%); } }
@keyframes arrow-right { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(6px, -50%); } }

/* 03 jornal de ofertas em papel flutuante */
.flyer-stage { height: 200px; position: relative; display: grid; place-items: center; perspective: 750px; }
.flyer-paper {
    position: relative; width: 112px; transform: rotate(-7deg) rotateY(-12deg); animation: flyer-hover 6s ease-in-out infinite;
    box-shadow: 3px 3px 0 #d9e0ed, 5px 5px 0 #f0f3f8, 9px 14px 17px #00389823; border: 3px solid #fff; border-radius: 2px;
}
.flyer-paper img { display: block; width: 100%; height: auto; border-radius: 1px; }
.paper-fold { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 47%, #00000013 50%, #ffffff32 52%, transparent 56%); }
.flyer-shadow { position: absolute; bottom: 2px; left: 20%; width: 60%; height: 12px; border-radius: 50%; background: #00389815; filter: blur(5px); animation: flyer-shadow 6s ease-in-out infinite; }
@keyframes flyer-hover { 0%, 100% { transform: translateY(2px) rotate(-7deg) rotateY(-12deg); } 50% { transform: translateY(-9px) rotate(-3deg) rotateY(5deg); } }
@keyframes flyer-shadow { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(.83); opacity: .5; } }

/* 04 caixa de presente */
.gift-stage { height: 200px; display: grid; place-items: center; }
.gift-stage svg { display: block; width: 100%; max-width: 220px; height: 210px; overflow: visible; }
.gift-lid { transform-origin: 120px 142px; animation: gift-open 6s ease-in-out infinite; }
.floating-prize { animation: prize-emerge 6s ease-in-out infinite; transform-origin: 120px 110px; }
.gift-confetti { stroke-width: 4; stroke-linecap: round; animation: gift-confetti 6s ease-out infinite; transform-origin: 120px 140px; }
@keyframes gift-open { 0%, 10%, 92%, 100% { transform: translateY(0) rotate(0); } 28%, 72% { transform: translate(10px, -89px) rotate(12deg); } }
@keyframes prize-emerge { 0%, 13%, 94%, 100% { opacity: 0; transform: translateY(68px) scale(.55); } 31% { opacity: 1; transform: translateY(-12px) scale(1); } 48% { opacity: 1; transform: translateY(-5px) scale(1); } 64% { opacity: 1; transform: translateY(-12px) scale(1); } 76% { opacity: 1; transform: translateY(-5px) scale(1); } }
@keyframes gift-confetti { 0%, 18%, 74%, 100% { opacity: 0; transform: translateY(0) scale(.55); } 26% { opacity: 1; transform: translateY(-66px) scale(1); } 55% { opacity: .7; transform: translateY(-20px) scale(1.1); } 70% { opacity: 0; transform: translateY(15px) scale(1.15); } }

html.motion-paused .rewards-seal, html.motion-paused .reward-arrow, html.motion-paused .flyer-paper, html.motion-paused .flyer-shadow, html.motion-paused .gift-stage * { animation-play-state: paused; }
@media (max-width: 1100px) { .rewards-seal { max-width: 200px; } .seal-points { font-size: 44px; } .seal-prizes { font-size: 32px; } .seal-discounts { font-size: 22px; } }
/* nos cartões animados o conteúdo fica empilhado também no celular (a grade ícone+texto do style.css não se aplica) */
@media (max-width: 760px) {
    .vc-card:has(.vc-anim) { display: block; padding: 20px 18px 24px; }
    .vc-anim { min-height: 170px; }
    .vc-card:has(.vc-anim) h3 { margin: 0 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .phone-arrival, .phone-float, .blue-orbit, .blue-orbit::before, .blue-orbit::after, .rewards-seal, .reward-arrow, .flyer-paper, .flyer-shadow, .gift-stage * { animation: none !important; }
    .motion-toggle { display: none; }
    .gift-lid { transform: translate(10px, -89px) rotate(12deg); }
    .floating-prize { opacity: 1; transform: translateY(-8px); }
    .gift-confetti { opacity: 0; }
}

/* Desconto em vermelho: o preço fica vermelho ao cair e aparece o selo "-25%" (pedido da diretoria; valores ilustrativos) */
.counter-linha { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.counter-off {
    display: inline-block; padding: 4px 11px; border-radius: 999px; background: #e5101b; color: #fff;
    font: 800 calc(16px * var(--a11y-fs, 1)) var(--font-display, Barlow, Arial, sans-serif); letter-spacing: .02em;
    opacity: 0; transform: scale(.7); box-shadow: 0 6px 14px -6px rgba(229, 16, 27, .7);
}
:root[data-modo="escuro"] .counter-off { background: #ff4d4d; color: #1a0508; }