/* =============================================================================
   VibeX 2.0 theme for the public pages (screen, participant, reveal, privacy).
   Loaded AFTER show.css. It only changes colours, type and surfaces: layout,
   behaviour and the JS hooks stay exactly as in show.css.
   Brand: ink navy #010B28 · champagne #E0C58E · bone #F5F1E8
          Inter (UI) + Times New Roman / Tinos (display serif, italic accents)
   ============================================================================= */
:root {
  --night: #010B28; --night-2: #02102E;
  --panel: rgba(255, 255, 255, .035); --panel-line: rgba(224, 197, 142, .18);
  --ink: #F5F1E8; --muted: rgba(245, 241, 232, .6);
  --gold: #E0C58E; --gold-hi: #F0E2C0; --gold-lo: #C9A968; --gold-deep: #7A6B4D;
  --blue: #2552C0;
  --serif: "Times New Roman", Tinos, Times, Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body {
  background:
    radial-gradient(1100px 720px at 6% -14%, rgba(37, 82, 192, .45) 0%, transparent 62%),
    radial-gradient(900px 620px at 108% 112%, rgba(224, 197, 142, .10) 0%, transparent 58%),
    linear-gradient(180deg, #02102E 0%, #010B28 55%, #000814 100%);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* Film grain, as on the website */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection { background: var(--gold); color: var(--night); }

.gold-text {
  background: linear-gradient(120deg, var(--gold-hi) 0%, var(--gold) 42%, var(--gold-lo) 74%, var(--gold-hi) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow { font-family: var(--sans); font-weight: 600; letter-spacing: .3em; font-size: .7em; color: var(--gold); }
.eyebrow::before {
  content: ""; display: inline-block; width: 2.2em; height: 1px; background: currentColor; opacity: .55;
  vertical-align: middle; margin: -.15em .9em 0 0;
}
.panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
  border: 1px solid var(--panel-line); border-radius: 24px; backdrop-filter: blur(8px);
}

/* ---- VibeX wordmark (templates/_vibex_brand.html) ---- */
.vx-brand { display: inline-flex; align-items: baseline; gap: .38em; line-height: 1; white-space: nowrap; color: var(--ink); }
.vx-brand b { font-family: var(--sans); font-weight: 800; letter-spacing: .09em; }
.vx-brand i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: .02em; }
.vx-x { color: var(--gold); font-family: var(--serif); font-style: italic; margin: 0 .55em; opacity: .9; }

/* Sponsor logos are usually JPGs on white: give them a clean plate so they read on navy */
.sponsor img, .p-sponsor, .rv-top .sponsor img {
  background: #fff; padding: .3em .7em; border-radius: 12px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
}
.sponsor-name { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink); }
.placeholder-logo { border-color: var(--panel-line); border-radius: 999px; }
.prize-placeholder {
  background: linear-gradient(135deg, #0a1d4d 0%, #122e7a 38%, #1a3e9e 62%, #02102E 100%);
  color: rgba(240, 226, 192, .45);
}

/* =============================== projector ================================== */
.screen-top .sponsor { gap: 0; font-size: 1.3em; }
.screen-top .sponsor img { height: 6.4vh; }
.screen-top .sponsor small { font-family: var(--sans); letter-spacing: .28em; margin-left: 1.2em; }
.screen-top .event { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.9em; letter-spacing: .01em; }
.prize { border-radius: 28px; border-color: var(--panel-line); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); }
.prize .caption { background: linear-gradient(rgba(1, 11, 40, 0), rgba(1, 11, 40, .55) 30%, rgba(1, 11, 40, .94) 70%); }
.prize .caption h1 { font-weight: 400; letter-spacing: -.015em; line-height: 1; font-size: 3.3em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
.prize .caption p { font-family: var(--sans); color: var(--gold); letter-spacing: .26em; text-transform: uppercase; font-size: .78em; font-weight: 600; margin-top: .9em; }
.qr-card .qr { border-radius: 18px; box-shadow: 0 0 0 4px rgba(224, 197, 142, .45), 0 24px 60px rgba(0, 0, 0, .55); }
.qr-card b { font-family: var(--serif); font-weight: 400; font-size: 1.45em; line-height: 1.15; }
.qr-card b .muted { font-family: var(--sans); font-size: .55em; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.qr-card .url { font-family: var(--sans); letter-spacing: .04em; }
.semaphore { background: #000814; border-color: rgba(255, 255, 255, .08); }
.lamp { background: #0b1430; }
.timer small { font-family: var(--sans); letter-spacing: .28em; font-weight: 600; color: var(--muted); }
.timer span { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }
.prizes-panel li { font-family: var(--sans); }
.prizes-panel .qty, .p-prizes .qty { font-weight: 400; }
.prizes-panel .pname { font-weight: 500; }
.counter .num { font-weight: 400; }
.roller i { width: .56em; }
.prizes-panel .eyebrow { letter-spacing: .18em; }
.prizes-panel .eyebrow::before { display: none; }
.counter .label { font-family: var(--serif); font-style: italic; font-size: 1.5em; }
.counter .label small { font-family: var(--sans); font-style: normal; letter-spacing: .26em; font-weight: 600; font-size: .5em; color: var(--gold); }
.counter .ticket-icon { filter: drop-shadow(0 0 16px rgba(224, 197, 142, .4)); }

/* =============================== participant ================================ */
.p-head { margin-bottom: 18px; }
.p-head .vx-brand { font-size: 1.12rem; }
.lang { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .18em; padding: .45rem .85rem; border-color: rgba(245, 241, 232, .28); }
.p-prize { border-radius: 22px; border-color: var(--panel-line); }
.p-prize .caption { background: linear-gradient(rgba(1, 11, 40, 0), rgba(1, 11, 40, .9) 55%); padding: 46px 18px 16px; }
.p-prize h1 { font-weight: 400; letter-spacing: -.01em; font-size: 1.95rem; line-height: 1.02; margin-top: 8px;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
.p-sponsor { position: absolute; top: 12px; left: 12px; max-height: 38px; max-width: 46%; object-fit: contain; z-index: 1; padding: 6px 10px; }
.p-sponsor-name { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 12px; border-radius: 999px;
  background: rgba(1, 11, 40, .7); border: 1px solid var(--panel-line); font-size: .8rem; letter-spacing: .08em; }
.participant h2 { font-weight: 400; font-size: 2.05rem; line-height: 1.05; letter-spacing: -.01em; margin-bottom: .6rem; }
.participant p { color: rgba(245, 241, 232, .82); }
.participant form label:not(.check) > span {
  font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(245, 241, 232, .7); margin-bottom: 7px;
}
.participant input:not([type=checkbox]) {
  border-radius: 14px; border-color: rgba(245, 241, 232, .16); background: rgba(255, 255, 255, .045);
  padding: 15px 14px; font-family: var(--sans); transition: border-color .2s, box-shadow .2s, background .2s;
}
.participant input:not([type=checkbox]):focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 4px rgba(224, 197, 142, .16); }
.participant form label.check { font-size: .88rem; line-height: 1.45; color: rgba(245, 241, 232, .85); }
.privacy a, .policy a { color: var(--gold); }
.participant .p-closes { font-family: var(--sans); color: var(--gold); letter-spacing: .04em; }
.btn-gold {
  font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  min-height: 58px; border-radius: 999px; color: var(--night);
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-lo) 100%);
  box-shadow: 0 18px 40px -14px rgba(224, 197, 142, .6); transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-gold:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 22px 46px -14px rgba(224, 197, 142, .7); }
.btn-gold:active { transform: translateY(0); }
.p-count { font-weight: 400; font-size: 8rem; }
.dots i { background: var(--gold); }
.p-prizes { border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)); }
.p-prizes .pname { font-weight: 500; }
.note { border-radius: 16px; background: rgba(224, 197, 142, .08); border-color: rgba(224, 197, 142, .3); }

/* golden ticket: champagne, ink type */
.ticket {
  color: var(--night); border-radius: 18px;
  background: linear-gradient(125deg, #F5F1E8 0%, #F0E2C0 26%, #E0C58E 54%, #C9A968 78%, #F0E2C0 100%);
  box-shadow: 0 24px 60px -18px rgba(224, 197, 142, .55);
}
.ticket::before, .ticket::after { background: #010B28; }
.ticket-top { border-bottom-color: rgba(1, 11, 40, .22); }
.ticket-top .eyebrow { color: var(--gold-deep); }
.ticket-top h3 { font-weight: 400; font-size: 1.7rem; letter-spacing: -.01em; }
.ticket-body small { font-family: var(--sans); letter-spacing: .22em; font-weight: 600; opacity: .6; }
.ticket-body .holder { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.35rem; }
.ticket-body .code { color: var(--night); }

/* index + policy */
.index-wrap h1, .policy h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.index-wrap .vx-brand { font-size: 1.3rem; margin-bottom: 28px; }
.policy h2 { font-weight: 400; font-style: italic; }

/* ================================= reveal =================================== */
.rv-top .sponsor { display: flex; align-items: center; font-size: 1.25em; }
.rv-top .sponsor img { height: 5.6vh; }
.rv-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.8em; }
.rv-big, .rv-name, .rv-headline, .rv-roll, .rv-empty { font-weight: 400; letter-spacing: -.015em; }
.rv-sub { font-weight: 400; }
.rv-sub .en, .rv-punch .en, .rv-empty .en { font-family: var(--sans); letter-spacing: .06em; }
.rv-punch { font-weight: 400; font-style: italic; color: var(--gold-hi); }
.rv-card { border-radius: 30px; background: linear-gradient(150deg, rgba(224, 197, 142, .15), rgba(37, 82, 192, .08) 60%, rgba(255, 255, 255, .02)); }
.rv-phone { font-family: var(--sans); letter-spacing: .14em; }
.rv-time { font-family: var(--sans); font-weight: 700; color: var(--gold); }
.rv-won { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold-hi); }
.chip { background: rgba(255, 255, 255, .045); border-color: var(--panel-line); font-family: var(--sans); }
.slot { border-radius: 16px; background: rgba(255, 255, 255, .04); font-family: var(--sans); }
.slot b { color: var(--gold); font-family: var(--serif); font-weight: 400; font-size: 1.15em; }
.slot.current { border-color: var(--gold); background: rgba(224, 197, 142, .12); }
@keyframes slotIn { from { background: rgba(224, 197, 142, .42); } }
.rv-list li { font-family: var(--sans); border-bottom-color: rgba(245, 241, 232, .08); }
.rv-list li.win { color: var(--gold-hi); }
.rv-dots i { background: rgba(245, 241, 232, .18); }
.rv-dots i.past { background: var(--gold-deep); }
.rv-dots i.on { background: var(--gold); box-shadow: 0 0 12px rgba(224, 197, 142, .8); }
.rv-foot button { border-color: rgba(245, 241, 232, .25); font-family: var(--sans); }
.rv-winner .rv-name { filter: drop-shadow(0 0 44px rgba(224, 197, 142, .35)); }
body.is-winner {
  background:
    radial-gradient(900px 600px at 50% 45%, rgba(224, 197, 142, .2) 0%, transparent 65%),
    radial-gradient(1300px 800px at 50% 125%, rgba(37, 82, 192, .4) 0%, transparent 60%),
    #010B28;
}
.roller i { background: linear-gradient(120deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-lo) 100%); -webkit-background-clip: text; background-clip: text; }
.rv-draw-btn {
  font-family: var(--sans); font-size: 1em; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  padding: 1.1em 2.6em; color: var(--night); background: linear-gradient(180deg, var(--gold) 0%, var(--gold-lo) 100%);
  box-shadow: 0 18px 44px -14px rgba(224, 197, 142, .6);
}

/* =============================================================================
   VIBEX Academy logo + projector layout + the envelope
   ============================================================================= */
.vx-logo { display: block; height: 1em; width: auto; }
.sponsor img.vx-logo { background: none; padding: 0; border-radius: 0; box-shadow: none; }
.screen-top .sponsor { align-items: center; }
.screen-top .vx-logo { height: 3.2vh; }
.rv-top .vx-logo { height: 2.9vh; }
.p-head .vx-logo { height: 17px; }
.index-wrap .vx-logo { height: 22px; margin: 0 auto 28px; }
.vx-x { font-size: 1.1em; }

/* left: product + prizes · right: one entry card (QR on top, envelope below) + counter */
.vx-grid { grid-template-columns: 1.12fr 1fr; }
.vx-left, .vx-right { display: grid; gap: 2vh; min-height: 0; }
.vx-left { grid-template-rows: minmax(0, 1fr) auto; }
.vx-right { grid-template-rows: minmax(0, 1fr) auto; }
.vx-entry {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center;
  padding: 2.6vh 2vw 2.6vh; min-height: 0; overflow: hidden; text-align: center;
}
.vx-entry-qr { display: flex; flex-direction: column; align-items: center; gap: 1.5vh; }
.vx-entry .qr {
  background: #fff; border-radius: 18px; padding: 1vh; width: 23vh; aspect-ratio: 1;
  box-shadow: 0 0 0 4px rgba(224, 197, 142, .45), 0 24px 60px rgba(0, 0, 0, .55); transition: box-shadow .6s;
}
.vx-entry .qr img { display: block; width: 100%; height: 100%; }
.vx-entry-cta b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.85em; line-height: 1.05; letter-spacing: -.01em; }
.vx-entry-cta span { display: block; margin-top: .55em; font-family: var(--sans); font-size: .7em; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.vx-entry-sobre { /* envelope + timer side by side; top padding leaves room for the open flap */
  position: relative; width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 2.4vw; margin-top: 2.4vh; padding-top: 10.5vh; border-top: 1px solid rgba(224, 197, 142, .14); min-height: 0;
}
.vx-entry .url { position: absolute; left: 0; right: 0; bottom: 1.1vh; font-family: var(--sans); font-size: .6em; letter-spacing: .04em; color: var(--muted); }
.vx-entry .timer { text-align: left; min-width: 9.5em; }
.vx-entry .timer small { white-space: nowrap; }
.vx-entry .timer span { font-size: 2.4em; }

/* ---- the envelope: inside · ticket · pocket · flap (2 faces) · seal ---- */
.vx-sobre { position: relative; height: 15vh; flex: none; aspect-ratio: 1513 / 538; max-width: 92%; perspective: 1200px; isolation: isolate;
  transition: filter .8s var(--ease-out); }
.vx-sobre > span, .vx-sobre > img { position: absolute; display: block; }
.vx-sobre-inside {
  inset: 0; z-index: 0; border-radius: .6em;
  background: linear-gradient(180deg, #000612 0%, #031338 60%, #0a1d4d 100%);
  box-shadow: inset 0 1.4em 2.2em -1em rgba(0, 0, 0, .95), 0 1.6em 3.2em -1.2em rgba(0, 0, 0, .9), 0 0 0 1px rgba(224, 197, 142, .22);
}
.vx-sobre-pocket, .vx-flap-front { background: url("sobre.webp") center / 100% 100% no-repeat; }
.vx-sobre-pocket {
  inset: 0; z-index: 2; border-radius: .6em; overflow: hidden;
  clip-path: polygon(0 8.9%, 50% 59.5%, 100% 8.9%, 100% 100%, 0 100%);
}
.vx-sobre-pocket::after { /* light sweep across the paper */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 35%, rgba(255, 244, 214, .32) 50%, transparent 65%);
}
.vx-sobre-flap {
  inset: 0; z-index: 3; transform-origin: 50% 0; transform-style: preserve-3d;
  transition: transform 1.3s var(--ease-spring), z-index 0s linear .42s;
}
.vx-flap-front, .vx-flap-back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 8.9%, 50% 59.5%, 0 8.9%); border-radius: .6em .6em 0 0;
}
.vx-flap-back { /* the inside of the flap, seen once it is open */
  transform: rotateY(180deg);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polyline points='0,8.9 50,59.5 100,8.9' fill='none' stroke='%23E0C58E' stroke-opacity='.8' stroke-width='1.2' vector-effect='non-scaling-stroke'/></svg>") center / 100% 100% no-repeat,
    linear-gradient(180deg, #0b1f52 0%, #04112f 70%);
}
.vx-sobre-seal { /* glow on the wax seal */
  left: 50%; top: 49.8%; width: 19%; aspect-ratio: 1; z-index: 4; border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(.8); mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 236, 190, .8) 0%, rgba(224, 197, 142, .32) 38%, transparent 70%);
}
.vx-sobre-ticket {
  left: 50%; top: 10%; width: 44%; z-index: 1; opacity: 0;
  transform: translate(-50%, 6%) rotate(-4deg) scale(.94);
  filter: drop-shadow(0 .6em 1.1em rgba(0, 0, 0, .6));
  transition: transform 1.1s var(--ease-spring) .45s, opacity .35s .45s;
}
.vx-sobre-rays {
  left: 50%; top: 0; width: 76%; aspect-ratio: 1; z-index: 0; border-radius: 50%; opacity: 0;
  transform: translate(-50%, -52%) scale(.5); transition: opacity .9s .5s, transform 1.2s var(--ease-out) .5s;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(224, 197, 142, .38) 10%, transparent 14% 33%,
    rgba(224, 197, 142, .3) 36%, transparent 40% 58%, rgba(240, 226, 192, .38) 61%, transparent 65% 83%,
    rgba(224, 197, 142, .3) 86%, transparent 90%);
  -webkit-mask: radial-gradient(circle, #000 22%, transparent 70%); mask: radial-gradient(circle, #000 22%, transparent 70%);
}
/* red · sealed (not open yet, or closed) */
.vx-sobre[data-state=red] { filter: saturate(.55) brightness(.7); }
/* amber · about to open / about to close: the seal breathes, the envelope trembles */
.vx-sobre[data-state=amber] .vx-sobre-seal { opacity: 1; animation: vxSeal 1s var(--ease-in-out) infinite; }
.vx-sobre[data-state=amber] { animation: vxTremble 2.4s var(--ease-in-out) infinite; }
/* green · open: the seal bursts, the flap swings open and the golden ticket comes out */
.vx-sobre[data-state=green] .vx-sobre-flap { transform: rotateX(180deg); z-index: 0; }
.vx-sobre[data-state=green] .vx-sobre-seal { animation: vxSealBurst 1s var(--ease-out) both; }
.vx-sobre[data-state=green] .vx-sobre-ticket { opacity: 1; transform: translate(-50%, -55%) rotate(-4deg); animation: vxFloat 4.5s var(--ease-in-out) 1.7s infinite; }
.vx-sobre[data-state=green] .vx-sobre-rays { opacity: 1; transform: translate(-50%, -52%) scale(1); animation: vxRays 18s linear infinite; }
.vx-sobre[data-state=green] .vx-sobre-pocket::after { animation: vxSweep 4.4s var(--ease-in-out) 1.4s infinite; }
@keyframes vxSeal { 50% { transform: translate(-50%, -50%) scale(1.15); opacity: .35; } }
@keyframes vxSealBurst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.8); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } }
@keyframes vxTremble { 0%, 100% { transform: none; } 20% { transform: rotate(-.6deg) translateY(-1px); } 40% { transform: rotate(.6deg); } 60% { transform: rotate(-.3deg); } }
@keyframes vxFloat { 50% { transform: translate(-50%, -63%) rotate(-2.5deg); } }
@keyframes vxSweep { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes vxRays { to { transform: translate(-50%, -52%) rotate(360deg); } }
@media (max-aspect-ratio: 4/3) {
  .vx-grid { grid-template-columns: 1fr; }
  .vx-left .prize { aspect-ratio: 16 / 10; }
  .vx-entry-sobre { flex-direction: column; }
  .vx-sobre { height: auto; width: 80%; }
  .vx-entry .qr { width: min(60vw, 320px); }
}

/* =============================================================================
   Motion: modern easing, blur-in entrances, staggered choreography
   ============================================================================= */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
}
@keyframes vxRise { from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(10px); } }
@keyframes vxFade { from { opacity: 0; filter: blur(6px); } }

