@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

body {
  animation: pageFadeIn 0.8s ease both;
  font-family: 'Libre Baskerville', Georgia, serif;
}

html[theme="launch"] { background: #909f8b; }
html[theme="label"] { background: #c0c2c7; }
html[theme="sky"] { background: #77a0be; }
html[theme="vibe"] { background: #cdb559; }

/* ── Pages ──────────────────────────────── */
.page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* animate.css requires block/inline-block */
.page__label {
  display: inline-block;
  font-size: clamp(2.56rem, 10.24vw, 8.32rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #0d0d0d;
  user-select: none;
  pointer-events: none;
}

#page-default { z-index: 1; }
#page-info { z-index: 2; opacity: 0; }

/* ── Page 2 content ─────────────────────── */
.p2-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.8rem, 4vw, 3rem);
  pointer-events: none;
  user-select: none;
}

.p2-group {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.p2-group p {
  font-size: clamp(1.08rem, 2.64vw, 2.1rem);
  font-weight: 400;
}

/* .p2-group:not(.p2-group--lead) p {
  color: #303030;
} */

.p2-group--lead p {
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ── Page 1 lockup ──────────────────────── */
.p1-lockup {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 2rem);
  pointer-events: none;
  user-select: none;
}

.p1-logo {
  height: clamp(3.0rem, 8.5vw, 7rem);
  width: auto;
  display: block;
  transform: translateY(8px);
}

@media (max-width: 767px) {
  .p1-logo { transform: translateY(6px); }
}

/* ── Info button ────────────────────────── */
#info-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  color: #0d0d0d;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.btn-lbl {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-lbl svg { width: 100%; height: 100%; }

.btn-lbl--i  { opacity: 1; transform: rotate(0deg);   }
.btn-lbl--x  { opacity: 0; transform: rotate(-90deg); }

#info-toggle.on-p2 .btn-lbl--i { opacity: 0; transform: rotate(90deg); }
#info-toggle.on-p2 .btn-lbl--x { opacity: 1; transform: rotate(0deg);  }

/* ── Animations ──────────────────────── */
:root { --animate-duration: 1s; }

.animate__animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
          animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

/* ── zoomOut ─────────────────────────────── */
@-webkit-keyframes zoomOut {
  0%  { opacity: 1; }
  50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); }
  to  { opacity: 0; }
}
@keyframes zoomOut {
  0%  { opacity: 1; }
  50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); }
  to  { opacity: 0; }
}
.animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; }

/* ── zoomIn ──────────────────────────────── */
@-webkit-keyframes zoomIn {
  0%  { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); }
  50% { opacity: 1; }
}
@keyframes zoomIn {
  0%  { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); }
  50% { opacity: 1; }
}
.animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; }

/* ── backInUp ────────────────────────────── */
@-webkit-keyframes backInUp {
  0%  { -webkit-transform: translateY(1200px) scale(.7); transform: translateY(1200px) scale(.7); opacity: .7; }
  80% { -webkit-transform: translateY(0) scale(.7);     transform: translateY(0) scale(.7);     opacity: .7; }
  to  { -webkit-transform: scale(1);                    transform: scale(1);                    opacity: 1;  }
}
@keyframes backInUp {
  0%  { -webkit-transform: translateY(1200px) scale(.7); transform: translateY(1200px) scale(.7); opacity: .7; }
  80% { -webkit-transform: translateY(0) scale(.7);     transform: translateY(0) scale(.7);     opacity: .7; }
  to  { -webkit-transform: scale(1);                    transform: scale(1);                    opacity: 1;  }
}
.animate__backInUp { -webkit-animation-name: backInUp; animation-name: backInUp; }

/* ── backOutDown ─────────────────────────── */
@-webkit-keyframes backOutDown {
  0%  { -webkit-transform: scale(1);                     transform: scale(1);                     opacity: 1;  }
  20% { -webkit-transform: translateY(0) scale(.7);      transform: translateY(0) scale(.7);      opacity: .7; }
  to  { -webkit-transform: translateY(700px) scale(.7);  transform: translateY(700px) scale(.7);  opacity: .7; }
}
@keyframes backOutDown {
  0%  { -webkit-transform: scale(1);                     transform: scale(1);                     opacity: 1;  }
  20% { -webkit-transform: translateY(0) scale(.7);      transform: translateY(0) scale(.7);      opacity: .7; }
  to  { -webkit-transform: translateY(700px) scale(.7);  transform: translateY(700px) scale(.7);  opacity: .7; }
}
.animate__backOutDown { -webkit-animation-name: backOutDown; animation-name: backOutDown; }