/* landing.css — feature 010 — public landing page (Pages/Index.cshtml).

   Loaded only on the root route via @section Head in Index.cshtml. Pairs
   with card-art.css (also opt-in on this route) so the hero/wall/recipient
   mini-replicas render. All values from tokens.css; no literals beyond
   shared rgba shadow stacks already mirrored in card-art.css for the
   .gilt-frame double-border. */

/* ---------- Visually-hidden utility (a11y captions on card-wall tiles).
   Mirrors dashboard.css — duplicated here so the landing route doesn't
   need to load dashboard.css. */
.landing .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Shared primitives ------------------------------------------ */

/* Gilt double-border frame — parallels .art-frame from card-art.css but
   sized for component-natural padding instead of the --art-base ramp.
   Used by pricing tier cards and the recipient phone outline. */
.gilt-frame {
  position: relative;
  background: linear-gradient(145deg, var(--cream-2), var(--cream-3));
  box-shadow:
    inset 0 0 0 1px rgba(201, 163, 104, 0.30),
    inset 0 0 0 6px  rgba(253, 247, 234, 0.85),
    inset 0 0 0 7px  rgba(201, 163, 104, 0.25);
  border-radius: 4px;
}

/* Gold-bordered circle — parallels .art-monogram from card-art.css.
   Used by the numbered "how it works" steps. */
.gilt-circle {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 163, 104, 0.10), transparent 70%);
  position: relative;
  flex-shrink: 0;
}
.gilt-circle::before, .gilt-circle::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
}
.gilt-circle::before { top: -2px; left: 50%; transform: translateX(-50%); }
.gilt-circle::after  { bottom: -2px; left: 50%; transform: translateX(-50%); }

/* ---------- Page wrapper ------------------------------------------------ */

.landing {
  --landing-rule: linear-gradient(to right, transparent, var(--gold), transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  color: var(--ink);
}

.landing__section-eyebrow {
  font-family: var(--font-serif);
  color: var(--gold-deep);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0;
}

.landing__section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: var(--line-height-tight);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--space-2) 0 var(--space-3);
  text-wrap: balance;
}

.landing__section-lede {
  font-family: var(--font-serif);
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.5;
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

/* ---------- 1. Hero ----------------------------------------------------- */

.landing__hero {
  position: relative;
  padding: clamp(40px, 6vw, 88px) var(--space-5) var(--space-7);
  display: grid;
  gap: var(--space-7);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 880px) {
  .landing__hero { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-6); }
}

.landing__hero-copy { display: flex; flex-direction: column; gap: var(--space-4); }

.landing__hero-welcome {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--gold-deep);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.landing__hero-headline {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 76px);
  line-height: 1.02;
  /* Parisienne's leading capitals carry a swash that overhangs the
     glyph box. Pair `padding-inline-start` with matching negative
     `margin-inline-start` so the gradient (clipped to text via
     `background-clip: text`) extends far enough left to paint the
     overhang — without visually shifting the headline. */
  padding-inline-start: 0.12em;
  margin: 0 0 0 -0.12em;
  text-wrap: balance;
  background: linear-gradient(
    120deg,
    var(--gold-deep) 0%,
    #b08a4a 30%,
    var(--gold) 50%,
    #b08a4a 70%,
    var(--gold-deep) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--gold-deep);
}

.landing__hero-sub {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
  max-width: 48ch;
  text-wrap: pretty;
}

.landing__hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.landing__hero-meta {
  font-family: var(--font-serif);
  color: var(--ink-3);
  font-size: 14px;
  margin: var(--space-2) 0 0;
  letter-spacing: 0;
}

/* The fanned card stack — one focal main card with two ghost cards peeking
   at ±6° rotation. Decorative ghost cards are aria-hidden (parent carries
   aria-hidden too). When the hero is data-driven (≥3 published templates,
   the common case), each card hosts an iframe of /templates/{id}/preview;
   otherwise CardMiniReplica envelopes fill the slots. Same visual + motion
   choreography either way. */
.landing__hero-stack {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 5 / 7;
  margin: 0 auto;
  isolation: isolate;
}

.landing__hero-stack-card {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 18px 36px rgba(58, 46, 42, 0.18));
  transition: transform var(--motion-standard) var(--motion-ease);
  background: var(--cream);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.landing__hero-stack-card--main {
  z-index: 3;
  transform: rotate(-1.5deg);
}

.landing__hero-stack-card--ghost-left {
  z-index: 1;
  transform: translate(-12%, 4%) rotate(-7deg) scale(0.78);
  opacity: 0.92;
}

.landing__hero-stack-card--ghost-right {
  z-index: 2;
  transform: translate(12%, 6%) rotate(6deg) scale(0.78);
  opacity: 0.92;
}

/* Iframe variant — sits flush inside the .landing__hero-stack-card box.
   pointer-events: none + tabindex="-1" + aria-hidden="true" on the iframe
   keep this purely decorative; the visible CTAs do the real navigating.
   Mirrors the .landing__card-wall-tile-frame contract below. */
.landing__hero-stack-card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  background: var(--cream);
}