/* slowly drifting aurora behind everything */
body::after {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none; will-change: transform;
  background:
    radial-gradient(40% 35% at 20% 25%, rgba(37, 82, 192, .32), transparent 70%),
    radial-gradient(35% 30% at 80% 70%, rgba(224, 197, 142, .10), transparent 70%),
    radial-gradient(30% 30% at 60% 15%, rgba(58, 111, 216, .18), transparent 70%);
  animation: vxAurora 28s var(--ease-in-out) infinite alternate;
}
@keyframes vxAurora { to { transform: translate3d(4%, -3%, 0) rotate(6deg) scale(1.08); } }

/* projector: panels come in one after another */
.screen-top { animation: vxFade 1s var(--ease-out) both; }
.screen .prize { animation: vxRise 1.2s var(--ease-out) .1s both; }
.screen .vx-left > :nth-child(2) { animation: vxRise 1.1s var(--ease-out) .3s both; }
.screen .vx-right > :nth-child(1) { animation: vxRise 1.1s var(--ease-out) .2s both; }
.screen .vx-right > :nth-child(2) { animation: vxRise 1.1s var(--ease-out) .4s both; }
.prize img { animation: vxKenBurns 26s var(--ease-in-out) infinite alternate; transform-origin: 60% 40%; }
@keyframes vxKenBurns { to { transform: scale(1.06) translate3d(-1%, -1%, 0); } }
.prizes-panel li { animation: vxRise .9s var(--ease-out) both; }
.prizes-panel li:nth-child(1) { animation-delay: .6s; } .prizes-panel li:nth-child(2) { animation-delay: .7s; }
.prizes-panel li:nth-child(3) { animation-delay: .8s; } .prizes-panel li:nth-child(4) { animation-delay: .9s; }
.prizes-panel li:nth-child(n+5) { animation-delay: 1s; }

