/* ============================================================
   GIMA · LANDING EVENTI
   Stessa direzione della landing showroom (nero pieno, Bebas
   oversize, arancio come unico accento) ridotta a una pagina
   sola: si arriva qui da un QR stampato su un bicchiere, quindi
   il progetto è mobile-first e il form deve essere raggiungibile
   in un pollice.
   ============================================================ */

@font-face { font-family:'Bebas Neue'; src:url('../fonts/BebasNeue-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter_18pt-Regular.woff2')  format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter_18pt-Medium.woff2')   format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter_18pt-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter_18pt-Bold.woff2')     format('woff2'); font-weight:700; font-display:swap; }

:root{
  --orange:#F07D07;
  --orange-hover:#D86C00;
  --black:#0D0D0D;
  --gray-900:#1A1A1A;
  --gray-850:#161616;
  --gray-800:#222;
  --gray-700:#2B2B2B;
  --gray-600:#4D4D4D;
  --gray-400:#999;
  --white:#fff;

  /* Errore e placeholder: nascono qui come token invece che sparsi inline. */
  --danger:#ff6b5e;
  --danger-text:#ff8e84;
  --placeholder:#7d7d7d;

  /* Opacità del testo secondario. Tarate per restare sopra 4,5:1 anche sul
     fondo più chiaro del progetto (--gray-900), perché questa pagina si legge
     di sera all'aperto e su schermi con la luminosità abbassata. */
  --text-dim:rgba(255,255,255,.72);
  --text-dimmer:rgba(255,255,255,.62);
  --text-faint:rgba(255,255,255,.58);

  --font-display:'Bebas Neue',Impact,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  --container:1180px;
  --gutter:20px;
  --radius:16px;
  --ease:cubic-bezier(.2,0,0,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--black);
  color:var(--white);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--orange);color:var(--white)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ---------- tipografia ---------- */
.bebas{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;line-height:.95}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);
}
.lead{font-size:clamp(15px,4vw,18px);line-height:1.5;color:var(--text-dim);max-width:52ch}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(13,13,13,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.header .inner{
  max-width:var(--container);margin:0 auto;padding:11px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.header .logo img{height:26px;width:auto}
.header-event{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-dimmer);text-align:right;line-height:1.35;
}
/* Stessa altezza del marchio Gima: senza le date accanto, due loghi di
   corpo diverso sbilanciavano la testata. */
.event-logo{height:26px;width:auto;margin-left:auto;display:block;opacity:.95}

/* ---------- hero + form ---------- */
/* Il ritaglio sta qui e non sulla hero: con overflow:hidden sulla sezione,
   l'alone veniva troncato di netto sul suo bordo inferiore e si vedeva la
   riga di taglio sopra la card. Così invece scende dietro al form. */
.top-area{position:relative;overflow:hidden}
.top-area > section{position:relative;z-index:2}


/* Hero deliberatamente corto: si arriva qui per lasciare un contatto in
   quaranta secondi, quindi il form deve entrare nella prima schermata anche
   su un telefono piccolo. Il racconto lungo sta sotto, per chi resta. */
.hero{position:relative;padding:22px 0 4px}
/* Alone e griglia restano solo qui. Ripetuti anche dietro il form
   diventavano il classico fondale da template; in un punto solo fanno
   il loro lavoro e basta. */
.hero-glow{
  position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:min(820px,160vw);height:660px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(240,125,7,.28),transparent 72%);
  filter:blur(30px);
}
.hero-grid{
  position:absolute;top:0;left:0;right:0;height:560px;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 22%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 22%,#000 30%,transparent 100%);
}
.hero .container{position:relative;z-index:2}
/* Copy e disegno affiancati a ogni larghezza: posizionare il bicchiere in
   assoluto lo avrebbe fatto finire sopra il titolo sui telefoni stretti. */
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(92px,27vw,126px);
  gap:12px;align-items:center;
}

/* ---------- bicchiere animato ---------- */
.hero-art{color:var(--orange);width:100%}
.hero-art svg{width:100%;height:auto;overflow:visible}
.hero-art svg{animation:galleggia 6s ease-in-out infinite alternate}
.hero-art .corpo,.hero-art .dettaglio,.hero-art .manici{stroke-opacity:.8}
.hero-art .fascia{fill:var(--orange);fill-opacity:.22;stroke-opacity:1}
.hero-art .bolla{fill:var(--orange);stroke:none;opacity:0;animation:sale 4.2s ease-in-out infinite}
.hero-art .b1{animation-delay:0s}
.hero-art .b2{animation-delay:1.1s}
.hero-art .b3{animation-delay:2s}
@keyframes galleggia{from{transform:translateY(0)}to{transform:translateY(-7px)}}
@keyframes sale{
  0%   {opacity:0;   transform:translateY(6px)  scale(.7)}
  22%  {opacity:.85; transform:translateY(0)    scale(1)}
  70%  {opacity:.35; transform:translateY(-16px) scale(.9)}
  100% {opacity:0;   transform:translateY(-26px) scale(.6)}
}

