/* ============================================================
   Islanda 2026 — Intro regalo (quiz, pacco, rivelazione)
   Stili dell'apertura a sorpresa, ripresi dalla prima versione
   e allineati ai caratteri del nuovo sito.
   ============================================================ */
#quiz-overlay, #gift-overlay, #reveal-overlay {
  --ink-950: #0b1012;
  --ink-900: #11181b;
  --ink-800: #172024;
  --ink-700: #1d292e;
  --ice: #9fd3e0;
  --ice-strong: #c8e8f0;
  --aurora-green: #6fcf9f;
  --aurora-teal: #7fd3c4;
  --aurora-violet: #b3a3e6;
  --gold: #d9b56a;
  --gold-light: #ecd196;
  --danger: #e8704f;
  --text-primary: #f1f4f3;
  --text-secondary: rgba(241, 244, 243, 0.7);
  --text-muted: rgba(241, 244, 243, 0.46);
  --text-faint: rgba(241, 244, 243, 0.26);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --bg-card-flat: rgba(23, 32, 36, 0.7);
  --bg-card-hover: rgba(29, 41, 46, 0.85);
  --border-soft: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(159, 211, 224, 0.26);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --glow-ice: 0 0 24px rgba(159, 211, 224, 0.18);
  --glow-green: 0 0 24px rgba(111, 207, 159, 0.2);
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-sans: var(--font-ui);
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px;
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --fs-2xs: 0.6875rem; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem;
  --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem;
  --fs-3xl: 2.75rem; --fs-4xl: 3.5rem; --fs-hero: clamp(3.75rem, 10vw, 9rem);
  color: var(--text-primary);
  font-family: var(--font-body);
}
/* ============================================================
   QUIZ OVERLAY
   ============================================================ */
#quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 55% at 50% 25%, rgba(167, 139, 250, 0.1), transparent 60%),
    radial-gradient(ellipse 60% 45% at 25% 75%, rgba(74, 222, 155, 0.05), transparent 50%),
    radial-gradient(ellipse at center, var(--ink-700) 0%, var(--ink-950) 75%);
  transition: opacity 0.7s ease, visibility 0.7s ease;
  overflow: hidden;
}
#quiz-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.quiz-float-sparkle {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: quizSparkleFloat 4s ease-in-out forwards;
}
@keyframes quizSparkleFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  15% { opacity: 0.8; transform: translateY(-15vh) scale(1); }
  50% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-105vh) scale(0.3) rotate(180deg); }
}

.quiz-content {
  max-width: 560px;
  width: 100%;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  position: relative;
  z-index: 2;
}

.quiz-icon {
  font-size: 3.25rem;
  margin-bottom: var(--space-lg);
  animation: quizIconBounce 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3));
}
@keyframes quizIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.quiz-pretitle {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: var(--space-md);
}

.quiz-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 3.5vw, var(--fs-2xl));
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  line-height: 1.28;
}

.quiz-warning {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--danger);
  margin-bottom: var(--space-2xl);
  letter-spacing: 0.02em;
}

.quiz-start-btn,
.quiz-retry-btn {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 16px 48px;
  background: linear-gradient(135deg, rgba(143, 214, 255, 0.12), rgba(74, 222, 155, 0.1));
  border: 1px solid var(--border-accent);
  border-radius: 100px;
  color: var(--text-primary);
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all var(--transition-base);
  box-shadow: var(--glow-ice);
}
.quiz-start-btn:hover,
.quiz-retry-btn:hover {
  background: linear-gradient(135deg, rgba(143, 214, 255, 0.2), rgba(74, 222, 155, 0.16));
  border-color: rgba(143, 214, 255, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(143, 214, 255, 0.28);
}

.quiz-question { animation: fade-up 0.5s ease forwards; }

.quiz-progress {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.quiz-question-text {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 3vw, var(--fs-2xl));
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
  line-height: 1.28;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-option {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 16px 22px;
  background: var(--bg-card-flat);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
}
.quiz-option:hover:not(:disabled) {
  border-color: var(--border-accent);
  color: var(--text-primary);
  background: var(--bg-card-hover);
  transform: translateX(4px);
}
.quiz-option.correct {
  border-color: var(--aurora-green);
  background: rgba(74, 222, 155, 0.1);
  color: var(--aurora-green);
  box-shadow: var(--glow-green);
}
.quiz-option.wrong {
  border-color: var(--danger);
  background: rgba(240, 113, 113, 0.08);
  color: var(--danger);
  animation: shake 0.4s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.quiz-strikes {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--danger);
  min-height: 20px;
}

.quiz-fail { animation: fade-up 0.5s ease forwards; }
.quiz-fail-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}
.quiz-fail-text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
}

