/* ==========================================================================
   Enigma — home: fogged mirror hero, statement, four doors, decoder teaser, salon
   ========================================================================== */

/* ---------- Hero: masthead + one mirror + one line ---------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--nav-h) + 0.5rem) var(--gutter) clamp(1.25rem, 3vh, 2.25rem);
}
.hero__stage { position: relative; display: grid; place-items: center; min-height: 0; }

.mirror {
  --mw: min(76vw, calc((100svh - var(--nav-h) - 7rem) * 0.74), 600px);
  position: relative; width: var(--mw); aspect-ratio: 3 / 4; margin-bottom: 4vh;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: crosshair;
}
.mirror__glass {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; isolation: isolate;
  box-shadow: 0 40px 90px -40px rgba(43, 29, 25, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transform: translateZ(0);
}
.mirror__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mirror__fog {
  position: absolute; inset: 0; width: 100%; height: 100%; display: none;
  background: url("../img/facial-mask-fog.webp") center / cover no-repeat;
}
.js .mirror__fog { display: block; }
.mirror.is-clear .mirror__fog { display: none; }
.mirror.is-wiped .mirror__fog { opacity: 0; transition: opacity 1400ms var(--ease-soft); }
/* No JS after 4.5 s (stalled CDN) or reduced motion: never leave the photo hidden behind fog. */
.pt-enter .mirror__fog { animation: fogFallback 1.2s 4.5s forwards; }
@keyframes fogFallback { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mirror__fog { display: none !important; } }
/* Keyboard alternative to wiping: visible only on focus */
.mirror__key {
  position: absolute; left: 50%; bottom: 8%; z-index: 5; transform: translateX(-50%);
  padding: 0.6rem 1.1rem; border-radius: var(--r-pill); background: var(--cocoa); color: var(--pearl); font-size: 0.85rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast);
}
.mirror__key:focus-visible { opacity: 1; pointer-events: auto; }
/* A sheen that drifts across the glass, like light on a bathroom mirror */
.mirror__glass::after {
  content: ''; position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 47%, transparent 58%);
  transform: translateX(-60%); animation: sheen 9s var(--ease-soft) 2.5s infinite;
}
@keyframes sheen { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.mirror__rim {
  position: absolute; inset: calc(var(--mw) * -0.035); border-radius: 50%; pointer-events: none;
  border: 1px solid var(--line-strong); opacity: 0.55;
}
.mirror__rim::before {
  content: ''; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--fuchsia);
}
.mirror__hint {
  position: absolute; left: 50%; top: 11%; z-index: 3; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem 0.55rem 0.8rem; border-radius: var(--r-pill);
  background: rgba(251, 248, 244, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--cocoa);
  pointer-events: none; transition: opacity 700ms, transform 900ms var(--ease-out);
}
.mirror__hand { position: relative; width: 26px; height: 10px; }
.mirror__hand::before, .mirror__hand::after { content: ''; position: absolute; top: 50%; border-radius: 50%; }
.mirror__hand::before { left: 0; right: 0; height: 1px; margin-top: -0.5px; border-radius: 0; background: currentColor; opacity: 0.35; }
.mirror__hand::after { left: 0; width: 10px; height: 10px; margin-top: -5px; background: var(--fuchsia); animation: swipe 1.8s var(--ease-soft) infinite alternate; }
@keyframes swipe { to { transform: translateX(16px); } }
.mirror.is-touched .mirror__hint { opacity: 0; transform: translate(-50%, -12px); }
.mirror.is-cleared .mirror__hint { opacity: 1; transform: translateX(-50%); }
.mirror.is-cleared .mirror__hand { display: none; }
.mirror:not(.is-ready) .mirror__hint, .mirror.is-clear .mirror__hint { opacity: 0; }

.hero__mark {
  position: absolute; left: 50%; bottom: -2%; z-index: 4; width: min(88vw, 1080px);
  transform: translateX(-50%); color: var(--cocoa); pointer-events: none;
}
.hero__mark .wordmark { filter: drop-shadow(0 1px 0 rgba(251, 248, 244, 0.35)); }

