/* ============================================================
   antidot.gr — site chrome for full-screen app pages
   (Synthi 360, Eidoleion): the intro curtain and the arrow menu,
   matching css/project-page.css, without its global resets or
   layout so the app keeps its own. Colours use their own --ac-*
   names so they never collide with an app's variables.
   Used with js/project-page.js (curtain + arrow menu behaviour).
   ============================================================ */

.curtain,
.menu-panel {
  --ac-paper: #f4f0e8;
  --ac-paper-deep: #ece7db;
  --ac-ink: #17150f;
  --ac-serif: "Instrument Serif", Georgia, serif;
  --ac-sans: "Archivo", Helvetica, Arial, sans-serif;
  --ac-mono: "Space Mono", "Courier New", monospace;
  --ac-gutter: clamp(1.25rem, 4vw, 4rem);
  box-sizing: border-box;
}

/* ---------------------------------------------------------- intro curtain */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ac-ink);
  color: var(--ac-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.curtain.is-gone { transform: translateY(-100%); }
.curtain-word {
  margin: 0;
  font-family: var(--ac-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(2.4rem, 9vw, 7rem);
  line-height: 1.2;
  overflow: hidden;
  display: flex;
  max-width: 100%;
  padding: 0 0.08em;
}
.curtain-line, .curtain-dot {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.curtain-dot { color: var(--ac-accent, #e60000); font-style: normal; }
.curtain.is-revealed .curtain-line { transition-delay: 0.15s; transform: translateY(0); }
.curtain.is-revealed .curtain-dot { transition-delay: 0.2s; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .curtain, .curtain-line, .curtain-dot { transition: none; }
}

/* ---------------------------------------------------------- menu overlay */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(0.5rem, 2.4vh, 2rem);
  padding: clamp(4.5rem, 10vh, 7rem) var(--ac-gutter) clamp(1.25rem, 4vh, var(--ac-gutter));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--ac-paper-deep) 95%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ac-ink);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.menu-panel.is-open { opacity: 1; visibility: visible; }
.menu-panel.is-leaving {
  opacity: 1;
  visibility: visible;
  background: var(--ac-paper-deep);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
  pointer-events: none;
}
.menu-home, .menu-link {
  font-family: var(--ac-sans);
  font-weight: 600;
  font-size: clamp(1.3rem, min(8vw, 8vh), 5rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-decoration: none;
  color: var(--ac-ink);
  width: max-content;
  transition: color 0.25s;
}
.menu-home:hover { color: var(--ac-accent, #e60000); }
.menu-home .dot { color: var(--ac-accent, #e60000); }
.menu-link:hover { color: var(--accent); }
.menu-eyebrow {
  margin: 0;
  font-family: var(--ac-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-accent, #e60000);
  animation: ac-eyebrow-pulse 1.8s ease-in-out infinite;
}
@keyframes ac-eyebrow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-eyebrow { animation: none; opacity: 1; }
}
.menu-nav { display: flex; flex-direction: column; gap: clamp(0.15rem, 1vh, 1rem); }
body.menu-lock { overflow: hidden; }

/* the arrow button sits above the open menu so it can close it */
#burger { position: relative; z-index: 95; }