/*
 * Homepage route layer placeholder for the incremental redesign.
 * Legacy section and workflow presentation remains in styles.css until task 7.3.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — warm almond editorial layer
   Route-specific composition only. Colour and geometry come from tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero text must sit above any decorative layer placed behind it. */
#hero {
  position: relative;
}

.hero-content {
  position: relative;
  z-index: var(--z-content);
}

/* ── Decorative chapter bands ───────────────────────────────────────────────
   Each band is a quiet page-break between sections. Bands hold decorative
   scenes only, never controls, so the depth engine can run its parallax
   without colliding with an interactive element.
   ------------------------------------------------------------------------- */
.chapter-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-block: var(--space-6);
  padding-inline: var(--space-4);
  pointer-events: none;
}

.chapter-band__scene {
  /* The scene root carries grid-area: scene for the shared depth layout. In
     this band there is no such named area, so pin it to the single column and
     centre it explicitly, otherwise it auto-places into an implicit track and
     drifts to the trailing edge. */
  grid-column: 1;
  justify-self: center;
  margin-inline: auto;
  inline-size: min(100%, 34rem);
}

.chapter-band--wide .chapter-band__scene {
  inline-size: min(100%, var(--content-max));
}

/* Chapter marker: a small editorial label that gives the scroll a book rhythm. */
.chapter-marker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chapter-marker::before,
.chapter-marker::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background-color: var(--color-border-subtle);
}

.chapter-marker__number {
  color: var(--color-brand-gold-700);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  .chapter-band {
    padding-block: var(--space-5);
  }
}


/* ── Two ways to learn ──────────────────────────────────────────────────────
   The two pillars presented as an explicit choice. Warm parchment cards with a
   gilded edge; the German label is decorative and hidden from assistive tech,
   so the heading below it carries the meaning.
   ------------------------------------------------------------------------- */
.two-paths {
  padding-block: var(--space-7);
}

.two-paths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5);
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.two-paths__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-inset), var(--shadow-raised);
}

/* Gilded fore-edge: the card reads as a page rather than a tile. */
.two-paths__card::before {
  content: "";
  position: absolute;
  inset-block: var(--space-5);
  inset-inline-start: 0;
  inline-size: var(--space-1);
  border-start-end-radius: var(--radius-pill);
  border-end-end-radius: var(--radius-pill);
  background-color: var(--color-brand-gold-500);
}

.two-paths__marker {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.two-paths__glyph {
  font-family: var(--font-display);
  font-size: var(--text-step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-gold-700);
}

.two-paths__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-step-2);
  line-height: var(--line-heading);
  color: var(--color-text-primary);
}

.two-paths__text {
  margin: 0;
  max-inline-size: var(--reading-max);
  color: var(--color-text-secondary);
  line-height: var(--line-body);
}

.two-paths__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-primary);
}

/* Checkmark is decorative; the list text carries the meaning. */
.two-paths__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.two-paths__list li::before {
  content: "\2713";
  color: var(--color-brand-gold-700);
  font-weight: 700;
}

.two-paths__cta {
  align-self: start;
  margin-block-start: auto;
  min-block-size: var(--control-min-block);
}

@media (max-width: 40rem) {
  .two-paths__card {
    padding: var(--space-5);
  }

  .two-paths__cta {
    align-self: stretch;
    text-align: center;
  }
}


/* Keep the hero card above decorative layers. The literal hardback was removed:
   the page itself now carries the book metaphor. */
.hero-visual {
  position: relative;
  z-index: var(--z-content);
}

/* The shared motion layer normally smooth-scrolls anchors. During the covered
   midpoint of a page turn the destination must replace the current page in one
   frame, otherwise the leaf uncovers a document that is still travelling. */
html[data-page-turn-commit] {
  scroll-behavior: auto !important;
}


/* ── Editorial page turn ───────────────────────────────────────────────────
   One fixed, pointer-inert parchment leaf. Broad movement comes from clipping
   the leaf—not throwing the document around—while a restrained 5deg Y-axis
   tilt, fold and warm shadow provide depth. Native scroll remains untouched.
   ------------------------------------------------------------------------- */
.page-turn-stage {
  --pt-progress: 0;
  --pt-peel: 0px;
  position: fixed;
  inset: 0;
  z-index: var(--z-status);
  overflow: clip;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  perspective: 75rem;
  transform-style: preserve-3d;
  contain: layout style paint;
}

.page-turn-stage[data-pt-phase] {
  visibility: visible;
  opacity: 1;
}

.page-turn-stage:not([data-pt-phase]) {
  visibility: visible;
  opacity: var(--pt-progress);
}

.page-turn-stage:not([data-pt-phase])[style*="--pt-progress: 0.0000"],
.page-turn-stage:not([data-pt-phase]):not([style*="--pt-progress"]) {
  visibility: hidden;
}

.page-turn-stage__leaf,
.page-turn-stage__fold,
.page-turn-stage__edge,
.page-turn-stage__shadow {
  position: absolute;
  display: block;
  pointer-events: none;
}