/* The wordmark is written left to right */
.wordmark.is-writing {
  -webkit-mask-image: linear-gradient(100deg, #000 44%, transparent 56%); mask-image: linear-gradient(100deg, #000 44%, transparent 56%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.wordmark.is-written { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 2.6s cubic-bezier(0.55, 0.05, 0.3, 1), mask-position 2.6s cubic-bezier(0.55, 0.05, 0.3, 1); }

.hero__line { position: relative; z-index: 5; font-family: var(--f-serif); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem); }
.hero__line em { font-style: italic; }

@media (max-width: 700px) {
  .mirror { --mw: min(80vw, calc((100svh - var(--nav-h) - 9rem) * 0.74)); margin-bottom: 9vh; }
  .hero__mark { bottom: 6%; }
}

/* ---------- Statement ---------- */
.statement { padding: var(--space-2xl) var(--gutter); display: grid; gap: 2rem; justify-items: start; }
.statement__text {
  font-family: var(--f-serif); font-size: clamp(2rem, 1rem + 3.5vw, 4.6rem); line-height: 1.06; letter-spacing: -0.012em;
  max-width: 21ch; margin-left: clamp(0rem, 8vw, 9rem);
}
.statement__text em { font-style: italic; color: var(--fuchsia); }

/* ---------- Four doors (arched, expanding) ---------- */
.worlds { padding: var(--space-xl) var(--gutter); }
.worlds__head { display: grid; gap: 1.25rem; margin-bottom: var(--space-l); }
.doors { display: flex; gap: clamp(0.5rem, 1vw, 1rem); height: clamp(460px, 74vh, 760px); }
.door { flex: 1 1 0; min-width: 0; transition: flex-grow 1000ms var(--ease-out); }
.door.is-open { flex-grow: 3.4; }
.door__link {
  position: relative; display: block; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: 999px 999px var(--r-card) var(--r-card); color: var(--pearl);
}
.door__media { position: absolute; inset: 0; z-index: -2; }
.door__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.85) brightness(0.62); transform: scale(1.08);
  transition: filter 1000ms var(--ease-out), transform 1600ms var(--ease-out);
}
.door.is-open .door__media img { filter: none; transform: scale(1); }
.door__link::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 40%, rgba(25, 17, 15, 0.82) 100%);
}
.door__num { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-size: 0.78rem; letter-spacing: 0.2em; opacity: 0.8; }
.door__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.6rem; padding: clamp(1.25rem, 2.4vw, 2.25rem); }
.door__title { font-family: var(--f-serif); font-size: clamp(1.6rem, 1rem + 1.8vw, 3rem); line-height: 1; white-space: nowrap; }
.door:not(.is-open) .door__title { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; font-size: clamp(1.4rem, 1rem + 1vw, 2rem); }
.door__line, .door__go { opacity: 0; transform: translateY(12px); transition: opacity 500ms, transform 700ms var(--ease-out); max-width: 34ch; }
.door__go { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; color: var(--blush); }
.door.is-open .door__line, .door.is-open .door__go { opacity: 1; transform: none; transition-delay: 350ms; }

@media (max-width: 860px) {
  .doors { flex-direction: column; height: auto; }
  .door, .door.is-open { flex: none; }
  .door__link { height: min(118vw, 520px); }
  .door__media img { filter: none; transform: none; }
  .door:not(.is-open) .door__title { writing-mode: horizontal-tb; transform: none; justify-self: start; font-size: clamp(1.6rem, 1rem + 1.8vw, 3rem); }
  .door__line, .door__go { opacity: 1; transform: none; }
}

/* ---------- Decoder teaser ---------- */
.cipher {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: var(--space-l);
  padding: var(--space-xl) var(--gutter);
}
.cipher__machine { width: min(100%, 520px); justify-self: center; }
.cipher__body { display: grid; gap: 1.4rem; justify-items: start; max-width: 36rem; }
.cipher__text { color: var(--muted); max-width: 40ch; }
@media (max-width: 860px) { .cipher { grid-template-columns: 1fr; } .cipher__machine { width: min(86vw, 420px); } }

/* ---------- Salon ---------- */
.salon {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: var(--space-l);
  padding: var(--space-l) var(--gutter) var(--space-2xl);
}
.salon__fig { border-radius: var(--r-card) var(--r-card) var(--r-card) 999px; overflow: hidden; aspect-ratio: 4 / 5; }
.salon__fig img { width: 100%; height: 100%; object-fit: cover; }
.salon__body { display: grid; gap: 1.6rem; justify-items: start; padding-bottom: 2rem; }
.stats { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(1.25rem, 3vw, 3rem); padding-block: 1rem; border-top: 1px solid var(--line); }
.stats__item { display: flex; flex-direction: column-reverse; gap: 0.35rem; padding-top: 1rem; }
.stats dd { font-family: var(--f-serif); font-size: clamp(3rem, 1.6rem + 4vw, 6rem); line-height: 0.9; }
.stats dt { font-size: 0.78rem; color: var(--muted); max-width: 12ch; line-height: 1.3; }
@media (max-width: 860px) { .salon { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(3, 1fr); } }