/* open: animated gold border around the QR so the room's eyes go there */
@property --vx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.screen:has(#sem[data-state=green]) .vx-entry {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(4, 20, 54, .96), rgba(2, 13, 38, .96)) padding-box,
    conic-gradient(from var(--vx-angle), rgba(224, 197, 142, .08), rgba(224, 197, 142, .95) 18%, rgba(58, 111, 216, .7) 34%, rgba(224, 197, 142, .08) 50%, rgba(224, 197, 142, .08)) border-box;
  animation: vxSpin 5s linear infinite;
}
.screen:has(#sem[data-state=green]) .vx-entry .qr { animation: vxQrGlow 2.6s var(--ease-in-out) infinite; }
@keyframes vxSpin { to { --vx-angle: 360deg; } }
@keyframes vxQrGlow { 50% { box-shadow: 0 0 0 4px rgba(224, 197, 142, .7), 0 0 40px rgba(224, 197, 142, .35), 0 24px 60px rgba(0, 0, 0, .55); } }
.counter .num.bump { animation: vxBump .6s var(--ease-spring); }
@keyframes vxBump { 35% { transform: scale(1.14); filter: drop-shadow(0 0 18px rgba(224, 197, 142, .7)); } }
@keyframes roll { from { transform: translateY(-55%); opacity: 0; filter: blur(4px); } }
.timer span { transition: color .4s; }

/* participant: soft cascade on load and every time the view changes */
.p-head { animation: vxFade .8s var(--ease-out) both; }
.p-prize { animation: vxRise 1s var(--ease-out) .08s both; }
.p-prize img { animation: vxKenBurns 22s var(--ease-in-out) infinite alternate; }
.p-prizes { animation: vxRise 1s var(--ease-out) .16s both; }
.participant section[id^="v-"]:not([hidden]) { animation: vxRise .8s var(--ease-out) .12s both; }
#v-form form > * { animation: vxRise .7s var(--ease-out) both; }
#v-form form > :nth-child(1) { animation-delay: .18s; } #v-form form > :nth-child(2) { animation-delay: .24s; }
#v-form form > :nth-child(3) { animation-delay: .30s; } #v-form form > :nth-child(4) { animation-delay: .36s; }
#v-form form > :nth-child(n+5) { animation-delay: .42s; }
.participant form label:not(.check) > span { transition: color .25s; }
.participant form label:focus-within > span { color: var(--gold); }
.btn-gold { position: relative; overflow: hidden; isolation: isolate; transition: transform .25s var(--ease-out), box-shadow .3s, filter .3s; }
.btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  animation: vxSweep 3.6s var(--ease-in-out) 1.4s infinite;
}
.btn-gold:active { transform: scale(.975); }
.p-count { animation: vxPulse 1s var(--ease-in-out) infinite; }
@keyframes vxPulse { 50% { transform: scale(.94); opacity: .75; filter: blur(1px); } }
/* golden ticket: 3D flip-in, then a slow float with holographic sheen */
@keyframes ticketIn {
  from { opacity: 0; transform: perspective(900px) rotateX(60deg) translateY(40px) scale(.88); filter: blur(8px); }
  60% { opacity: 1; filter: blur(0); }
}
.ticket { animation: ticketIn 1.1s var(--ease-spring) both, vxTicketFloat 5s var(--ease-in-out) 1.2s infinite; transform-origin: 50% 100%; }
@keyframes vxTicketFloat { 50% { transform: translateY(-4px) rotate(-.4deg); } }
.ticket .shine { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .6) 48%, rgba(158, 197, 255, .35) 52%, transparent 62%); }
.lang, .rv-foot button { transition: background .25s, border-color .25s, transform .25s var(--ease-out); }
.lang:hover, .rv-foot button:hover { background: rgba(245, 241, 232, .08); border-color: var(--gold); transform: translateY(-1px); }

