/* ============================================================================
   home.css — editorial/technical LAYOUT for the homepage only (body.home).
   Loaded after tailwind.min.css + content.css. Changes layout, hierarchy,
   spacing, and motion only. No font swap and no new brand colors — it reuses
   Inter and the existing palette (Tailwind classes / content.css vars).
   Everything is scoped under body.home so no other page is affected.
   ============================================================================ */

body.home {
  --rule: #e6e8ec;            /* hairline on light */
  --rule-2: #eef0f3;
  --rule-dark: rgba(255, 255, 255, 0.16); /* hairline on the dark hero */
}

/* ---- Typography intent (still Inter) ---- */
body.home .ed-display { letter-spacing: -0.035em; line-height: 0.98; }
body.home .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- Editorial margin-label marker (reuses existing kicker text) ---- */
body.home .ed-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  display: flex; align-items: center; gap: 0.75rem; line-height: 1.4;
}
body.home .ed-label::before {            /* leading hairline tick */
  content: ""; flex: 0 0 auto; width: 26px; height: 1px;
  background: currentColor; opacity: 0.55;
}

/* ---- Asymmetric "manuscript" section grid: narrow label rail + wide body ---- */
@media (min-width: 1024px) {
  body.home .ed { display: grid; grid-template-columns: 3fr 9fr; column-gap: 5rem; }
  body.home .ed--hero { display: grid; grid-template-columns: 1.35fr 1fr; column-gap: 4.5rem; align-items: center; }
}
/* On wide screens, size the text column to its content and let the mockup take the rest. */
@media (min-width: 1536px) {
  body.home .ed--hero { grid-template-columns: max-content 1fr; column-gap: 5.5rem; }
}

/* ---- Hero atmosphere (brand blue only, for depth) ---- */
body.home .hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 20% 30%, rgba(0, 115, 255, 0.30), transparent 70%);
}
body.home .hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

/* hero floating coins (restored, scoped to the homepage hero) */
body.home .hero-coins { position: absolute; inset: 0; pointer-events: none; }
body.home .floating-icon {
  position: absolute; animation: float 7s ease-in-out infinite; opacity: 0.55;
  transition: opacity 0.3s ease;
}
body.home .floating-icon.blur-light { filter: blur(1px); opacity: 0.4; }
body.home .floating-icon.blur-heavy { filter: blur(2px); opacity: 0.28; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(5deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
  75% { transform: translateY(-15px) rotate(3deg); }
}
body.home .floating-icon:nth-child(1) { animation-delay: 0s; }
body.home .floating-icon:nth-child(2) { animation-delay: 1s; }
body.home .floating-icon:nth-child(3) { animation-delay: 2s; }
body.home .floating-icon:nth-child(4) { animation-delay: 3s; }
body.home .floating-icon:nth-child(5) { animation-delay: 4s; }
body.home .floating-icon:nth-child(6) { animation-delay: 5s; }
body.home .floating-icon:nth-child(7) { animation-delay: 1.5s; }
body.home .floating-icon:nth-child(8) { animation-delay: 3.5s; }
body.home .floating-icon:nth-child(9) { animation-delay: 0.5s; }
body.home .floating-icon:nth-child(10) { animation-delay: 2.5s; }
@media (max-width: 768px) { body.home .floating-icon.hide-mobile { display: none; } }

/* hero stat "spec sheet" */
body.home .stat-row { border-top: 1px solid var(--rule-dark); }
body.home .stat-row:last-child { border-bottom: 1px solid var(--rule-dark); }
body.home .stat-num { font-size: clamp(40px, 5.5vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; }

/* ---- Benefits: numbered editorial index (replaces the bento grid) ---- */
body.home .idx-item { border-top: 1px solid var(--rule); transition: transform 0.25s ease; }
body.home .idx-item:hover { transform: translateY(-3px); }
body.home .idx-num {
  font-size: clamp(32px, 3.6vw, 44px); line-height: 0.85; font-weight: 700;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
body.home .idx-item h3 {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.3s ease; display: inline;
}
body.home .idx-item:hover h3 { background-size: 100% 1px; }

/* ---- Buttons: arrow nudge ---- */
body.home .btn-arrow span { display: inline-block; transition: transform 0.2s ease; }
body.home .btn-arrow:hover span { transform: translateX(4px); }

/* ---- Inline link underline draw-in ---- */
body.home .ul-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.3s ease; padding-bottom: 2px;
}
body.home .ul-link:hover { background-size: 100% 1px; }

/* ---- Order book print-table refinements ---- */
body.home .book { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.12); }
body.home .book td { font-variant-numeric: tabular-nums; }

/* ============ Motion (CSS-only, accessible) ============ */
@keyframes home-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* one orchestrated page load on the hero */
body.home .reveal-load { animation: home-fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
body.home .d1 { animation-delay: 0.04s; }
body.home .d2 { animation-delay: 0.12s; }
body.home .d3 { animation-delay: 0.20s; }
body.home .d4 { animation-delay: 0.28s; }
body.home .d5 { animation-delay: 0.36s; }

/* scroll reveals — progressive enhancement; content is fully visible without support */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.home .reveal {
      animation: home-fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .reveal-load,
  body.home .reveal,
  body.home .floating-icon { animation: none; }
}