@media (max-width: 560px) {
  .landing__hero-stack { aspect-ratio: 4 / 5; max-width: 320px; }
  .landing__hero-stack-card--ghost-left  { transform: translate(-9%, 4%) rotate(-7deg) scale(0.74); }
  .landing__hero-stack-card--ghost-right { transform: translate( 9%, 6%) rotate( 6deg) scale(0.74); }
}

/* Scroll-driven fan-out. Start tight-stacked (deck), separate over the
   first ~60vh of scroll into the fanned end-state above. The end-state
   transform values intentionally match the static rules above so:
     • browsers without scroll-driven animations (older Firefox/Safari)
       skip the @supports block and show the fanned layout from page load,
     • reduced-motion users below get the same fanned layout, no motion,
     • supported browsers start as a deck and animate to the fanned state,
       which is exactly what users without scroll support already see. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .landing__hero-stack-card--main {
      animation: hero-deck-main linear both;
      animation-timeline: scroll(root);
      animation-range: 0 60vh;
    }
    .landing__hero-stack-card--ghost-left {
      animation: hero-deck-left linear both;
      animation-timeline: scroll(root);
      animation-range: 0 60vh;
    }
    .landing__hero-stack-card--ghost-right {
      animation: hero-deck-right linear both;
      animation-timeline: scroll(root);
      animation-range: 0 60vh;
    }

    @media (max-width: 560px) {
      .landing__hero-stack-card--ghost-left  { animation-name: hero-deck-left-sm; }
      .landing__hero-stack-card--ghost-right { animation-name: hero-deck-right-sm; }
    }
  }
}

@keyframes hero-deck-main {
  from { transform: rotate(0deg) scale(0.94); }
  to   { transform: rotate(-1.5deg) scale(1); }
}
@keyframes hero-deck-left {
  from { transform: translate(0, 0) rotate(-1deg) scale(0.86); opacity: 0.55; }
  to   { transform: translate(-12%, 4%) rotate(-7deg) scale(0.78); opacity: 0.92; }
}
@keyframes hero-deck-right {
  from { transform: translate(0, 0) rotate(1deg) scale(0.86); opacity: 0.55; }
  to   { transform: translate(12%, 6%) rotate(6deg) scale(0.78); opacity: 0.92; }
}
@keyframes hero-deck-left-sm {
  from { transform: translate(0, 0) rotate(-1deg) scale(0.82); opacity: 0.55; }
  to   { transform: translate(-9%, 4%) rotate(-7deg) scale(0.74); opacity: 0.92; }
}
@keyframes hero-deck-right-sm {
  from { transform: translate(0, 0) rotate(1deg) scale(0.82); opacity: 0.55; }
  to   { transform: translate( 9%, 6%) rotate( 6deg) scale(0.74); opacity: 0.92; }
}

/* ---------- 2. Recipient promise strip ---------------------------------- */

.landing__promise {
  background: linear-gradient(180deg, var(--gold-softer), var(--cream-2));
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: var(--space-7) var(--space-5);
  margin: 0;
  text-align: center;
}

.landing__promise-line {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--ink-2);
  margin: 0;
  text-wrap: balance;
  font-weight: 500;
  letter-spacing: 0.01em;
  quotes: none;
}
.landing__promise-line::before, .landing__promise-line::after { content: none; }

/* ---------- 3. Card wall ------------------------------------------------ */

.landing__card-wall {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  width: 100%;
}

.landing__card-wall-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-6);
  max-width: 56ch;
}

/* 3-column grid of iframe-preview tiles (2 rows of 3 = 6 tiles total).
   Each tile renders the actual recipient view via /templates/{id}/preview,
   lazy-loaded. Collapses to 2 columns on tablet, 1 column on phone. */
.landing__card-wall-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 880px) {
  .landing__card-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

@media (max-width: 520px) {
  .landing__card-wall-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

.landing__card-wall-tile {
  position: relative;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--motion-standard) var(--motion-ease),
              box-shadow var(--motion-standard) var(--motion-ease),
              border-color var(--motion-standard) var(--motion-ease);
}

.landing__card-wall-tile:hover,
.landing__card-wall-tile:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px rgba(58, 46, 42, 0.18);
  border-color: rgba(201, 163, 104, 0.32);
}

.landing__card-wall-tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.landing__card-wall-tile-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.landing__card-wall-tile-art {
  position: relative;
  width: 100%;
  background: var(--cream);
  overflow: hidden;
}

/* pointer-events: none lets the parent anchor catch every click on the
   tile, even though an iframe sits on top. tabindex="-1" on the iframe
   keeps focus on the anchor. */
.landing__card-wall-tile-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  background: var(--cream);
}

/* Hover-revealed CTA pill — affordance for the click-through. */
.landing__card-wall-tile-cta {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(201, 163, 104, 0.25);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--motion-standard) var(--motion-ease),
              transform var(--motion-standard) var(--motion-ease);
  pointer-events: none;
  white-space: nowrap;
}

.landing__card-wall-tile:hover .landing__card-wall-tile-cta,
.landing__card-wall-tile:focus-within .landing__card-wall-tile-cta {
  opacity: 1;
  transform: translateY(0);
}