/* Quiz success celebration */
.quiz-success-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 14, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: successFadeIn 0.3s ease-out;
  overflow: hidden;
}
.quiz-success-overlay.fade-out { animation: successFadeOut 0.4s ease-in forwards; }
.quiz-success-content {
  text-align: center;
  animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
}
.quiz-success-emoji {
  font-size: 5rem;
  margin-bottom: var(--space-md);
  animation: successEmojiBounce 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.2s both;
}
.quiz-success-text {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  font-style: italic;
  color: var(--aurora-green);
  text-shadow: 0 0 36px rgba(74, 222, 155, 0.45);
  animation: successTextIn 0.5s ease-out 0.4s both;
}
.quiz-sparkle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkleExplode 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes successFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes successFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes successPop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes successEmojiBounce {
  0% { transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes successTextIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes sparkleExplode {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

/* ============================================================
   GIFT OVERLAY
   ============================================================ */
#gift-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(217, 181, 106, 0.06), transparent 60%),
    radial-gradient(ellipse at center, var(--ink-700) 0%, var(--ink-950) 75%);
  cursor: pointer;
}

.gift-content { position: relative; z-index: 1; text-align: center; }

.gift-pretitle {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.gift-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: var(--space-3xl);
}

.gift-box-wrapper {
  width: 170px;
  height: 170px;
  margin: 0 auto var(--space-xl);
  cursor: pointer;
  transition: transform var(--transition-base);
  filter: drop-shadow(0 20px 48px rgba(158, 27, 50, 0.3));
}
.gift-box-wrapper:hover { transform: scale(1.06) rotate(-1deg); }
.gift-box-wrapper:active { transform: scale(0.96); }

.gift-box { width: 100%; height: 100%; position: relative; }

.gift-box-body {
  width: 100%;
  height: 75%;
  position: absolute;
  bottom: 0;
  background: linear-gradient(150deg, #a4203a 0%, #7c1229 55%, #5d0c1e 100%);
  border-radius: var(--radius-md);
}
.gift-box-body::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 100%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light) 50%, var(--gold));
}
.gift-box-body::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 26px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light) 50%, var(--gold));
}

.gift-box-lid {
  width: 110%;
  height: 32%;
  position: absolute;
  top: 0;
  left: -5%;
  background: linear-gradient(150deg, #bd2646, #8f1830);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transform-origin: left bottom;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.gift-box-lid::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 100%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light) 50%, var(--gold));
}

.gift-bow {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.gift-bow::before, .gift-bow::after {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
}
.gift-bow::before { left: -32px; transform: rotate(-45deg); }
.gift-bow::after { right: -32px; transform: rotate(45deg); }
.gift-bow-center {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--gold-light);
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
.gift-box-wrapper.opening .gift-box-lid { transform: rotate(-110deg); }

.gift-hint {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: hintPulse 2.4s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}

/* ============================================================
   REVEAL OVERLAY
   ============================================================ */
#reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #030409;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  overflow: hidden;
}
#reveal-overlay.active { opacity: 1; visibility: visible; pointer-events: all; }
#reveal-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.reveal-aurora {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(74, 222, 155, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 25% 15%, rgba(167, 139, 250, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 45% at 75% 10%, rgba(143, 214, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 30% at 40% 5%, rgba(94, 234, 212, 0.13), transparent 50%);
  animation: aurora-dance 6s ease-in-out infinite alternate;
}
.reveal-aurora::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 35% at 60% 0%, rgba(74, 222, 155, 0.1), transparent 65%),
    radial-gradient(ellipse 40% 50% at 20% 10%, rgba(120, 90, 240, 0.09), transparent 50%);
  animation: aurora-dance2 10s ease-in-out infinite alternate;
}
.reveal-aurora::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(180deg,
    rgba(74, 222, 155, 0.05) 0%,
    rgba(143, 214, 255, 0.035) 30%,
    rgba(167, 139, 250, 0.025) 60%,
    transparent 100%);
  animation: aurora-wave 4s ease-in-out infinite alternate;
}
@keyframes aurora-dance {
  0% { transform: translateY(0) scaleX(1); opacity: 0.6; }
  100% { transform: translateY(15px) scaleX(1.08); opacity: 1; }
}
@keyframes aurora-dance2 {
  0% { transform: translateX(0) scaleY(1); opacity: 0.4; }
  100% { transform: translateX(20px) scaleY(1.1); opacity: 0.8; }
}
@keyframes aurora-wave {
  0% { opacity: 0.3; transform: translateX(-3%); }
  100% { opacity: 0.7; transform: translateX(3%); }
}

.reveal-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-xl);
}

.reveal-icon {
  font-size: 4.5rem;
  margin-bottom: var(--space-lg);
  animation: revealIconIn 0.8s ease-out 0.3s both, revealIconPulse 3s ease-in-out 1.5s infinite;
}
@keyframes revealIconIn {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes revealIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.reveal-year {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
  animation: fade-up 0.7s ease 0.3s forwards;
}

.reveal-destination {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 900;
  font-style: italic;
  margin: var(--space-md) 0;
  background: linear-gradient(120deg, #f4f8ff 20%, var(--ice) 50%, var(--aurora-green) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text-primary);
  opacity: 0;
  transform: scale(0.9);
  animation: fade-up 0.9s ease 0.7s forwards;
}

.reveal-subtitle {
  font-family: var(--font-body);
  font-size: clamp(var(--fs-sm), 2.5vw, var(--fs-md));
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.8;
  opacity: 0;
  animation: fade-up 0.7s ease 1.3s forwards;
}

.reveal-cta {
  margin-top: var(--space-2xl);
  opacity: 0;
  animation: fade-up 0.7s ease 1.8s forwards;
}
.reveal-cta button {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 16px 44px;
  background: linear-gradient(135deg, rgba(143, 214, 255, 0.12), rgba(74, 222, 155, 0.1));
  border: 1px solid var(--border-accent);
  border-radius: 100px;
  color: var(--text-primary);
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all var(--transition-base);
  box-shadow: var(--glow-ice);
}
.reveal-cta button:hover {
  background: linear-gradient(135deg, rgba(143, 214, 255, 0.2), rgba(74, 222, 155, 0.16));
  border-color: rgba(143, 214, 255, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(143, 214, 255, 0.28);
}

@keyframes fade-up {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-fly 2.5s ease-out forwards;
}
@keyframes particle-fly {
  0% { opacity: 0.8; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}