/* landing.css — letter landing overlay.
   A real letter (like the CV / motivation letter documents): portrait,
   textured paper, straight when at rest. The tilt exists only during the
   motion: it rises from below slightly rotated and settles flat, like the
   V.A.A. archive letter. Exit is the same move reversed.
   Kill switch in js/landing.js (LANDING_ENABLED) or ?landing=off. */

/* The hidden attribute must always win over our display: flex,
   otherwise no dismissal path can actually remove the overlay. */
.landing[hidden] { display: none !important; }

.landing {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  /* Translucent scrim: the homepage stays visible but dimmed behind the
     letter (modal-like), matching the mockup. */
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 0.9s ease;
}

[data-theme="light"] .landing {
  background: rgba(245, 243, 238, 0.78);
}

.landing.is-out { opacity: 0; }

body.landing-open { overflow: hidden; }

/* The letter: portrait document, straight at rest.
   Colors are hard-coded: real paper stays light in dark mode too
   (a lit document on a dark desk). */
.landing-letter {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1180px, 92vw);
  min-height: min(70vh, 700px);
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: clamp(28px, 4vw, 60px) clamp(24px, 5vw, 76px);
  background: #EFEBE3 url('../assets/paper-grain.png') repeat;
  color: #0A0A0A;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.18);
  /* resting pose: flat, straight */
  transform: translateY(0) rotate(0deg);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* scrollable if the letter overflows a short viewport, but no visible bar */
.landing-letter::-webkit-scrollbar { display: none; }

/* pre-entry + exit pose: below the fold, slightly rotated mid-lift */
.landing.is-start .landing-letter,
.landing.is-out .landing-letter {
  transform: translateY(80vh) rotate(-6deg);
}

/* In-letter language switcher (EN / FR / ES), top-right of the paper.
   Swaps only the letter copy, client-side (see landing.js). */
.landing-letter-lang {
  align-self: flex-end;
  display: flex;
  gap: var(--space-2);
  margin-bottom: clamp(10px, 1.5vw, 16px);
  font-family: var(--font-mono);
  font-size: var(--font-caption);
}

.landing-letter-lang button {
  border: none;
  background: none;
  font: inherit;
  color: #0A0A0A;
  cursor: pointer;
  padding: 0 0 2px;
  border-bottom: 1px solid transparent;
  opacity: 0.5;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.landing-letter-lang button:hover { opacity: 0.8; }

.landing-letter-lang button.is-active {
  opacity: 1;
  border-bottom-color: #0A0A0A;
}

/* Hairline rules framing the letter, top and bottom */
.landing-letter-rule {
  border: none;
  border-top: 1px solid #0A0A0A;
  width: 100%;
  margin: 0;
}

.landing-letter-rule--top { margin-bottom: clamp(20px, 3vw, 40px); }
.landing-letter-rule--bottom { margin-top: clamp(16px, 2.4vw, 28px); }

/* Serif punchline, sentence case, two lines (newline preserved) */
.landing-letter-punchline {
  margin: 0 0 clamp(22px, 3vw, 40px);
  font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  white-space: pre-line;
}

/* Body copy — mono, held to a left column so the paper breathes */
.landing-letter-body {
  max-width: 54ch;
}

.landing-letter-body p {
  margin: 0 0 1.1em;
  font-size: var(--font-body);
  line-height: 1.65;
  /* Better rag: avoid short last lines / stranded words where supported. */
  text-wrap: pretty;
}

.landing-letter-body p:last-child { margin-bottom: 0; }

/* Inverted signature lockup, pinned bottom-right like the mockup.
   margin-top:auto pushes it (and the footer rule/meta) to the base of
   the tall card, recreating the mockup's whitespace. */
.landing-letter-signoff {
  display: flex;
  justify-content: flex-end;
  margin: auto 0 clamp(18px, 2.4vw, 30px);
  padding-top: clamp(24px, 3.5vw, 44px);
}

/* Animated wordmark gif (white-on-black), sitting where the black
   signature lockup was. Right-aligned via the signoff's flex-end. */
.landing-letter-signature-gif {
  display: block;
  width: min(680px, 100%);
  height: auto;
  border-radius: 4px;
}

/* Document footer: last updated / date */
.landing-letter-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  color: #0A0A0A;
}

/* Narrow screens: let the text use the full paper width */
@media (max-width: 720px) {
  .landing-letter { min-height: 0; }
  .landing-letter-punchline,
  .landing-letter-body { max-width: 100%; }
}

/* enter → sits ON the paper, bottom-right, so black reads cleanly.
   Revealed after 5s (landing.js adds .is-ready). Escape / click-to-
   dismiss still work if a short viewport pushes it below the fold. */
.landing-enter {
  align-self: flex-end;
  margin-top: clamp(12px, 1.8vw, 20px);
  border: none;
  background: none;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--font-subhead);
  font-weight: 700;
  color: #0A0A0A;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.landing-enter.is-ready {
  opacity: 1;
  pointer-events: auto;
}

.landing-enter:hover { text-decoration: underline; }