/* threshold.css -- Door scroll-linked mask push for maysoonsalah.com homepage
   Dimensions: 1600x2700mm door, semicircular arch, 50mm frame.
   Blueprint draws top-down, built door fades in, leaves swing to 80deg,
   foreground scales up around doorway centre (mask push),
   ends on dimmed full-height room with overlay. */

:root {
  --th-ease-enter: cubic-bezier(.22, 1, .36, 1);
  --th-ease-draw: cubic-bezier(.65, 0, .35, 1);
  --th-steel: #111214;
  --th-glass: rgba(22, 28, 24, 0.55);
  --th-sage: rgba(215, 232, 188, 0.7);
  --th-sage-dim: rgba(215, 232, 188, 0.06);
  --th-caviar: #2c2f32;
  --th-ivory: #f6f4ef;
  --th-sage-solid: #d7e8bc;
  --header-h: 74px;
}

/* =========================================================
   1. DOOR SECTION
   ========================================================= */

.threshold {
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 500px;
  background: var(--surface, #353840);
  overflow: hidden;
}

/* Faint grid background (drawing-sheet feel) */
.threshold::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, var(--th-sage-dim) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--th-sage-dim) 0 1px, transparent 1px 24px);
  pointer-events: none;
  z-index: 1;
}

/* =========================================================
   2. ROOM LAYER (Layer 1, back)
   ========================================================= */

.th-room {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.th-room img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* =========================================================
   3. DIM LAYER (Layer 2)
   ========================================================= */

.th-dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--th-caviar);
  opacity: 1;
  pointer-events: none;
}

/* =========================================================
   4. FOREGROUND WRAPPER (Layer 3, scales)
   ========================================================= */

.th-fg {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

/* Wall SVG (fills section, evenodd cutout for doorway) */
.th-wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Door frame area (positioned at door location) */
.th-door-inner {
  position: absolute;
  z-index: 1;
}

/* Blueprint SVG */
.th-plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* Blueprint strokes: sage hairlines */
.th-plan path,
.th-plan line,
.th-plan rect,
.th-plan circle {
  fill: none;
  stroke: var(--th-sage);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Dims text */
.th-plan .g-dims text {
  fill: var(--th-sage);
  stroke: none;
  font: 300 28px/1 'DM Mono', monospace;
  opacity: 0;
}

/* =========================================================
   5. LEAVES (CSS 3D, inside th-fg)
   ========================================================= */

.th-leaves-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  perspective: 1800px;
  perspective-origin: 50% 38%;
}

.th-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  overflow: hidden;
}
.th-leaf-l {
  left: 0;
  transform-origin: left center;
}
.th-leaf-r {
  right: 0;
  transform-origin: right center;
}

/* =========================================================
   6. DOOR BUTTON (interactive overlay for click/key scroll)
   ========================================================= */

.th-door {
  position: absolute;
  z-index: 4;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font: inherit;
}
.th-door:focus-visible {
  outline: 2px solid var(--accent, #e9f056);
  outline-offset: 6px;
}

/* =========================================================
   7. VERTICAL LABEL (desktop only)
   ========================================================= */

.th-vertical-label {
  position: absolute;
  z-index: 5;
  font: 300 0.55rem/1 'DM Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(215, 232, 188, 0.35);
  white-space: nowrap;
  pointer-events: none;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: 0 0;
  top: 50%;
}

/* =========================================================
   8. OVERLAY
   Centred stack on the dimmed full-height room.
   Uniform caviar dim at .72: ivory at 5.0:1.
   ========================================================= */

.th-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4vh, 3rem) clamp(1rem, 4vw, 3rem);
  color: var(--th-ivory);
  text-align: center;
  pointer-events: none;
}

/* Closing lines: always accessible to screen readers (no aria-hidden, no visibility:hidden),
   but visually hidden until p=1 via opacity */
.th-overlay-line {
  margin: 0;
  font: 400 clamp(1.2rem, 2.5vw, 2rem)/1.3 var(--serif, 'Instrument Serif', Georgia, serif);
  color: var(--th-ivory);
  opacity: 0;
}
.th-overlay-line-2 {
  margin-top: 0.3rem;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
}

/* 3:4 illustration slot (hidden when empty) */
.th-art {
  width: min(200px, 40vw);
  aspect-ratio: 3 / 4;
  max-height: min(30svh, 260px);
  margin: 1.5rem auto;
  border: 1px dashed rgba(215, 232, 188, 0.15);
  border-radius: 4px;
  opacity: 0;
}
.th-art:empty { display: none; }