.landing__card-wall-tile-meta {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  background: var(--cream-2);
}

.landing__card-wall-tile-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.landing__card-wall-foot {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* ---------- 4. How it works -------------------------------------------- */

.landing__how {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  width: 100%;
}

.landing__how-header { text-align: center; margin-bottom: var(--space-6); }
.landing__how-header .landing__section-lede { margin-left: auto; margin-right: auto; }

.landing__how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 760px) {
  .landing__how-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

.landing__how-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  position: relative;
}

.landing__how-step-numeral {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--gold-deep);
  line-height: 1;
  letter-spacing: -0.01em;
}

.landing__how-step-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.landing__how-step-body {
  font-family: var(--font-serif);
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
}

/* ---------- 5. For the recipient ---------------------------------------- */

.landing__recipient {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-7);
  align-items: center;
  width: 100%;
}

@media (max-width: 880px) {
  .landing__recipient { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Pure-CSS phone outline — no image. The mini-replica fills the inner area. */
.landing__recipient-phone {
  width: min(100%, 280px);
  aspect-ratio: 9 / 18;
  margin: 0 auto;
  border: 1px solid var(--ink-4);
  border-radius: 28px;
  padding: 14px 10px;
  background: var(--cream);
  box-shadow:
    inset 0 0 0 1px rgba(58, 46, 42, 0.04),
    0 22px 40px -16px rgba(58, 46, 42, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.landing__recipient-phone::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink-4);
  opacity: 0.45;
}

.landing__recipient-phone-art {
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: auto 0;
}

.landing__recipient-copy { display: flex; flex-direction: column; gap: var(--space-3); }

.landing__recipient-copy h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.landing__recipient-copy p {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 48ch;
  text-wrap: pretty;
}

/* ---------- 6. Template index ------------------------------------------ */

.landing__index {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  width: 100%;
}

.landing__index-header { margin-bottom: var(--space-5); max-width: 56ch; }

.landing__index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-7);
  border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
  .landing__index-list { grid-template-columns: 1fr; column-gap: 0; }
}

.landing__index-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.landing__index-row-title {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.landing__index-row-kicker {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3);
  text-align: right;
  letter-spacing: 0.005em;
  flex-shrink: 0;
}

.landing__index-foot {
  margin: var(--space-5) 0 0;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-3);
  font-size: 16px;
}

/* ---------- 7. Pricing -------------------------------------------------- */

.landing__pricing {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  width: 100%;
}

.landing__pricing-header { text-align: center; margin-bottom: var(--space-6); }
.landing__pricing-header .landing__section-lede { margin-left: auto; margin-right: auto; }

.landing__pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

@media (max-width: 880px) {
  .landing__pricing-grid { grid-template-columns: 1fr; }
}

.landing__pricing-tier {
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  background: linear-gradient(145deg, var(--cream-2), var(--cream-3));
  box-shadow:
    inset 0 0 0 1px rgba(201, 163, 104, 0.30),
    inset 0 0 0 6px  rgba(253, 247, 234, 0.85),
    inset 0 0 0 7px  rgba(201, 163, 104, 0.25);
  border-radius: 4px;
}

.landing__pricing-tier--featured {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgba(201, 163, 104, 0.42),
    inset 0 0 0 6px  rgba(253, 247, 234, 0.92),
    inset 0 0 0 7px  rgba(201, 163, 104, 0.34),
    0 18px 32px -16px rgba(58, 46, 42, 0.18);
}

@media (max-width: 880px) {
  .landing__pricing-tier--featured { transform: none; }
}

.landing__pricing-tier-eyebrow {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-3);
  font-size: 15px;
  letter-spacing: 0.005em;
  margin: 0;
}

.landing__pricing-tier-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.landing__pricing-tier-cap {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-2);
  margin: 0;
}

/* Feature 035 — sale price on paid tiers. Serif numeral, italic period. */
.landing__pricing-tier-price {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}

.landing__pricing-tier-price span {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-3);
}

.landing__pricing-tier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink-2);
}

.landing__pricing-tier-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  line-height: 1.4;
}

.landing__pricing-tier-list li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  transform: translateY(-4px);
}

.landing__pricing-tier-cta { margin-top: auto; padding-top: var(--space-3); }

.landing__pricing-tier-note {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-3);
  font-size: 14px;
  margin: 0;
  letter-spacing: 0.005em;
}

/* ---------- 8. Closing flourish ----------------------------------------- */

.landing__closing {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

.landing__closing-rule {
  width: 120px;
  height: 1px;
  background: var(--landing-rule);
  margin: 0 auto var(--space-3);
}

.landing__closing-wordmark {
  font-family: var(--font-script);
  font-size: clamp(48px, 6vw, 64px);
  color: var(--gold-deep);
  line-height: 1;
  margin: 0;
  background: linear-gradient(
    120deg,
    var(--gold-deep) 0%,
    var(--gold) 50%,
    var(--gold-deep) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing__closing-tag {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-2);
  margin: 0;
}

.landing__closing-ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Reduced-motion override ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .landing__hero-stack-card,
  .landing__card-wall-tile { transition: none; }
  .landing__card-wall-tile:hover { transform: none; }
}