/* reveal: blur-to-focus steps, springy cards, cinematic winner */
@keyframes stepIn { from { opacity: 0; transform: translateY(30px) scale(.98); filter: blur(14px); } }
.rv-step { animation: stepIn .9s var(--ease-out); }
@keyframes cardIn { from { opacity: 0; transform: perspective(1200px) rotateX(38deg) translateY(50px) scale(.9); filter: blur(12px); } }
.rv-card { animation: cardIn 1.1s var(--ease-spring); }
@keyframes winnerIn { from { opacity: 0; transform: scale(.55); filter: blur(28px); letter-spacing: .35em; } 55% { filter: blur(0); } }
.rv-winner .rv-name { animation: winnerIn 1.6s var(--ease-out); }
@keyframes slotIn { from { background: rgba(224, 197, 142, .45); transform: scale(1.03); } }
.slot.current { animation: slotIn .9s var(--ease-out); }
.chip { animation: vxRise .7s var(--ease-out) both; }
.chip:nth-child(3n+2) { animation-delay: .06s; } .chip:nth-child(3n) { animation-delay: .12s; }
.rv-punch { animation: stepIn 1s var(--ease-out) 1.2s both; }
.rv-dots i { transition: background .4s, box-shadow .4s, transform .4s var(--ease-spring); }
.rv-dots i.on { transform: scale(1.35); }

/* No language picker: the page follows the phone's language (Spanish by default). The button stays in the
   DOM, hidden, because participant.js and the privacy page bind to #lang. */
#lang { display: none !important; }

/* Partner logo (transparent PNG/WebP): sits on the navy as is, no white plate */
.sponsor img.vx-partner { background: none; padding: 0; border-radius: 0; box-shadow: none; width: auto; object-fit: contain; }
.screen-top .sponsor img.vx-partner { height: 5vh; max-width: 13vw; }
.rv-top .sponsor img.vx-partner { height: 4.6vh; max-width: 12vw; }
.p-sponsor-mark { padding: 8px 14px; line-height: 0; background: rgba(1, 11, 40, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.p-prize .p-sponsor-mark img { position: static; inset: auto; display: block; height: 20px; width: auto; max-width: 46vw;
  object-fit: contain; animation: none; transform: none; }