.hero h1{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,10vw,68px);
  line-height:.88;letter-spacing:.012em;
  margin:10px 0 0;
}
.hero-lead{font-size:15px;margin-top:2px}
.hero h1 em{font-style:normal;color:var(--orange)}
/* Le righe entrano una dopo l'altra: dà profondità senza spostare il layout
   (il clip è su un wrapper a altezza fissa, quindi niente salti).
   Il padding serve agli accenti maiuscoli: "PUÒ" ha il segno sopra l'altezza
   delle maiuscole e senza spazio il clip se lo mangia. Il margine negativo
   restituisce lo spazio aggiunto, così l'interlinea resta quella voluta. */
.hero h1 .line{display:block;overflow:hidden;white-space:nowrap;padding-top:.14em;margin-top:-.14em}
.hero h1 .line > span{
  display:block;
  transform:translateY(102%);
  animation:lineUp .85s var(--ease) forwards;
}
.hero h1 .line:nth-child(2) > span{animation-delay:.09s}
.hero h1 .line:nth-child(3) > span{animation-delay:.18s}
@keyframes lineUp{to{transform:translateY(0)}}

.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px}
.micro{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:18px;
  font-size:12px;color:var(--text-dimmer);
}
.micro .sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.28)}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 24px;border-radius:100px;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease);
  min-height:50px;
}
.btn-primary{background:var(--orange);color:var(--white)}
.btn-primary:hover{background:var(--orange-hover);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
.btn-ghost:hover{border-color:rgba(255,255,255,.42);transform:translateY(-2px)}
.btn .arrow{transition:transform .28s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- vetrina prodotti (3D) ---------- */
.showcase-section{padding:44px 0 30px}
.showcase{
  position:relative;margin-top:22px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  perspective:1200px;
}
.sc-tile{
  position:relative;border-radius:14px;overflow:hidden;
  background:var(--gray-900);border:1px solid rgba(255,255,255,.09);
  /* Stesso rapporto dei file (720x900): con 3/4 le foto venivano ritagliate. */
  aspect-ratio:4/5;
  transform-style:preserve-3d;
  transition:transform .55s var(--ease),border-color .55s var(--ease);
  will-change:transform;
}
.sc-tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.sc-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,13,13,.9) 4%,transparent 52%);
}
.sc-tile .cap{
  position:absolute;left:11px;right:11px;bottom:10px;z-index:2;
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
/* Le tessere si aprono a ventaglio verso il centro: dà profondità senza
   sfalsare le righe, che su una griglia 2x2 lascerebbe buchi. */
.sc-tile:nth-child(odd){transform:rotateY(5deg) translateZ(-10px)}
.sc-tile:nth-child(even){transform:rotateY(-5deg) translateZ(-10px)}
.sc-tile:hover{border-color:rgba(240,125,7,.5)}
.sc-tile:hover img{transform:scale(1.05)}

/* ---------- form ---------- */
.form-section{position:relative;padding:16px 0 44px;scroll-margin-top:64px}
.form-card{
  position:relative;
  background:linear-gradient(180deg,var(--gray-900),var(--gray-850));
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;padding:22px 20px 24px;
}
.form-card h2{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(30px,8vw,46px);line-height:.95;letter-spacing:.02em;margin:10px 0 8px;
}
.form-card h2 em{font-style:normal;color:var(--orange)}

.fields{display:grid;gap:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.field label{
  display:block;margin-bottom:6px;
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-dimmer);
}
.field .req{color:var(--orange)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 14px;
  background:var(--black);
  border:1px solid var(--gray-700);border-radius:11px;
  font-size:16px; /* sotto i 16px iOS zooma sul focus e sballa il layout del kiosk */
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
  min-height:50px;
}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,125,7,.16);
}
.field.has-error input,.field.has-error select{border-color:var(--danger);box-shadow:0 0 0 3px rgba(255,107,94,.14)}
.field-error{margin-top:5px;font-size:12px;color:var(--danger-text);display:none}
.field.has-error .field-error{display:block}

