/* THE OPEN — motion.css
   QUIET MOTION. No particles, no glow, no continuous decoration.
   MARK opening ≤ 2.3s · page 400–500ms · hover 200ms · menu 300ms
   decision 600ms · reveal 600ms. Reduced motion: opacity only, or nothing. */

/* ---------- Page in / out ---------- */
body {
  animation: page-in var(--dur-page) var(--ease-quiet) both;
}

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.is-leaving body {
  opacity: 0;
  transition: opacity 400ms var(--ease-quiet);
}

html.menu-open,
html.intro-active {
  overflow: hidden;
}

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.js [data-reveal="fade"] { transform: none; }

.js [data-reveal-delay="1"] { transition-delay: 80ms; }
.js [data-reveal-delay="2"] { transition-delay: 160ms; }
.js [data-reveal-delay="3"] { transition-delay: 240ms; }

/* BUÔNG on the homepage: the words themselves open up */
.js [data-reveal="open"] {
  opacity: 0;
  word-spacing: -0.12em;
  letter-spacing: -0.02em;
  transition:
    opacity 700ms var(--ease-out),
    word-spacing 700ms var(--ease-out),
    letter-spacing 700ms var(--ease-out);
}

.js [data-reveal="open"].is-in {
  opacity: 1;
  word-spacing: 0.08em;
  letter-spacing: 0.02em;
}

/* A line that draws itself (BUÔNG / CÒN horizon) */
.js [data-reveal="line"] {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 1;
  transition: transform 700ms var(--ease-out);
}

.js [data-reveal="line"].is-in { transform: scaleX(1); }

/* ---------- THE MARK opening (home, once per session) ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  background: var(--void);
  color: var(--bone);
  cursor: pointer;
}

.intro .mark__img--void { display: none; }
.intro .mark__img--bone { display: block; }

.intro .lockup { --lockup-w: clamp(150px, 18vw, 240px); }

/* 0–1000ms: the mark is revealed along its own horizontal axis */
.intro.is-playing .mark {
  animation: mark-open 1000ms var(--ease-in-out) both;
}

.intro.is-playing .lockup__name { animation: rise 500ms var(--ease-out) 750ms both; }
.intro.is-playing .lockup__slogan { animation: rise 500ms var(--ease-out) 950ms both; }

/* 1850–2300ms: the threshold opens */
.intro.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms var(--ease-quiet);
}

@keyframes mark-open {
  from { clip-path: inset(0 50% 0 50%); opacity: 0.2; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Hero content follows the intro (or simply fades in if intro is skipped) */
.js .hero__stagger > * {
  animation: rise 700ms var(--ease-out) both;
}

.js .hero__stagger > *:nth-child(2) { animation-delay: 120ms; }
.js .hero__stagger > *:nth-child(3) { animation-delay: 240ms; }
.js .hero__stagger > *:nth-child(4) { animation-delay: 360ms; }

html.intro-active .hero__stagger > * { animation-play-state: paused; }

/* ---------- Letter decision ceremony (500–650ms) ---------- */
.ceremony-keep .letter-sheet {
  animation: keep 600ms var(--ease-in-out) both;
}

.ceremony-notyet .letter-sheet {
  animation: notyet 600ms var(--ease-in-out) both;
}

.ceremony-release .letter-sheet {
  animation: release 650ms var(--ease-in-out) both;
}

@keyframes keep {
  0% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; transform: translateY(-12px) scale(0.98); clip-path: inset(0 0 60% 0); }
}

@keyframes notyet {
  0% { opacity: 1; filter: none; }
  100% { opacity: 0; filter: blur(2px); }
}

@keyframes release {
  0% { opacity: 1; transform: none; letter-spacing: 0; }
  100% { opacity: 0; transform: translateY(24px); letter-spacing: 0.08em; }
}

/* The whole choice answers, not only the excerpt: the other two options
   step back, the chosen one's line draws across. No glow, no aura. */
.letters__decide .decision__opt,
.letters__decide-head > * {
  transition:
    opacity 500ms var(--ease-quiet),
    background-color var(--dur-hover) var(--ease-quiet),
    color var(--dur-hover) var(--ease-quiet);
}

.ceremony-keep .decision__opt:not(.decision__opt--keep),
.ceremony-notyet .decision__opt:not(.decision__opt--notyet),
.ceremony-release .decision__opt:not(.decision__opt--release),
[class*="ceremony-"] .letters__decide-head > :not(.letter-sheet),
[class*="ceremony-"] .letters__edit {
  opacity: 0.1;
}

.ceremony-keep .decision__opt--keep,
.ceremony-notyet .decision__opt--notyet,
.ceremony-release .decision__opt--release {
  background: var(--bg-2);
}

.ceremony-keep .decision__opt--keep::before,
.ceremony-notyet .decision__opt--notyet::before,
.ceremony-release .decision__opt--release::before {
  transform: scaleX(1);
  transition-duration: 550ms;
}

.ceremony-release .decision__opt--release .decision__sym { color: var(--signal-on-dark); }
.ceremony-keep .decision__opt--keep .decision__sym,
.ceremony-notyet .decision__opt--notyet .decision__sym { fill: currentColor; fill-opacity: 0.08; }

.result-sym path,
.result-sym circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 600ms var(--ease-in-out) 150ms forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* ---------- Silence: reveal remaining time on tap ---------- */
.silence-time {
  opacity: 0;
  transition: opacity 500ms var(--ease-quiet);
}

.silence-time.is-visible { opacity: 1; }

/* =========================================================
   REDUCED MOTION — class set before paint from OS setting
   or from the on-site preference (theopen.preferences).
   ========================================================= */
.reduce-motion body { animation: none; }

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

.reduce-motion [data-reveal],
.reduce-motion [data-reveal="open"],
.reduce-motion [data-reveal="line"] {
  opacity: 1 !important;
  transform: none !important;
  word-spacing: normal;
  letter-spacing: inherit;
  transition: none !important;
}

.reduce-motion .site-header,
.reduce-motion .menu,
.reduce-motion .menu__item,
.reduce-motion .toast {
  transition-property: opacity, background-color, color !important;
  transform: none !important;
}

.reduce-motion .site-header.is-hidden { transform: none !important; }

.reduce-motion .status[data-state="saving"] .status__dot,
.reduce-motion .skeleton__line {
  animation: none !important;
}

.reduce-motion html.is-leaving body,
html.reduce-motion.is-leaving body {
  opacity: 1;
}

.reduce-motion .result-sym path,
.reduce-motion .result-sym circle {
  stroke-dashoffset: 0;
}

@media (max-width: 699px) {
  .mobile-bar > .mobile-bar__menu[data-menu-open] {
    position: fixed !important;
    left: auto !important;
    right: var(--margin) !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    z-index: 9999 !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 76px !important;
    height: var(--bar-h) !important;
    color: var(--signal-on-dark) !important;
  }

  .mobile-bar > .mobile-bar__menu[data-menu-open] > span:first-child {
    display: inline !important;
  }

  .mobile-bar > .mobile-bar__menu[data-menu-open] .menu-toggle__icon {
    display: grid !important;
    width: 18px !important;
  }
}

@media (max-width: 500px) {
  .mobile-bar > .mobile-bar__menu[data-menu-open] {
    left: min(calc(100vw - 96px), 294px) !important;
    right: auto !important;
  }
}