/* Safe Studio — White Christmas System (carregado só na edição de inverno).
   Monocromático: neve, prata, linhas de luz. Nada cartunesco. Nada intercepta cliques. */

/* Neve */
.snowfield { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.snowfield__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--snow-opacity); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 95%); }
/* Mantém a neve longe do bloco de texto central do hero */
.stage .snowfield__canvas { mask-image: radial-gradient(ellipse 32% 38% at 50% 34%, transparent 0%, rgba(0,0,0,.35) 60%, #000 100%), linear-gradient(180deg, #000 60%, transparent 98%); mask-composite: intersect; -webkit-mask-composite: source-in; }

/* Brilho frio no hero */
.is-winter .hero__bg::after { background: radial-gradient(closest-side, rgba(207,200,192,.12), rgba(207,200,192,.03) 60%, transparent); animation: ss-breathe 14s var(--ease-inout) infinite alternate; }
@keyframes ss-breathe { from { opacity: .7; transform: translate(-50%, -50%) scale(1); } to { opacity: 1; transform: translate(-50%, -52%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .is-winter .hero__bg::after { animation: none; } }
.hero__pill svg { width: 14px; height: 14px; }

/* Acúmulo de neve na borda superior do dispositivo do hero */
.frost-edge { position: absolute; z-index: 3; left: 3%; right: 3%; top: -9px; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16 V9 C20 4 34 8 52 6 S88 1 110 5 S150 9 172 5 S214 0 238 4 S280 9 304 5 S346 1 368 5 S392 8 400 7 V16Z' fill='%23E9EDF0'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); opacity: .92;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
/* Ornamentos */
.ornaments { position: absolute; inset: 0; pointer-events: none; color: var(--paper-ink); overflow: hidden; z-index: 0; }
.ornaments__wire { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 80px; opacity: .22; }
.ornaments__star { position: absolute; width: 14px; height: 14px; opacity: .35; }
.ornaments__star--a { top: 14%; right: 9%; animation: ss-twinkle 4s ease-in-out infinite; }
.ornaments__star--b { top: 30%; right: 22%; width: 9px; height: 9px; animation: ss-twinkle 5.5s ease-in-out 1s infinite; }
.ornaments__star--c { top: 10%; left: 6%; width: 22px; height: 22px; opacity: .18; }
.ornaments__pines { position: absolute; right: 0; bottom: 0; width: min(40vw, 520px); height: auto; opacity: .07; }
@keyframes ss-twinkle { 50% { opacity: .08; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .ornaments__star { animation: none; } }
body:not(.has-ornaments) .ornaments, body:not(.has-ornaments) .frost-edge, body:not(.has-ornaments) .footer__pines { display: none; }

/* Faixa editorial grande da campanha */
.bigmarquee { position: relative; z-index: 2; overflow: hidden; padding: 22px 0; background: var(--paper); color: var(--paper-ink); }
.bigmarquee__track { display: flex; width: max-content; animation: ss-marquee 60s linear infinite; }
.bigmarquee:hover .bigmarquee__track { animation-play-state: paused; }
.bigmarquee__group { display: flex; align-items: center; margin: 0; flex: none; }
.bigmarquee span { font-family: var(--font-title); font-weight: 600; font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; padding: 0 28px; font-variation-settings: "wdth" 88; }
.bigmarquee svg { width: 26px; height: 26px; flex: none; opacity: .5; }
@media (prefers-reduced-motion: reduce) { .bigmarquee__track { animation: none; } .bigmarquee__group[aria-hidden="true"] { display: none; } }

/* Campanha */
.campaign { position: relative; overflow: hidden; }
.campaign__head { position: relative; z-index: 1; display: grid; gap: var(--s-6); align-items: end; margin-bottom: var(--s-7); }
@media (min-width: 1000px) { .campaign__head { grid-template-columns: 1fr auto; } }
.campaign__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-12); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-muted); margin-bottom: var(--s-4); }
.campaign__kicker svg { width: 16px; height: 16px; }
.campaign__title { font-size: var(--fs-mega); line-height: .92; letter-spacing: -.03em; text-transform: uppercase; font-weight: 700; font-variation-settings: "wdth" 86; max-width: 12ch; }
.campaign__text { margin-top: var(--s-5); font-size: var(--fs-20); color: var(--paper-muted); max-width: 46ch; }
.campaign [data-mount="campaign"] { position: relative; z-index: 1; margin-bottom: var(--s-7); }

.countdown { display: grid; gap: 10px; }
.countdown__label { font-size: var(--fs-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-muted); }
.countdown__grid { display: flex; gap: 8px; }
.countdown__grid span { display: grid; justify-items: center; min-width: 74px; padding: 12px 10px; border-radius: var(--r-2); background: var(--paper-ink); color: var(--snow-white); }
.countdown__grid b { font-family: var(--font-mono); font-size: var(--fs-31); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.countdown__grid small { font-size: 11px; color: var(--silver); margin-top: 6px; }

/* Rodapé noturno */
.footer__night { position: absolute; left: 0; right: 0; top: 0; height: 220px; pointer-events: none; overflow: hidden; }
.snowfield--footer .snowfield__canvas { mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent); }
/* Silhueta de montanhas do rodapé desativada a pedido; o SVG fica no ss-footer.twig */
.footer__pines { display: none; }

/* Varal de luzes de Natal pendurado na faixa do cupom (vermelho e branco, piscando alternado) */
.annbar { overflow: visible; }
.garland { position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; z-index: 1; transition: opacity var(--dur-2); }
.garland__wire { position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22'%3E%3Cpath d='M0 2 Q30 16 60 9 T120 2' fill='none' stroke='%233A3330' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 120px 22px repeat-x; }
.garland__bulbs { position: absolute; inset: 0; filter: drop-shadow(0 0 4px currentColor); }
.garland__bulbs--a { color: rgba(234,59,68,.9); background: radial-gradient(circle 3.5px at 30px 14px, #EA3B44 95%, transparent) 0 0 / 120px 22px repeat-x; animation: ss-blink 2.6s ease-in-out infinite; }
.garland__bulbs--b { color: rgba(255,250,240,.9); background: radial-gradient(circle 3.5px at 90px 10px, #FFF8EE 95%, transparent) 0 0 / 120px 22px repeat-x; animation: ss-blink 2.6s ease-in-out 1.3s infinite; }
@keyframes ss-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .garland__bulbs { animation: none; } }
.annbar.is-hidden .garland { opacity: 0; }

/* Hero dividido: neve mais fraca sobre o texto à esquerda */
.frontier .snowfield__canvas { mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.4) 40%, #000 70%); }
/* Pinheiros da chamada final desativados: o fundo com imagem já faz a cena */
.finale .ornaments__pines { display: none; }
.finale .ornaments__wire { color: var(--red); opacity: .35; }
.finale .ornaments__star { color: var(--bone); }

/* =====================================================================
   Flocos de neve ao fundo (❅ ❆) — baseado no exemplo fornecido, otimizado:
   queda e balanço com transform (sem animar "top"), atrás do conteúdo, sem cliques.
   ===================================================================== */
.snowflakes { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.snowflake { position: absolute; top: 0; left: var(--x, 50%); color: #fff; font-family: Arial, "Segoe UI Symbol", sans-serif; font-size: calc(var(--s, 1em) * 1.2); line-height: 1; opacity: var(--o, .7); text-shadow: 0 0 5px #000; user-select: none; will-change: transform;
  animation: snowflakes-fall var(--d, 10s) linear calc(var(--delay, 0s) * -1) infinite; transform: translate3d(0, -10vh, 0); }
.snowflake > span { display: block; animation: snowflakes-shake var(--sd, 3s) ease-in-out var(--sdelay, 0s) infinite; }
@keyframes snowflakes-fall { from { transform: translate3d(0, -10vh, 0); } to { transform: translate3d(0, 105vh, 0); } }
@keyframes snowflakes-shake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--sway, 80px)); } }

/* Distribuição natural: posição, atraso, tamanho, opacidade e velocidade variados (profundidade) */
.snowflake:nth-child(1)  { --x: 1%;  --delay: 0s;   --sdelay: 0s;   --s: 1em;   --o: .75; }
.snowflake:nth-child(2)  { --x: 10%; --delay: 1s;   --sdelay: 1s;   --s: .8em;  --o: .5;  --d: 13s; }
.snowflake:nth-child(3)  { --x: 20%; --delay: 6s;   --sdelay: .5s;  --s: 1.3em; --o: .85; --d: 9s; }
.snowflake:nth-child(4)  { --x: 30%; --delay: 4s;   --sdelay: 2s;   --s: .7em;  --o: .45; --d: 14s; }
.snowflake:nth-child(5)  { --x: 40%; --delay: 2s;   --sdelay: 2s;   --s: 1em;   --o: .7; }
.snowflake:nth-child(6)  { --x: 50%; --delay: 8s;   --sdelay: 3s;   --s: 1.2em; --o: .8;  --d: 11s; }
.snowflake:nth-child(7)  { --x: 60%; --delay: 6s;   --sdelay: 2s;   --s: .75em; --o: .5;  --d: 15s; }
.snowflake:nth-child(8)  { --x: 70%; --delay: 2.5s; --sdelay: 1s;   --s: 1.1em; --o: .75; }
.snowflake:nth-child(9)  { --x: 80%; --delay: 1s;   --sdelay: 0s;   --s: .9em;  --o: .6;  --d: 12s; }
.snowflake:nth-child(10) { --x: 90%; --delay: 3s;   --sdelay: 1.5s; --s: 1.25em; --o: .8; --d: 9.5s; }
.snowflake:nth-child(11) { --x: 25%; --delay: 2s;   --sdelay: 0s;   --s: .7em;  --o: .45; --d: 16s; }
.snowflake:nth-child(12) { --x: 65%; --delay: 4s;   --sdelay: 2.5s; --s: 1em;   --o: .65; }
.snowflake:nth-child(13) { --x: 5%;  --delay: 9s;   --sdelay: 1.2s; --s: .85em; --o: .55; --d: 12.5s; --sway: 60px; }
.snowflake:nth-child(14) { --x: 15%; --delay: 3.5s; --sdelay: .8s;  --s: 1.15em; --o: .7; --d: 10.5s; }
.snowflake:nth-child(15) { --x: 35%; --delay: 7s;   --sdelay: 2.2s; --s: .75em; --o: .5;  --d: 14.5s; --sway: 50px; }
.snowflake:nth-child(16) { --x: 45%; --delay: 5s;   --sdelay: .3s;  --s: 1.05em; --o: .65; }
.snowflake:nth-child(17) { --x: 55%; --delay: 1.5s; --sdelay: 1.8s; --s: .8em;  --o: .5;  --d: 13.5s; --sway: 70px; }
.snowflake:nth-child(18) { --x: 75%; --delay: 8.5s; --sdelay: .6s;  --s: 1.3em; --o: .8;  --d: 9s; }
.snowflake:nth-child(19) { --x: 85%; --delay: 5.5s; --sdelay: 2.7s; --s: .7em;  --o: .45; --d: 15.5s; }
.snowflake:nth-child(20) { --x: 95%; --delay: .5s;  --sdelay: 1.1s; --s: 1em;   --o: .65; --sway: 40px; }
.snowflake:nth-child(21) { --x: 12%; --delay: 7.5s; --sdelay: 2.4s; --s: .9em;  --o: .6;  --d: 11.5s; }
.snowflake:nth-child(22) { --x: 48%; --delay: 9.5s; --sdelay: .9s;  --s: .75em; --o: .5;  --d: 14s; }
.snowflake:nth-child(23) { --x: 68%; --delay: 3s;   --sdelay: 1.6s; --s: 1.2em; --o: .75; --d: 10s; }
.snowflake:nth-child(24) { --x: 88%; --delay: 6.5s; --sdelay: .2s;  --s: .85em; --o: .55; --d: 12s; }

/* Celular: metade dos flocos e balanço menor */
@media (max-width: 700px) { .snowflake:nth-child(n+13) { display: none; } .snowflake { --sway: 40px; } }
/* Movimento reduzido: sem flocos */
@media (prefers-reduced-motion: reduce) { .snowflakes { display: none; } }
