/* ============================================================
   Blocco 46d/46e — la pagina d'ingresso: luci che si muovono su fondo nero,
   a sinistra l'ologramma IBC (si tocca: esplode e si ricompone) e chi siamo,
   a destra il riquadro di vetro per entrare.
   ============================================================ */
@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("../fonts/jost-400.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("../fonts/jost-500.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-display: swap; src: url("../fonts/jost-600.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 700; font-display: swap; src: url("../fonts/jost-700.woff2") format("woff2"); }

:root {
  --acc: #ff184e; --acc2: #ff5a8a; --vio: #8b5cff; --ink: #07070a;
  --out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.4, .42, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
.ac-body {
  min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--ink); color: #fff; font-family: "Jost", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* --- le luci --- */
.ac-sky { position: fixed; inset: -40px; z-index: 0; pointer-events: none; transition: transform 1.2s var(--out); }
.ac-sky i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9; will-change: transform; }
.ac-sky .b1 { width: 55vmax; height: 55vmax; left: -12vmax; top: -18vmax; background: radial-gradient(circle, rgba(255, 24, 78, .75), rgba(255, 24, 78, 0) 65%); animation: ac-m1 16s ease-in-out infinite alternate; }
.ac-sky .b2 { width: 48vmax; height: 48vmax; right: -14vmax; top: 4vmax; background: radial-gradient(circle, rgba(139, 92, 255, .6), rgba(139, 92, 255, 0) 65%); animation: ac-m2 20s ease-in-out infinite alternate; }
.ac-sky .b3 { width: 42vmax; height: 42vmax; left: 22vw; bottom: -22vmax; background: radial-gradient(circle, rgba(255, 90, 138, .55), rgba(255, 90, 138, 0) 65%); animation: ac-m3 24s ease-in-out infinite alternate; }
.ac-sky .b4 { width: 26vmax; height: 26vmax; left: 46vw; top: 18vh; background: radial-gradient(circle, rgba(255, 196, 214, .28), rgba(255, 196, 214, 0) 65%); animation: ac-m2 13s ease-in-out infinite alternate-reverse; }
@keyframes ac-m1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14vw, 10vh) scale(1.15); } 100% { transform: translate(6vw, 22vh) scale(.95); } }
@keyframes ac-m2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12vw, 14vh) scale(.9); } 100% { transform: translate(-4vw, -8vh) scale(1.12); } }
@keyframes ac-m3 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10vw, -12vh) scale(1.1); } 100% { transform: translate(-10vw, -4vh) scale(1); } }
.ac-ring {
  position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 24, 78, .10) 30%, transparent 42%, rgba(139, 92, 255, .10) 62%, transparent 75%);
  border-radius: 50%; animation: ac-spin 60s linear infinite;
}
@keyframes ac-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ac-grain {
  position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ac-sky .b5 { width: 30vmax; height: 30vmax; left: 8vw; top: 30vh; background: radial-gradient(circle, rgba(126, 232, 255, .16), rgba(126, 232, 255, 0) 65%); animation: ac-m3 18s ease-in-out infinite alternate-reverse; }
/* il pavimento a griglia del proiettore, che scorre verso di te */
.ac-floor {
  position: absolute; left: -20%; right: -20%; bottom: -6%; height: 52vh;
  background-image:
    linear-gradient(rgba(255, 90, 138, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 128, 255, .18) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(to top, #000 10%, transparent 85%); mask: linear-gradient(to top, #000 10%, transparent 85%);
  animation: ac-floor 6s linear infinite; opacity: .55;
}
@keyframes ac-floor { to { background-position: 0 64px, 0 0; } }
@media (prefers-reduced-motion: reduce) { .ac-sky i, .ac-ring, .ac-floor { animation: none; } }

/* --- la pagina --- */
.ac-wrap {
  position: relative; z-index: 1; flex: 1; width: min(1200px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px); column-gap: 56px;
  grid-template-areas: "top card" "holo card"; grid-template-rows: auto 1fr;
  align-items: center; padding: 34px 32px 20px;
}
.ac-top { grid-area: top; }
.ac-holo { grid-area: holo; align-self: stretch; display: flex; align-items: center; }
.ac-intro { grid-area: intro; animation: ac-in .9s .2s var(--out) both; }
.ac-card { grid-area: card; }
.ac-logo { display: block; width: 170px; height: auto; margin: 0; animation: ac-in .8s var(--out) both; }

/* --- l'ologramma --- */
.ac-stage {
  position: relative; width: 100%; height: clamp(300px, 52vh, 520px); cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  animation: ac-holo-in 1.4s var(--out) both;
}
.ac-stage canvas { position: absolute; inset: 0; display: block; animation: ac-flicker 7s steps(1) infinite; }
@keyframes ac-holo-in { from { opacity: 0; transform: scale(.9); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ac-flicker { 0%, 100% { opacity: 1; } 41% { opacity: .82; } 42% { opacity: 1; } 77% { opacity: .9; } 78% { opacity: 1; } }
/* righe da proiezione che scendono */
.ac-scan {
  position: absolute; inset: 4% 14% 18%; pointer-events: none; border-radius: 50%;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px);
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent);
  animation: ac-scan 3.5s linear infinite; mix-blend-mode: screen;
}
@keyframes ac-scan { to { background-position: 0 40px; } }
/* il fascio di luce dal proiettore */
.ac-beam {
  position: absolute; left: 50%; bottom: 7%; width: 64%; height: 78%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(to top, rgba(255, 90, 138, .26), rgba(167, 128, 255, .08) 55%, transparent);
  clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0); filter: blur(6px); opacity: .55;
  animation: ac-beam 4s ease-in-out infinite alternate;
}
@keyframes ac-beam { to { opacity: .8; } }
.ac-base { position: absolute; left: 50%; bottom: 4%; width: 34%; aspect-ratio: 5 / 1; transform: translateX(-50%); pointer-events: none; }
.ac-base i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 140, 175, .55); box-shadow: 0 0 18px rgba(255, 24, 78, .45), inset 0 0 14px rgba(167, 128, 255, .4); }
.ac-base i:nth-child(2) { inset: 18% 14%; border-color: rgba(126, 232, 255, .45); animation: ac-pulse 2.6s ease-in-out infinite; }
.ac-base i:nth-child(3) { inset: -30% -18%; border-color: rgba(167, 128, 255, .25); animation: ac-pulse 2.6s 1.3s ease-in-out infinite; }
@keyframes ac-pulse { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.ac-stage.is-boom .ac-beam { animation: ac-flash .7s var(--out); }
@keyframes ac-flash { 0% { opacity: 1; filter: blur(2px) brightness(2); } 100% { opacity: .55; } }
.ac-hint {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); padding: 6px 14px; border-radius: 99px; pointer-events: none;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: ac-hint 2.4s ease-in-out infinite; transition: opacity .6s, transform .6s var(--out);
}
.ac-hint.is-via { opacity: 0; transform: translate(-50%, 8px); animation: none; }
@keyframes ac-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 138, 0); } 50% { box-shadow: 0 0 22px 2px rgba(255, 90, 138, .35); } }
@media (prefers-reduced-motion: reduce) { .ac-stage canvas, .ac-scan, .ac-beam, .ac-base i, .ac-hint { animation: none; } }

