/* ============================================================
   PERFUME SEVEN — THE ENVELOPE  (temporary cover)
   ------------------------------------------------------------
   A cover laid over the whole site. While it is on, a visitor
   sees only: the mark and language switch at the top, one line
   of words in the middle, the copyright at the foot.

   While the song plays, the whole page slowly turns grey, then
   black at 1:36 — where a second line arrives in white — and
   then back to white by 3:12. See envelope.js.

   It touches nothing else. To lift it later, open
   /assets/js/envelope.js and set ENVELOPE_ON = false, then
   upload that one file. Nothing else has to change.
   ============================================================ */

/* while sealed: no scrolling, no rubber-banding behind the cover */
html.is-sealed { overflow: hidden; }

html.is-sealed body {
  overflow: hidden;
  position: fixed;
  inset: 0;
  height: 100%;
  overscroll-behavior: none;
}

/* ============================================================
   THE COVER
   ============================================================ */
.envelope {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4.5rem, 12vh, 7rem) var(--pad, 6vw);
  touch-action: none;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.envelope > * { position: relative; }

/* the line and its countdown hang together, so the line never shifts
   when the countdown arrives */
.envelope__stage {
  position: relative;
  max-width: 100%;
}

/* ============================================================
   THE COUNTDOWN
   A small line under the title, in the title's own colour,
   counting the seconds to the next change. It opens from the
   middle outwards, and it opens again at every change.
   ============================================================ */
.envelope__timer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: clamp(1rem, 2.8vh, 1.9rem) 0 0;
  font-family: var(--sans, -apple-system, "PingFang SC", sans-serif);
  font-weight: 300;
  font-size: clamp(0.58rem, 1vw, 0.72rem);
  letter-spacing: 0.32em;
  text-indent: 0.16em;   /* so the trailing letter-space does not pull it off-centre */
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.envelope__timer i {
  display: inline-block;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.envelope__timer.is-in { opacity: 1; }

/* ============================================================
   THE LINE
   It appears whole — never letter by letter. Then it breathes,
   and finally it comes to rest.
   ============================================================ */
.envelope__message {
  /* exactly the title card's own typeface: the sans of the hero */
  font-family: var(--sans, -apple-system, "PingFang SC", sans-serif);
  font-weight: 200;
  font-size: clamp(1rem, 6.2vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  color: var(--ink, #0b0b0c);
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.3em);
}

/* the line breaks in two only on a narrow screen (see the end of this file) */
.envelope__br { display: none; }

.envelope__message.is-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 2.6s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              filter 2.6s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              transform 2.6s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* the Chinese line follows the Chinese title card, character for character */
html[lang="zh-Hans"] .envelope__message {
  font-weight: 500;
  font-size: clamp(1.1rem, 10vw, 9rem);
  letter-spacing: 0.08em;
  text-indent: 0.04em;
  text-transform: none;
  white-space: nowrap;
}

/* ---------- the breath ----------
   A plain CSS animation on purpose: it keeps running even when the
   browser is not drawing frames for us, so it can never simply stop.
   Only the opacity moves — the line never changes size. */
@keyframes envelopeBreath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.42; }
}

.envelope__message.is-breathing {
  animation: envelopeBreath 2.2s ease-in-out infinite;
  will-change: opacity;
}

.envelope__message.is-steady {
  animation: none;
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 1.8s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* ---------- the second line, once the page is black ----------
   exactly the title card's own entrance: letter by letter, out of a blur */
.envelope__message.is-hero {
  color: #ffffff;
  opacity: 1;
  filter: none;
  transform: none;
  white-space: nowrap;
}

.envelope__message.is-hero span {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(0.22em);
}

.envelope__message.is-hero span.is-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 1.5s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              filter 1.5s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              transform 1.5s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* ============================================================
   THE MARK AND THE LANGUAGE SWITCH — top centre,
   arranged EN · mark · 中, so the mark sits dead centre
   ============================================================ */
.envelope__top {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + clamp(1.5rem, 4.4vh, 2.6rem));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.4vw, 1.4rem);
  opacity: 0;
}

.envelope__logo {
  width: clamp(16px, 1.6vw, 21px);
  height: auto;
  opacity: 0.8;
}

.envelope__lang {
  display: block;
  width: clamp(2.4rem, 6vw, 3.4rem);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3, #a6a6ab);
  transition: color 0.45s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  touch-action: manipulation;
}

/* the two switches point at the mark */
.envelope__lang:first-child { text-align: right; }
.envelope__lang:last-child { text-align: left; }

.envelope__lang:hover,
.envelope__lang:focus-visible { color: var(--ink-2, #6e6e73); }

.envelope__lang.is-on { color: var(--ink, #0b0b0c); }

/* ============================================================
   THE FOOT
   ============================================================ */
.envelope__foot {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(1.5rem, 4.4vh, 2.6rem));
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3, #a6a6ab);
  opacity: 0;
  white-space: nowrap;
}

/* the top and the foot — one plain fade, together with the line */
.envelope__top.is-in,
.envelope__foot.is-in {
  opacity: 1;
  transition: opacity 2.4s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* ============================================================
   THE SONG
   It starts on its own where the browser allows it. Where the
   browser insists on a touch first (most phones, and a first
   visit on a computer), the first touch — anywhere — begins it,
   so nothing extra is ever put on the page.
   ============================================================ */
.envelope__song { display: none; }

/* ============================================================
   REDUCED MOTION — everything simply appears
   ============================================================ */
.envelope--static .envelope__message,
.envelope--static .envelope__top,
.envelope--static .envelope__foot {
  transition: none !important;
  filter: none;
  transform: none;
}

.envelope--static .envelope__message.is-in { opacity: 1; }

/* ============================================================
   NARROW SCREENS — a phone wants two lines, not one thin one
   ============================================================ */
@media (max-width: 620px) {
  .envelope__message {
    font-size: clamp(1.6rem, 11vw, 4rem);
    white-space: normal;
  }

  .envelope__br { display: block; }

  html[lang="zh-Hans"] .envelope__message {
    font-size: clamp(1.3rem, 10vw, 3.6rem);
    white-space: nowrap;
  }

  /* the second line always stays on one line, whatever the screen */
  .envelope__message.is-hero { font-size: clamp(1.25rem, 8.2vw, 2.6rem); }
  html[lang="zh-Hans"] .envelope__message.is-hero {
    font-size: clamp(1.35rem, 9vw, 3rem);
    letter-spacing: 0.1em;
  }
}