.page-turn-stage__leaf {
  inset: 0;
  transform-origin: right center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background:
    linear-gradient(
      105deg,
      var(--motif-highlight),
      transparent 17%,
      transparent 72%,
      var(--motif-shadow)
    ),
    linear-gradient(
      180deg,
      var(--color-surface-raised),
      var(--color-surface-canvas)
    );
  box-shadow: var(--shadow-floating);
  clip-path: inset(0 0 0 100%);
  transform: perspective(75rem) rotateY(-5deg) scaleX(0.985);
  transition-property: clip-path, transform;
  transition-duration: 220ms;
  transition-timing-function: var(--ease-standard);
}

.page-turn-stage[data-pt-phase="cover"] .page-turn-stage__leaf {
  clip-path: inset(0);
  transform: perspective(75rem) rotateY(0deg) scaleX(1);
}

.page-turn-stage[data-pt-phase="uncover"] .page-turn-stage__leaf {
  transform-origin: left center;
  clip-path: inset(0 100% 0 0);
  transform: perspective(75rem) rotateY(5deg) scaleX(0.985);
}

.page-turn-stage[data-pt-direction="up"] .page-turn-stage__leaf {
  transform-origin: left center;
  clip-path: inset(0 100% 0 0);
  transform: perspective(75rem) rotateY(5deg) scaleX(0.985);
}

.page-turn-stage[data-pt-direction="up"][data-pt-phase="cover"]
  .page-turn-stage__leaf {
  clip-path: inset(0);
  transform: perspective(75rem) rotateY(0deg) scaleX(1);
}

.page-turn-stage[data-pt-direction="up"][data-pt-phase="uncover"]
  .page-turn-stage__leaf {
  transform-origin: right center;
  clip-path: inset(0 0 0 100%);
  transform: perspective(75rem) rotateY(-5deg) scaleX(0.985);
}

/* The fold travels only during the cover half. It fades before the destination
   is uncovered, avoiding a discontinuous edge at the midpoint. */
.page-turn-stage__fold {
  inset-block: 0;
  inset-inline-start: 100%;
  inline-size: var(--space-6);
  background: linear-gradient(
    90deg,
    transparent,
    var(--motif-shadow),
    var(--motif-highlight),
    transparent
  );
  opacity: 0;
  transform: translateX(-6px) rotateY(-4deg);
  transition-property: inset-inline-start, opacity;
  transition-duration: 220ms;
  transition-timing-function: var(--ease-standard);
}

.page-turn-stage[data-pt-phase="cover"] .page-turn-stage__fold {
  inset-inline-start: 0;
  opacity: 0.9;
}

.page-turn-stage[data-pt-phase="uncover"] .page-turn-stage__fold {
  opacity: 0;
}

.page-turn-stage[data-pt-direction="up"] .page-turn-stage__fold {
  inset-inline-start: 0;
  transform: translateX(6px) rotateY(4deg);
}

.page-turn-stage[data-pt-direction="up"][data-pt-phase="cover"]
  .page-turn-stage__fold {
  inset-inline-start: calc(100% - var(--space-6));
}

.page-turn-stage__edge {
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: var(--space-2);
  background: linear-gradient(
    90deg,
    var(--motif-edge),
    var(--color-brand-gold-400),
    transparent
  );
  opacity: 0;
  transition: opacity 220ms var(--ease-standard);
}

.page-turn-stage[data-pt-phase="cover"] .page-turn-stage__edge {
  opacity: var(--motif-reflection-opacity);
}

.page-turn-stage__shadow {
  inset: 0;
  background: var(--motif-shadow);
  opacity: 0;
  transition: opacity 220ms var(--ease-standard);
}

.page-turn-stage[data-pt-phase="cover"] .page-turn-stage__shadow {
  opacity: 1;
}

/* Scroll proximity exposes only a narrow curled fore-edge. The page never
   blocks reading while the user is simply moving through a section. */
.page-turn-stage:not([data-pt-phase]) .page-turn-stage__leaf {
  clip-path: inset(0 0 0 calc(100% - var(--pt-peel)));
  transform-origin: right center;
  transform: perspective(75rem) translateY(-3px) rotateY(-3deg);
  transition: none;
}

.page-turn-stage:not([data-pt-phase])[data-pt-scroll-direction="up"]
  .page-turn-stage__leaf {
  clip-path: inset(0 calc(100% - var(--pt-peel)) 0 0);
  transform-origin: left center;
  transform: perspective(75rem) translateY(3px) rotateY(3deg);
}

.page-turn-stage:not([data-pt-phase]) .page-turn-stage__fold,
.page-turn-stage:not([data-pt-phase]) .page-turn-stage__shadow {
  display: none;
}

.page-turn-stage:not([data-pt-phase]) .page-turn-stage__edge {
  opacity: var(--pt-progress);
}

/* Major sections read as separate paper leaves through a quiet lower edge.
   No dimensions, content stacking, or section transforms are changed. */
[data-reading-page] {
  position: relative;
  box-shadow: inset 0 calc(var(--border-width) * -1) 0 var(--color-border-subtle);
}

[data-reading-page]::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: calc(var(--border-width) * 2);
  background: linear-gradient(
    180deg,
    transparent,
    var(--motif-edge),
    transparent
  );
  opacity: var(--motif-reflection-opacity);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce), (max-width: 40rem) {
  .page-turn-stage {
    display: none !important;
  }
}

@media (prefers-reduced-data: reduce) {
  .page-turn-stage {
    display: none !important;
  }
}