/* Verebélyi Adrienn – parking page
   Mobile-first (360 → 1280+). Paletta: notte / cobalto / cielo / nebbia / carta. */

:root {
  --deep: #061537;
  --night: #0B1F4B;
  --cobalt: #1F4FD8;
  --sky: #6FA8FF;
  --mist: #DCEBFF;
  --paper: #F7FAFF;
  --ink: #12285C;
  --muted: #3D5385;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  background: #fff; color: var(--night); padding: 12px 16px; border-radius: 10px;
  transform: translateY(-200%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }
.wrap { width: min(1080px, 100%); margin-inline: auto; padding-inline: var(--pad); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--safe-t) + 14px) calc(var(--pad) + var(--safe-r)) 120px calc(var(--pad) + var(--safe-l));
  color: #fff;
  background:
    radial-gradient(120% 70% at 50% 100%, #1F4FD8 0%, rgba(31, 79, 216, 0) 62%),
    linear-gradient(180deg, var(--deep) 0%, var(--night) 55%, #123A9E 100%);
  overflow: hidden;
  isolation: isolate;
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.glow {
  position: absolute; left: 50%; top: 22%; width: min(90vw, 760px); aspect-ratio: 1;
  translate: calc(-50% + var(--px, 0) * -10px) calc(-50% + var(--py, 0) * -10px);
  background: radial-gradient(closest-side, rgba(111, 168, 255, .35), rgba(111, 168, 255, 0));
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe { 50% { scale: 1.08; opacity: .8; } }
.stars i {
  position: absolute; border-radius: 50%; background: #fff;
  width: var(--s); height: var(--s); left: var(--x); top: var(--y); opacity: .2;
  animation: twinkle var(--d) ease-in-out var(--o) infinite;
}
@keyframes twinkle { 50% { opacity: .75; } }

.topbar {
  width: min(1080px, 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px;
}
.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .875rem; letter-spacing: .02em; color: var(--mist);
}
.dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--sky);
  box-shadow: 0 0 0 0 rgba(111, 168, 255, .6);
  animation: ping 3.2s ease-out infinite;
}
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 12px rgba(111, 168, 255, 0); } }
.tools { display: flex; gap: 8px; }
.tool {
  min-width: 48px; min-height: 48px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(220, 235, 255, .3);
  border-radius: 999px; cursor: pointer; font-size: .875rem; font-weight: 600; color: #fff;
  transition: background .2s, border-color .2s;
}
.tool:hover { background: rgba(255, 255, 255, .16); }
.tool[aria-pressed="true"] { background: #fff; color: var(--night); border-color: #fff; }
.tool span { display: none; }

/* Scena SVG */
.scene {
  position: relative; width: min(760px, 100%); margin-top: 4px;
  container-type: size; aspect-ratio: 800 / 520;
}
.scene svg { display: block; width: 100%; height: 100%; overflow: visible;
  translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 6px); }
.moon { animation: breathe 9s ease-in-out infinite; transform-origin: 400px 230px; }

.flow { stroke-dasharray: .07 .93; stroke-dashoffset: 0; opacity: 0;
  animation: flow 7s linear 6s infinite, show 1s 6s forwards; }
@keyframes flow { to { stroke-dashoffset: -1; } }
@keyframes show { to { opacity: .9; } }

.flip { transform-box: view-box; transform-origin: 400px 400px; animation: flip 11s var(--ease) infinite; }
.f1 { animation-delay: 2s; } .f2 { animation-delay: 2.5s; } .f3 { animation-delay: 3s; }
@keyframes flip {
  0%   { transform: scaleX(1);  opacity: 1; }
  12%  { transform: scaleX(-1); opacity: 1; }
  68%  { transform: scaleX(-1); opacity: 1; }
  74%  { transform: scaleX(-1); opacity: 0; }
  75%  { transform: scaleX(1);  opacity: 0; }
  82%  { transform: scaleX(1);  opacity: 1; }
  100% { transform: scaleX(1);  opacity: 1; }
}

/* Parole che salgono dal libro */
.words { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.word {
  position: absolute; left: var(--l); top: 66cqh;
  font: italic 400 clamp(.95rem, 3.6vw, 1.5rem)/1 var(--serif);
  font-variation-settings: 'SOFT' 100, 'opsz' 72;
  color: #fff; text-shadow: 0 0 14px rgba(111, 168, 255, .9);
  opacity: 0; white-space: nowrap;
  animation: rise 6.5s ease-out forwards;
}
@keyframes rise {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-3deg); }
  18%  { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), -58cqh) rotate(3deg); }
}