/* consenso */
.consent{
  margin-top:3px;padding:13px 14px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
}
.consent-row{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.consent-check{position:relative;flex:none;width:23px;height:23px;margin-top:1px}
.consent-check input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.consent-box{
  position:absolute;inset:0;border-radius:7px;
  border:1.5px solid var(--gray-600);background:var(--black);
  transition:all .18s var(--ease);pointer-events:none;
}
.consent-check input:checked + .consent-box{background:var(--orange);border-color:var(--orange)}
.consent-check input:checked + .consent-box::after{
  content:"";position:absolute;left:7.5px;top:3.5px;width:6px;height:11px;
  border:solid var(--white);border-width:0 2.2px 2.2px 0;transform:rotate(45deg);
}
.consent-check input:focus-visible + .consent-box{box-shadow:0 0 0 3px rgba(240,125,7,.3)}
.consent-text{font-size:12.5px;line-height:1.5;color:var(--text-dimmer)}
.consent-text strong{color:rgba(255,255,255,.92)}
.consent.has-error{border-color:var(--danger);background:rgba(255,107,94,.07)}

.submit{
  width:100%;margin-top:19px;padding:17px 24px;border-radius:100px;
  background:var(--orange);color:var(--white);
  font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:background .25s var(--ease),transform .25s var(--ease);
  min-height:56px;
}
.submit:hover:not(:disabled){background:var(--orange-hover);transform:translateY(-2px)}
.submit:disabled{opacity:.62;cursor:not-allowed;transform:none}
.submit .spin{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:var(--white);
  animation:spin .7s linear infinite;display:none;
}
.is-sending .submit .spin{display:block}
.is-sending .submit .arrow{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.form-status{margin-top:12px;font-size:13px;min-height:19px;text-align:center;color:var(--text-dim)}
.form-status.err{color:var(--danger-text)}
.fineprint{margin-top:13px;font-size:11.5px;line-height:1.55;color:var(--text-faint);text-align:center}

/* stato offline / coda */
.queue-note{
  margin-top:12px;padding:11px 13px;border-radius:11px;
  background:rgba(240,125,7,.11);border:1px solid rgba(240,125,7,.3);
  font-size:12.5px;color:rgba(255,255,255,.82);display:none;align-items:center;gap:9px;
}
.queue-note.show{display:flex}
.queue-note svg{width:16px;height:16px;flex:none;color:var(--orange)}

/* ---------- conferma ---------- */
.success{display:none;text-align:center;padding:14px 4px 6px}
.success.show{display:block;animation:fadeUp .5s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.success-ico{
  width:74px;height:74px;margin:0 auto 18px;border-radius:50%;
  background:rgba(240,125,7,.15);border:1.5px solid rgba(240,125,7,.45);
  display:grid;place-items:center;color:var(--orange);
}
.success-ico svg{width:34px;height:34px;stroke-width:2}
.success h2{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(32px,9vw,52px);line-height:.95;margin-bottom:10px;
}
.success h2 em{font-style:normal;color:var(--orange)}
.success p{color:var(--text-dim);font-size:15px;max-width:38ch;margin:0 auto}
.success-actions{margin-top:24px;display:flex;flex-direction:column;gap:10px;align-items:center}

/* ---------- perché lasciare i contatti ---------- */
.why{padding:86px 0 56px}
.why-grid{display:grid;gap:11px;margin-top:22px}
.why-card{
  padding:19px;border-radius:15px;
  background:var(--gray-900);border:1px solid rgba(255,255,255,.08);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.why-card:hover{border-color:rgba(240,125,7,.35);transform:translateY(-3px)}
.why-card b{display:block;font-size:15.5px;font-weight:700;margin-bottom:5px}
.why-card p{font-size:13.5px;line-height:1.55;color:var(--text-dimmer)}

.section-head h2{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(30px,8vw,54px);line-height:.95;letter-spacing:.02em;margin-top:12px;
}
.section-head h2 em{font-style:normal;color:var(--orange)}

/* ---------- marquee ---------- */
/* Due nastri in direzioni opposte a velocità diverse: un nastro solo, tutto
   nella stessa direzione, si legge come una riga di testo che scorre. */
.marquee{
  padding:30px 0 34px;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:var(--gray-850);
}
.marquee-label{
  display:block;text-align:center;margin-bottom:20px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);
}
.marquee-viewport{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-viewport + .marquee-viewport{margin-top:10px}
.marquee-track{display:flex;align-items:center;gap:24px;width:max-content;animation:slide 46s linear infinite}
.marquee-track.reverse{animation:slideRev 58s linear infinite}
.m-item{display:inline-flex;align-items:center;gap:24px;white-space:nowrap}
.m-name{
  font-family:var(--font-display);font-size:26px;letter-spacing:.045em;
  text-transform:uppercase;color:rgba(255,255,255,.68);
  transition:color .3s var(--ease);
}
.marquee-track.reverse .m-name{font-size:22px;color:rgba(255,255,255,.5)}
.m-dot{width:5px;height:5px;border-radius:50%;background:var(--orange);opacity:.75;flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slideRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- footer ---------- */
.footer{padding:30px 0 34px;border-top:1px solid rgba(255,255,255,.08);text-align:center}
.footer img{height:26px;width:auto;margin:0 auto 14px;opacity:.85}
.footer-claim{font-size:13.5px;color:var(--text-dim);max-width:36ch;margin:0 auto 16px;line-height:1.5}
.footer-meta{font-size:11.5px;color:var(--text-faint);line-height:1.75;margin-top:16px}
.footer-social{display:flex;gap:11px;justify-content:center;margin-top:16px}
.footer-social a{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;color:rgba(255,255,255,.72);
  transition:color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
}
.footer-social a:hover{color:var(--orange);border-color:rgba(240,125,7,.6);transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px}
.footer-meta a{color:rgba(255,255,255,.72);border-bottom:1px solid rgba(240,125,7,.5)}
.footer-contacts{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:12px;font-size:13px}
.footer-contacts a{display:inline-flex;align-items:center;gap:7px;border:0;color:rgba(255,255,255,.75)}
.footer-contacts svg{width:15px;height:15px;color:var(--orange)}

/* ---------- reveal allo scroll ----------
   Le regole sono agganciate a .js, che viene messo su <html> da uno script
   inline nel <head>. Senza quella classe il contenuto resta visibile: se il
   JavaScript non parte (rete del festival, browser vecchio del cliente) una
   pagina che deve raccogliere contatti non può permettersi di nascondere
   mezza sezione per sempre. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ============================================================
   MODALITÀ STAND (tablet della hostess, ?stand=1)
   Il contesto è opposto a quello del QR: la persona è davanti
   allo stand e ha già in mano l'omaggio, non va convinta. Resta
   solo il form, ingrandito per essere compilato in piedi.
   ============================================================ */
body.is-stand .hero-lead,
body.is-stand .why,
body.is-stand .marquee,
body.is-stand .showcase-section,
body.is-stand .footer-long{display:none}
body.is-stand .hero{padding:16px 0 4px}
body.is-stand .hero h1{font-size:clamp(28px,5.5vw,44px)}
body.is-stand .form-section{padding-top:16px}
body.is-stand .field input,
body.is-stand .field select{min-height:56px;font-size:17px}
body.is-stand .submit{min-height:64px;font-size:15px}
body.is-stand .counter{
  font-size:11px;color:var(--text-dimmer);letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- desktop ---------- */
@media(min-width:768px){
  :root{--gutter:32px}
  .hero{padding:40px 0 28px}
  .hero-lead{font-size:17px}
  /* Hero, striscia omaggio e form nella stessa colonna: senza la vetrina
     accanto al titolo, il testo largo quanto la pagina lascerebbe mezzo
     schermo vuoto sopra una card centrata. */
  /* Titolo, sottotitolo e form nella stessa colonna: il sottotitolo stava
     in un container suo e restava incollato al bordo sinistro. */
  .hero-inner,.hero-lead{max-width:660px;margin-left:auto;margin-right:auto}
  .hero-inner{grid-template-columns:minmax(0,1fr) 190px;gap:26px}
  .showcase{grid-template-columns:repeat(4,1fr);gap:14px}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .showcase-section{padding:56px 0 40px}
  .why{padding:110px 0 72px}
  .form-card{padding:38px 34px 32px;max-width:660px;margin:0 auto}
  .success-actions{flex-direction:row;justify-content:center}
}
@media(min-width:1024px){
  .hero h1{font-size:clamp(64px,6.4vw,96px)}
}

/* ---------- accessibilità movimento ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .hero h1 .line > span{transform:none}
  .marquee-track{animation:none}
  .js .reveal{opacity:1;transform:none}
  .hero-art .bolla{opacity:.8}
  .marquee-track{animation:none}
}