/* CTA and scroll cue: hidden from tab order until is-open */
.th-enter {
  display: inline-block;
  min-width: 44px;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--th-ivory);
  border-radius: 0;
  background: transparent;
  color: var(--th-ivory);
  font: 300 max(0.62rem, 12px)/1.4 'DM Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--th-ease-enter), visibility 0s linear 0.6s, border-color 0.25s ease, color 0.25s ease;
}
.th-enter:hover,
.th-enter:focus-visible {
  color: var(--accent, #e9f056);
  border-color: var(--accent, #e9f056);
}
.th-enter:focus-visible {
  outline: 2px solid var(--accent, #e9f056);
  outline-offset: 2px;
}

/* Scroll cue: full ivory #f6f4ef (explicit; not sage, not 50% ivory) */
.th-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.2rem;
  min-height: 44px;
  padding: 0.5rem;
  font: 300 0.75rem/1 'DM Mono', monospace; /* UX fix 2026-10-08: 12px (was 9.6px) */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f6f4ef;
  text-decoration: none;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--th-ease-enter), visibility 0s linear 0.6s, color 0.2s ease;
}
.th-scroll-cue:hover { color: var(--accent, #e9f056); }

/* is-open: reveal CTA and scroll cue */
.threshold.is-open .th-enter,
.threshold.is-open .th-scroll-cue {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}
.threshold.is-open .th-scroll-cue {
  color: #f6f4ef;
}

/* Overlay text and art fade in at is-open */
.threshold.is-open .th-overlay-line,
.threshold.is-open .th-art {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   9. MOTION CONTROL (Pause / Play)
   ========================================================= */

.motion-toggle {
  position: absolute;
  z-index: 20;
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(215, 232, 188, 0.3);
  border-radius: 0;
  background: var(--th-caviar);
  color: var(--text, #d7e8bc);
  font: 300 0.6rem/1 'DM Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.motion-toggle:focus-visible {
  outline: 2px solid var(--accent, #e9f056);
  outline-offset: 2px;
}
.motion-toggle:hover {
  border-color: var(--accent, #e9f056);
  color: var(--accent, #e9f056);
}

/* Desktop (>560px): top inline start */
.motion-toggle {
  inset-block-start: 1rem;
  inset-inline-start: max(1.5rem, env(safe-area-inset-left));
}

/* Phone (<=560px): top inline end */
@media (max-width: 560px) {
  .motion-toggle {
    inset-block-start: 1rem;
    inset-inline-start: auto;
    inset-inline-end: max(1rem, env(safe-area-inset-right));
  }
}

/* =========================================================
   10. FILM SECTION
   ========================================================= */

.codex-film { position: relative; background: var(--th-caviar); }
/* UX fix 2026-10-08: frame fits the space under the fixed 74px header; section height = frame height */
.codex-film-frame { position: relative; width: min(100%, calc((100svh - 74px) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; background: var(--th-caviar); overflow: hidden; }
@media (max-width: 560px) { .codex-film-frame { height: min(calc(100vw * 16 / 9), calc(100svh - 74px)); width: auto; aspect-ratio: 9 / 16; margin-inline: auto; } }

/* =========================================================
   10b. PHILOSOPHY SECTION (moved from door overlay)
   ========================================================= */

.codex-philosophy { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(3rem, 8vh, 6rem) clamp(1rem, 4vw, 3rem); background: var(--th-caviar); color: var(--th-ivory); text-align: center; border-top: 1px solid var(--line, rgba(215,232,188,.10)); }
.codex-philosophy .th-overlay-line, .codex-philosophy .th-art { opacity: 1; transform: none; }
.codex-philosophy .th-enter { opacity: 1; visibility: visible; margin-top: 1.5rem; transition: border-color .25s ease, color .25s ease; }

/* =========================================================
   11. CHAPTER I CAP (50svh on desktop)
   ========================================================= */

@media (min-width: 769px) {
  .codex-chapter-practice {
    max-height: 50svh;
    overflow: hidden;
  }
}

.codex-chapter-link {
  text-decoration: none;
}

/* =========================================================
   12. DESKTOP DOOR SCALE (769px+)
   ========================================================= */

@media (min-width: 769px) {
  .threshold {
    padding: 0;
  }
  .th-overlay-line-2 {
    font-size: clamp(3.5rem, 7vw, 7.5rem);
    line-height: 1;
    margin-top: 0.5rem;
  }
  .th-vertical-label {
    left: max(1rem, calc(50% - min(31vw, 210px) - 4rem));
  }
}

/* =========================================================
   13. PHONE (<=560px)
   ========================================================= */

@media (max-width: 560px) {
  .threshold {
    padding: 0;
  }
  /* Blueprint strokes bolder on phone */
  .th-plan path,
  .th-plan line,
  .th-plan rect {
    stroke-width: 4;
    stroke: rgba(215, 232, 188, 0.95);
  }
  /* Lighten glass tint on phone */
  .th-leaf svg > path:first-of-type { opacity: 0.35; }
  .th-leaf svg rect { stroke: rgba(215, 232, 188, 0.1); stroke-width: 0.5; }
  .th-plan .g-dims { display: none; }
  .th-overlay-line-2 {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.1;
  }
}

/* =========================================================
   14. LANDSCAPE PHONE
   ========================================================= */

@media (max-height: 500px) and (orientation: landscape) {
  .threshold { height: 100svh; min-height: auto; }
}

/* =========================================================
   15. REDUCED MOTION & DATA SAVER & NO-JS
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .threshold::before { display: none; }
  .th-plan { display: none; }
  .th-fg { display: none; }
  .th-door { display: none; }
  .motion-toggle { display: none; }
}

html:not(.js) .th-overlay-line,
html:not(.js) .th-art,
html.motion-reduced .th-overlay-line,
html.motion-reduced .th-art,
html.save-data .th-overlay-line,
html.save-data .th-art {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js) .th-enter,
html:not(.js) .th-scroll-cue,
html.motion-reduced .th-enter,
html.motion-reduced .th-scroll-cue,
html.save-data .th-enter,
html.save-data .th-scroll-cue {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}
html.save-data .th-plan { display: none; }
html.save-data .th-fg { display: none; }
html.save-data .th-door { display: none; }
html.save-data .motion-toggle { display: none; }

/* =========================================================
   16. 360px illustration slot sizing
   ========================================================= */

@media (max-width: 400px) {
  .th-art {
    max-height: min(30svh, 240px);
  }
}