/* Banane-segnalibro */
.banana {
  position: absolute; left: var(--x); top: var(--y);
  width: clamp(52px, 11vw, 84px); min-height: 48px; padding: 4px;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  translate: calc(var(--px, 0) * var(--k, 18) * 1px) calc(var(--py, 0) * var(--k, 18) * 1px);
  rotate: var(--r);
  animation: bob var(--bd, 7s) ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(6, 21, 55, .45));
}
.banana svg { display: block; width: 100%; height: auto; overflow: visible; }
.b1 { --x: 2%;  --y: 6%;  --r: -16deg; --bd: 7s; --k: 20; }
.b2 { --x: 83%; --y: 34%; --r: 24deg;  --bd: 8.5s; --k: -16; }
.b3 { --x: 3%;  --y: 58%; --r: 8deg;   --bd: 6.2s; --k: 12; width: clamp(44px, 9vw, 66px); }
@keyframes bob { 50% { transform: translateY(-12px) rotate(4deg); } }
.banana.spin svg { animation: spin .9s var(--ease); }
@keyframes spin { to { transform: rotate(360deg) scale(1.15); } }
.spark {
  position: fixed; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px var(--sky); pointer-events: none; z-index: 20;
  animation: spark .7s ease-out forwards;
}
@keyframes spark {
  to { transform: translate(var(--tx), var(--ty)) scale(.2); opacity: 0; }
}

/* Titolo */
.title-block { text-align: center; margin-top: clamp(4px, 2svh, 20px); }
.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  color: var(--sky); margin-bottom: 6px;
}
h1 {
  font-family: var(--serif); font-weight: 340;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
  font-size: clamp(3rem, 15vw, 7.5rem); line-height: .95; letter-spacing: -.02em;
}
h1 .l1, h1 .l2 { display: inline-block; }
h1 .l2 { font-style: italic; font-weight: 300; color: var(--mist); }
.ch { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(5deg);
  animation: ch-in .9s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms + 300ms); }
@keyframes ch-in { to { opacity: 1; transform: none; } }
.tagline {
  margin-top: 16px; min-height: 3.2em; max-width: 30ch; margin-inline: auto;
  font: italic 400 clamp(1.125rem, 4.5vw, 1.5rem)/1.4 var(--serif);
  font-variation-settings: 'SOFT' 100, 'opsz' 36; color: #E8F1FF;
}
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -.15em;
  background: var(--sky); animation: caret 1.1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.cue {
  position: absolute; left: 50%; bottom: 96px; translate: -50% 0;
  width: 48px; height: 48px; display: grid; place-items: center; color: #fff;
  border-radius: 50%; border: 1px solid rgba(220, 235, 255, .35);
  animation: nudge 2.6s ease-in-out infinite;
}
@keyframes nudge { 50% { transform: translateY(6px); } }

/* Onde */
.waves { position: absolute; left: 0; bottom: -1px; width: 200%; height: 90px; pointer-events: none; }
.w1 { fill: var(--paper); }
.w2 { fill: rgba(247, 250, 255, .38); }
.waves { animation: drift 22s linear infinite; }
@keyframes drift { to { transform: translateX(-50%); } }

/* ============ CONTENUTO ============ */
.soon { background: var(--paper); }
.soon > .wrap { padding-block: 24px 56px; display: grid; gap: 40px; }
.lead-block { text-align: center; max-width: 52ch; margin-inline: auto; }
h2 {
  font-family: var(--serif); font-weight: 400; font-variation-settings: 'SOFT' 100, 'opsz' 96;
  font-size: clamp(2rem, 7vw, 3rem); line-height: 1.1; color: var(--night); margin-bottom: 12px;
}
.lead { color: var(--muted); font-size: 1.0625rem; }

/* Libro 3D */
.book3d { perspective: 1100px; display: grid; place-items: center; padding: 16px 0 8px; }
.book {
  --w: min(58vw, 230px); --t: 34px;
  width: var(--w); aspect-ratio: 3 / 4.2; position: relative; transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-26deg);
  animation: sway 9s ease-in-out infinite;
  filter: drop-shadow(26px 30px 24px rgba(11, 31, 75, .28));
}
@keyframes sway { 50% { transform: rotateX(4deg) rotateY(-12deg); } }
.face { position: absolute; }
.cover {
  inset: 0; transform: translateZ(calc(var(--t) / 2));
  border-radius: 3px 10px 10px 3px;
  background: linear-gradient(150deg, #2D66F2 0%, var(--cobalt) 35%, var(--night) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 18px; text-align: center; color: #fff; overflow: hidden;
}
.cover::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
  background-size: 250% 100%; animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -60% 0; } }