.ac-eyebrow, .ac-card-eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--acc2); }
.ac-h1 { margin: 0 0 18px; font-size: clamp(32px, 3.9vw, 52px); line-height: 1.02; letter-spacing: -.03em; font-weight: 600; }
.ac-h1 span {
  background: linear-gradient(90deg, #fff, #ffc2d3 40%, var(--acc2) 70%, #c9b3ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: ac-shine 8s ease-in-out infinite alternate;
}
@keyframes ac-shine { to { background-position: 100% 0; } }
.ac-lede { margin: 0 0 30px; max-width: 520px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.ac-nums { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.ac-nums li {
  min-width: 108px; padding: 14px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ac-nums b { display: block; font-size: 26px; line-height: 1.05; letter-spacing: -.02em; }
.ac-nums small { font-size: 12.5px; color: rgba(255, 255, 255, .6); }

/* --- il riquadro di vetro --- */
.ac-card {
  position: relative; padding: 38px 36px 30px; border-radius: 32px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 40px 80px -30px rgba(0, 0, 0, .7);
  backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
  animation: ac-in 1s .12s var(--out) both;
}
@property --ac-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.ac-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ac-a), rgba(255, 90, 138, .95), rgba(126, 232, 255, .55) 18%, transparent 32%, transparent 55%, rgba(167, 128, 255, .9) 72%, rgba(255, 90, 138, .95));
  animation: ac-giro 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes ac-giro { to { --ac-a: 360deg; } }
.ac-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .09) 45%, rgba(126, 232, 255, .06) 50%, transparent 62%);
  background-size: 250% 100%; animation: ac-sheen 7s ease-in-out infinite;
}
@keyframes ac-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.ac-note { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; background: rgba(126, 232, 255, .1); border: 1px solid rgba(126, 232, 255, .32); color: #e9fbff; }
.ac-note b { display: block; color: #fff; }
@keyframes ac-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.ac-title { margin: 0 0 6px; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
.ac-sub { margin: 0 0 22px; font-size: 14.5px; color: rgba(255, 255, 255, .68); }
.ac-error, .ac-card .flash { margin: 0 0 16px; padding: 11px 14px; border-radius: 14px; font-size: 14px; background: rgba(255, 24, 78, .18); border: 1px solid rgba(255, 90, 138, .45); color: #ffd9e3; }
.ac-card .flash-info, .ac-card .flash-ok { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }

.ac-form { display: flex; flex-direction: column; gap: 12px; }
.ac-field { position: relative; display: block; }
.ac-field input {
  width: 100%; height: 58px; padding: 22px 16px 6px; border-radius: 16px; font: inherit; font-size: 16px; color: #fff;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.ac-field input:focus { border-color: rgba(255, 90, 138, .9); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(255, 24, 78, .18); }
.ac-field span { position: absolute; left: 17px; top: 18px; font-size: 15.5px; color: rgba(255, 255, 255, .6); pointer-events: none; transition: top .2s var(--out), font-size .2s var(--out), color .2s; }
.ac-field input:focus + span, .ac-field input:not(:placeholder-shown) + span { top: 8px; font-size: 11.5px; letter-spacing: .04em; color: var(--acc2); }
.ac-field input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #2a1520 inset; caret-color: #fff; }
.ac-field-pw input { padding-right: 52px; }
.ac-eye { position: absolute; right: 8px; top: 9px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: rgba(255, 255, 255, .6); cursor: pointer; }
.ac-eye:hover, .ac-eye.is-on { color: #fff; background: rgba(255, 255, 255, .08); }
.ac-btn {
  position: relative; overflow: hidden; margin-top: 6px; height: 56px; border: 0; border-radius: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 16.5px; font-weight: 600; color: #fff;
  background: linear-gradient(120deg, var(--acc), #ff4f7e 50%, var(--acc));
  background-size: 200% 100%; box-shadow: 0 18px 34px -14px rgba(255, 24, 78, .8);
  transition: transform .35s var(--spring), box-shadow .3s, background-position .6s;
}
.ac-btn:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 24px 40px -14px rgba(255, 24, 78, .9); }
.ac-btn:active { transform: scale(.985); }
.ac-btn i { font-style: normal; transition: transform .35s var(--spring); }
.ac-btn:hover i { transform: translateX(4px); }
.ac-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; margin-top: 20px; font-size: 13.5px; }
.ac-links a { color: rgba(255, 255, 255, .72); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .2); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.ac-links a:hover { color: #fff; border-color: var(--acc2); }

.ac-foot {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  width: min(1180px, 100%); margin: 0 auto; padding: 16px 32px calc(20px + env(safe-area-inset-bottom));
  font-size: 12.5px; color: rgba(255, 255, 255, .45);
}
.ac-foot a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.ac-foot a:hover { color: #fff; }

/* --- tablet e telefono --- */
@media (max-width: 920px) {
  .ac-wrap {
    grid-template-columns: 1fr; grid-template-areas: "top" "holo" "card"; grid-template-rows: none;
    row-gap: 18px; padding: 26px 20px 16px; max-width: 540px;
  }
  .ac-top { display: flex; justify-content: center; }
  .ac-logo { width: 140px; }
  .ac-stage { height: clamp(250px, 40vh, 360px); }
  .ac-holo { margin-bottom: 18px; }
  .ac-intro { text-align: center; padding-top: 10px; }
  .ac-h1 { font-size: clamp(28px, 8vw, 40px); }
  .ac-nums { justify-content: center; }
  .ac-nums li { min-width: 0; flex: 1; padding: 12px 14px; }
  .ac-nums b { font-size: 22px; }
  .ac-floor { height: 40vh; }
}
@media (max-width: 520px) {
  .ac-wrap { padding: 20px 16px 12px; row-gap: 12px; }
  .ac-stage { height: clamp(230px, 34vh, 300px); }
  .ac-card { padding: 26px 20px 22px; border-radius: 26px; }
  .ac-title { font-size: 24px; }
  .ac-links { flex-direction: column; align-items: flex-start; }
  .ac-foot { padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); flex-direction: column; }
  .ac-sky i { filter: blur(50px); }
}

/* ============================================================
   Blocco 53 — niente più scritta e numeri: a sinistra solo l'ologramma,
   grande e al centro, con un alone di luce dietro.
   ============================================================ */
.ac-top { justify-self: center; }
.ac-holo { position: relative; justify-content: center; }
.ac-holo::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(92%, 640px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 90, 138, .22), rgba(139, 92, 255, .12) 55%, transparent 75%);
  filter: blur(30px); animation: ac-alone 6s ease-in-out infinite alternate;
}
@keyframes ac-alone { from { opacity: .6; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.ac-stage { max-width: 680px; margin: 0 auto; height: clamp(360px, 70vh, 680px); }
@media (max-width: 920px) {
  .ac-stage { height: clamp(280px, 46vh, 420px); }
}
@media (max-width: 520px) {
  .ac-stage { height: clamp(260px, 40vh, 340px); }
}
@media (prefers-reduced-motion: reduce) { .ac-holo::before { animation: none; } }