/* ============ EFEITOS (só no site público; ligados por fx.js) ============ */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --ang: 360deg; } }
@keyframes float { 0%,100% { translate: 0 -8px; } 50% { translate: 0 10px; } }
@keyframes sheen { 0%,55% { left: -60%; } 100% { left: 140%; } }
@keyframes mq { to { transform: translateX(-50%); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255,183,3,.55); } 100% { box-shadow: 0 0 0 16px rgba(255,183,3,0); } }
@keyframes chIn { from { opacity: 0; transform: translateY(.7em) rotateX(-80deg) scale(.9); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes scan { 0% { top: 6%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 94%; opacity: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@keyframes pulseDot { 0%,100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }

html.fx-on, html.fx-on body { overflow-x: clip; }

/* ---- fundo vivo (canvas WebGL) ---- */
html.fx-gl body { background: var(--bg); }
#fx-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; view-transition-name: fxbg; }
html.fx-on body::before { /* grão de filme */
  content: ""; position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#fx-glow { position: fixed; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle, rgba(255,61,129,.20), rgba(255,183,3,.08) 40%, transparent 68%); mix-blend-mode: screen; will-change: transform; }
html.fx-glow-on #fx-glow { opacity: 1; }
#fx-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #ff3d81, #ffb703, #5ab0ff); box-shadow: 0 0 12px rgba(255,61,129,.8); pointer-events: none; }
html.fx-on .top { view-transition-name: fxtop; transition: background .3s, box-shadow .3s; }
html.fx-on .top.scrolled { background: rgba(13,11,20,.72); box-shadow: 0 8px 30px rgba(0,0,0,.35); }

/* ---- revelar ao rolar (usa propriedades individuais para não brigar com o 3D) ---- */
html.fx-on .rv { transition-property: opacity, translate, filter, transform, border-color, box-shadow, scale;
  transition-duration: .8s, .8s, .8s, .2s, .3s, .3s, .2s; transition-delay: var(--d,0ms), var(--d,0ms), var(--d,0ms), 0s, 0s, 0s, 0s;
  transition-timing-function: cubic-bezier(.2,.8,.2,1); }
html.fx-on .rv:not(.in) { opacity: 0; translate: 0 34px; filter: blur(8px); }
html.fx-on .holo-frame.rv:not(.in) { --rx: -70deg; translate: 0 50px; }

/* ---- 3D / inclinação ---- */
html.fx-on [data-tilt], html.fx-on a.card[data-tilt]:hover { transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
html.fx-on [data-tilt].tilting { transition-duration: .8s, .8s, .8s, .08s, .3s, .3s, .2s; scale: 1.025; }
html.fx-on [data-tilt]:not(.tilting) { transition: transform .6s cubic-bezier(.2,.8,.2,1), scale .4s; }
html.fx-on .card { transform-style: preserve-3d; }
html.fx-on .card.tilting { border-color: rgba(255,183,3,.75); box-shadow: 0 24px 60px rgba(255,61,129,.28), 0 0 0 1px rgba(255,183,3,.35); }
html.fx-on .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 62%); }
html.fx-on .card.tilting::after { opacity: 1; }
html.fx-on .card .img { background-size: 112%; background-position: calc(50% + (var(--mxn,50) - 50) * .16%) calc(50% + (var(--myn,50) - 50) * .16%); transition: background-position .25s; }
html.fx-on .card .badge { transform: translateZ(40px); }

/* ---- botões ---- */
html.fx-on .btn { position: relative; overflow: hidden; }
.btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
.btn.ghost .ripple { background: rgba(255,255,255,.18); }
.btn.cta { isolation: isolate; box-shadow: 0 8px 30px rgba(255,183,3,.35); }
.btn.cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: -1; animation: spin 3.2s linear infinite;
  background: conic-gradient(from var(--ang), #ff3d81, #ffb703, #5ab0ff, #c77dff, #ff3d81);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.btn.cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -60%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); animation: sheen 3.4s ease-in-out infinite; }

/* ---- título que se monta letra a letra ---- */
.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; opacity: 0; animation: chIn .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 38ms + 120ms); transform-origin: 50% 100%; }
html.fx-on .hero h1 { text-shadow: 0 0 36px rgba(255,61,129,.6), 0 0 80px rgba(255,183,3,.28); perspective: 700px; }

/* ---- herói com ingresso flutuante ---- */
.hero2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.hero-art { display: flex; justify-content: center; perspective: 1200px; animation: float 6.5s ease-in-out infinite; }
@media (max-width: 820px) { .hero2 { grid-template-columns: 1fr; gap: 28px; } .hero-art { order: -1; margin-bottom: -4px; } .hticket { width: 220px !important; height: 300px !important; } }
.hticket { position: relative; width: 270px; height: 372px; border-radius: 26px; padding: 2px; transform-style: preserve-3d;
  background: conic-gradient(from var(--ang), #ff3d81, #ffb703, #2ee59d, #5ab0ff, #c77dff, #ff3d81); animation: spin 7s linear infinite;
  box-shadow: 0 30px 80px rgba(255,61,129,.35), 0 0 120px rgba(90,176,255,.18); }
.ht-in { position: relative; height: 100%; border-radius: 24px; padding: 20px 20px 18px; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(160deg, #1a1030 0%, #0d0b14 55%, #1d0f2c 100%); }
.ht-top { display: flex; justify-content: space-between; font-size: .68rem; letter-spacing: .2em; color: var(--muted); font-weight: 700; transform: translateZ(30px); }
.ht-title { font-size: 2.7rem; font-weight: 900; line-height: .95; letter-spacing: .04em; margin-top: 4px; transform: translateZ(60px);
  background: linear-gradient(100deg, #fff, #ffb703 40%, #ff3d81 75%, #c77dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ht-sub { color: var(--accent); font-weight: 700; letter-spacing: .1em; font-size: .85rem; transform: translateZ(40px); }
.ht-qr { margin: auto; width: 128px; height: 128px; padding: 8px; background: #fff; color: #0d0b14; border-radius: 12px; transform: translateZ(50px); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ht-qr svg { width: 100%; height: 100%; display: block; }
.ht-foot { text-align: center; font-size: .62rem; letter-spacing: .22em; color: var(--muted); font-weight: 700; transform: translateZ(20px); }
.ht-scan { position: absolute; left: 14px; right: 14px; height: 2px; top: 6%; border-radius: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, #2ee59d, transparent); box-shadow: 0 0 16px 3px rgba(46,229,157,.65); animation: scan 3.6s ease-in-out infinite; }
/* furos laterais de verdade: recorte por máscara, o fundo animado aparece através */
.hticket { -webkit-mask: radial-gradient(circle 12px at 0 56%, #0000 98%, #000), radial-gradient(circle 12px at 100% 56%, #0000 98%, #000);
  -webkit-mask-composite: source-in; mask: radial-gradient(circle 12px at 0 56%, #0000 98%, #000), radial-gradient(circle 12px at 100% 56%, #0000 98%, #000); mask-composite: intersect; box-shadow: none; }
.hero-art { filter: drop-shadow(0 30px 46px rgba(255,61,129,.38)) drop-shadow(0 0 60px rgba(90,176,255,.2)); }
/* camada holográfica que segue o dedo/mouse */
.holo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; }
.hticket .holo { background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.4), transparent 38%),
  conic-gradient(from calc(var(--mxn,50) * 3.6deg) at var(--mx,50%) var(--my,50%), #ff3d81, #ffb703, #2ee59d, #5ab0ff, #c77dff, #ff3d81);
  mix-blend-mode: color-dodge; opacity: .38; }

/* ---- faixa rolando ---- */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding: 13px 0; margin: 4px 0 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; gap: 38px; animation: mq 46s linear infinite; padding-right: 38px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-weight: 900; text-transform: uppercase; letter-spacing: .16em; font-size: .92rem; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); }
.marquee-track span:nth-child(3n) { color: var(--accent); -webkit-text-stroke: 0; }
.marquee-track i { font-style: normal; color: var(--pink); }

/* ---- ingresso real com moldura holográfica ---- */
.holo-frame { position: relative; padding: 2px; border-radius: 20px; margin: 18px 0; transform-style: preserve-3d;
  background: conic-gradient(from var(--ang), #ff3d81, #ffb703, #2ee59d, #5ab0ff, #c77dff, #ff3d81); animation: spin 6s linear infinite;
  box-shadow: 0 20px 60px rgba(255,61,129,.25); }
.holo-frame .ticket { margin: 0; position: relative; }
.holo-frame .ticket::before, .holo-frame .ticket::after { display: none; }
@media (min-width: 521px) {
  .holo-frame { -webkit-mask: radial-gradient(circle 11px at 62% 0, #0000 98%, #000), radial-gradient(circle 11px at 62% 100%, #0000 98%, #000);
    -webkit-mask-composite: source-in; mask: radial-gradient(circle 11px at 62% 0, #0000 98%, #000), radial-gradient(circle 11px at 62% 100%, #0000 98%, #000); mask-composite: intersect; box-shadow: none; }
}
.holo-frame .ticket .holo { border-radius: 18px; z-index: 1; opacity: .9;
  background: linear-gradient(112deg, transparent calc(var(--mxn,50) * 1% - 28%), rgba(255,61,129,.20) calc(var(--mxn,50) * 1% - 12%), rgba(255,183,3,.22) calc(var(--mxn,50) * 1%), rgba(90,176,255,.22) calc(var(--mxn,50) * 1% + 12%), transparent calc(var(--mxn,50) * 1% + 28%)); }
.holo-frame .ticket > * { position: relative; z-index: 2; }
.holo-frame .ticket > .holo { position: absolute; z-index: 1; }
.holo-frame .ticket .qr { background: #fff; border-radius: 10px; padding: 4px; }   /* QR sempre nítido para a câmera */
.holo-frame .ticket .stamp { position: absolute; }

/* ---- esqueleto de carregamento ---- */
.sk { border-radius: 16px; min-height: 120px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border: 1px solid var(--line); }
.sk.tall { min-height: 270px; }
.sk-line { height: 18px; border-radius: 8px; margin: 10px 0; }

html.fx-on .tier.sel { animation: ring 1.4s ease-out 1; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 10px var(--green); animation: pulseDot 1.6s infinite; }

/* ---- transição entre páginas (View Transitions) ---- */
@keyframes vtOut { to { opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(8px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(18px) scale(1.012); filter: blur(10px); } }
::view-transition-old(root) { animation: .26s ease both vtOut; }
::view-transition-new(root) { animation: .45s .06s cubic-bezier(.2,.8,.2,1) both vtIn; }
::view-transition-group(fxbg), ::view-transition-group(fxtop) { animation: none; }
::view-transition-old(fxbg), ::view-transition-new(fxbg), ::view-transition-old(fxtop), ::view-transition-new(fxtop) { animation: none; mix-blend-mode: normal; }

#fx-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; }

/* ---- modo leve (celular): nada de loops de animação, blur nem 3D ---- */
html.fx-lite * { animation: none !important; }
html.fx-lite .btn.cta::before, html.fx-lite .btn.cta::after { display: none; }
html.fx-lite .btn.cta { box-shadow: none; }
html.fx-lite .holo { display: none; }
html.fx-lite .holo-frame { animation: none; background: linear-gradient(135deg, #ff3d81, #ffb703 55%, #5ab0ff); box-shadow: none; -webkit-mask: none; mask: none; }
html.fx-lite .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(13,11,20,.97); }
html.fx-lite .hero-art, html.fx-lite .marquee { display: none; }
html.fx-lite .live-dot { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .ch { opacity: 1 !important; }
}
@media print { #fx-bg, #fx-glow, #fx-prog, #fx-confetti, .marquee { display: none !important; }
  .holo-frame { background: #000; animation: none; box-shadow: none; transform: none !important; } .holo { display: none; } }