.cover::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .18); }
.cover-mark { width: 62%; overflow: visible; }
.cover-mark path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: trace 7s ease-in-out infinite; }
@keyframes trace { 0% { stroke-dashoffset: 1; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.cover-title { font: 600 .6875rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mist); }
.cover-author { font: italic 400 1.0625rem/1.2 var(--serif); font-variation-settings: 'SOFT' 100; }
.back { inset: 0; transform: translateZ(calc(var(--t) / -2)); background: var(--night); border-radius: 3px 10px 10px 3px; }
.spine { top: 0; left: 0; width: var(--t); height: 100%;
  transform: translateX(-50%) rotateY(-90deg); background: linear-gradient(90deg, #0A1A44, var(--cobalt)); }
.pages { top: 3px; left: 100%; width: var(--t); height: calc(100% - 6px);
  transform: translateX(-50%) rotateY(90deg);
  background: repeating-linear-gradient(90deg, #fff 0 2px, var(--mist) 2px 3px); }

/* Schede */
.cards { display: grid; gap: 14px; }
.card {
  display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 4px 16px;
  padding: 18px; background: #fff; border: 1px solid var(--mist); border-radius: 18px;
  box-shadow: 0 10px 30px -18px rgba(31, 79, 216, .4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(31, 79, 216, .5); }
.ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
  background: var(--mist); color: var(--cobalt); grid-row: span 2; }
.card h3 { font: 500 1.25rem/1.2 var(--serif); font-variation-settings: 'SOFT' 100; color: var(--night); }
.card p { color: var(--muted); font-size: .9375rem; line-height: 1.45; margin-top: 2px; }
.chip {
  grid-column: 2; justify-self: start; margin-top: 8px;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; color: #1F3FA8;
  background: linear-gradient(100deg, var(--mist) 30%, #fff 50%, var(--mist) 70%) 0 0 / 250% 100%;
  animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }

/* Banda */
.band {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  padding: 72px 0 80px; background: linear-gradient(160deg, var(--cobalt), var(--night));
}
.band-mark { position: absolute; left: 50%; top: 50%; width: min(980px, 140%); translate: -50% -50%; opacity: .5; }
.band-flow { stroke-dasharray: .12 .88; animation: flow 9s linear infinite; }
.band-in { position: relative; }
.quote, .quote-sub { text-shadow: 0 2px 20px rgba(6, 21, 55, .55); }
.quote { font: 340 clamp(1.75rem, 6.4vw, 3rem)/1.15 var(--serif); font-variation-settings: 'SOFT' 100, 'opsz' 120; max-width: 18ch; margin-inline: auto; }
.quote-sub { margin-top: 14px; color: var(--mist); font-size: 1rem; }

.foot { background: var(--night); color: var(--mist); font-size: .875rem; }
.foot .wrap { padding-block: 24px calc(24px + var(--safe-b)); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
.foot a { color: #fff; display: inline-flex; align-items: center; min-height: 48px; }
.foot a[hidden] { display: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + var(--safe-b)); z-index: 30;
  translate: -50% 24px; opacity: 0; pointer-events: none; max-width: min(90vw, 360px);
  background: #fff; color: var(--night); padding: 12px 20px; border-radius: 999px;
  font: italic 400 1rem/1.3 var(--serif); box-shadow: 0 12px 30px rgba(6, 21, 55, .35);
  transition: opacity .3s, translate .3s var(--ease); text-align: center;
}
.toast.on { opacity: 1; translate: -50% 0; }

/* Rivelazione allo scroll (solo dove supportata; altrove è tutto visibile) */
@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}

/* ============ DESKTOP ============ */
@media (min-width: 640px) {
  .tool span { display: inline; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 28px 22px; }
  .ico { grid-row: auto; }
  .chip { grid-column: auto; justify-self: center; }
}
@media (min-width: 900px) {
  .hero { padding-bottom: 130px; }
  .soon > .wrap { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px 64px; padding-block: 40px 88px; }
  .lead-block { text-align: left; margin: 0; grid-column: 1; }
  .book3d { grid-column: 2; grid-row: 1 / span 1; }
  .cards { grid-column: 1 / -1; }
  .book { --w: 260px; }
}
@media (max-height: 560px) and (orientation: landscape) { .hero { min-height: 0; } .cue { display: none; } }

/* ============ MODO CALMO / MOVIMENTO RIDOTTO ============ */
html[data-calm="1"] *, html[data-calm="1"] *::before, html[data-calm="1"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html[data-calm="1"] .ch { opacity: 1; transform: none; }
html[data-calm="1"] .flow { opacity: .9; }
html[data-calm="1"] .flip { opacity: 0; }
html[data-calm="1"] .book { transform: rotateX(6deg) rotateY(-20deg); }
html[data-calm="1"] .reveal { opacity: 1; transform: none; }
html[data-calm="1"] .waves { transform: none; }
html[data-calm="1"] .words, html[data-calm="1"] .caret { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ch { opacity: 1; transform: none; }
  .flow { opacity: .9; }
  .flip { opacity: 0; }
  .reveal { opacity: 1; transform: none; }
  .words, .caret { display: none; }
}
@media (forced-colors: active) { .tool, .card { border: 1px solid CanvasText; } }