/* ===========================================================================
   landing-anim.css — the four scroll-animated landing explorations
   (/landing-3, /landing-6, /landing-7, /landing-8).
   ---------------------------------------------------------------------------
   Loaded AFTER landing-2.css + landing-3.css, so it reuses everything they
   provide: the Lottie tiling (.dc-h3-lottie/.dc-h3-tile + windowing math), the
   pixel-grid fallback (.dc-h3-grid + dc-cellmorph), the in-view reveal
   (.dc-reveal, view-timeline), the brand classes (.dc-gradient, .dc-gradient-text,
   .dc-cta, .dc-dark, .dc-on-dark*, .dc-marquee*, .dc-eyebrow) and @keyframes
   dc-fade-in. The global JS bundle (Lenis + GSAP/ScrollTrigger + the .in-view
   IntersectionObserver + the <dc-*> custom elements) animates this markup the
   same way it animates landing-4 — it re-scans set:html content.

   This file adds ONLY the per-archetype layout classes (`.dc-an-*`). No new
   arbitrary Tailwind utilities (there is no JIT); all geometry is explicit here.
   Every motion has a reduced-motion fallback that leaves content visible.
   =========================================================================== */

/* --- Shared: scroll cue + section rhythm ---------------------------------- */
.dc-an-cue {
  display: inline-flex; align-items: center; gap: .5rem;
  letter-spacing: .14em;
}
.dc-an-cue::after {
  content: ""; width: 1px; height: 2.5rem;
  background: currentColor; opacity: .5;
  animation: dc-an-cue-pulse 2.4s ease-in-out infinite;
}
@keyframes dc-an-cue-pulse { 0%,100% { transform: scaleY(.4); opacity: .25; } 50% { transform: scaleY(1); opacity: .7; } }

/* Headline-reveal safety: the letter-scramble <dc-atom-text-hero-title> starts
   its .js-title at opacity-0 and the bundle reveals it. This guarantees the
   headline appears even if that controller never runs (mirrors the homepage). */
.dc-an-scramble .js-title { animation: dc-fade-in 1.1s .35s ease both; }

/* =========================================================================
   landing-3 — "Scramble manifesto": centred letter-scramble headline over a
   full-width Lottie band (NOT the homepage's side-by-side split).
   ========================================================================= */
.dc-an-heroc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1.5rem;
  padding: 7rem 1rem 3rem;
}
@media (min-width: 1024px) { .dc-an-heroc { padding: 9rem 2.5rem 4rem; } }
.dc-an-heroc .js-title,
.dc-an-heroc .dc-an-title { max-width: 18ch; }
/* full-width animated Lottie band beneath the headline */
.dc-an-band {
  position: relative; width: 100%; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-top: 1px solid var(--color-border-primary, #6e84a8);
}
@media (min-width: 1024px) { .dc-an-band { aspect-ratio: auto; height: min(68vh, 56rem); } }

/* --- Enabling-AI: "solutions"-style INSET media block --------------
   The pixel/Lottie field is a CONTAINED block with side gutters + vertical
   breathing room (not the old full-bleed band), and it reveals with a smooth
   scale + fade as it scrolls into view. The gutters line up with the hero
   copy's padding (1rem mobile / 2.5rem desktop) so the block sits inside the
   same column rhythm. */
.dc-an-bandwrap { padding: 0 1rem 2.5rem; }
@media (min-width: 1024px) { .dc-an-bandwrap { padding: 0 2.5rem 5rem; } }
.dc-an-band--inset { border-top: 0; }          /* floating block → drop the full-width divider */
/* One-time entrance on load. The block now sits in the first fold, so a scroll-driven
   view() reveal would render it half-faded on load. Comes in just after the headline. */
.dc-anim-block {
  transform-origin: 50% 72%;
  animation: dc-anim-block-in .9s .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes dc-anim-block-in {
  from { opacity: 0; transform: translateY(42px) scale(.955); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   landing-6 — "Deployed-Intelligence" editorial scroll-narrative.
   ========================================================================= */
.dc-an-narrative { max-width: 60rem; margin-inline: auto; }
.dc-an-stat-num {
  font-size: clamp(3rem, 9vw, 8rem); line-height: .92; letter-spacing: -.03em;
}
/* big problem-stat callouts */
.dc-an-callout { font-size: clamp(1.75rem, 4.5vw, 3.25rem); line-height: 1.05; letter-spacing: -.02em; }
/* 3 pillars */
.dc-an-pillars { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--color-border-primary, #6e84a8); border: 1px solid var(--color-border-primary, #6e84a8); }
@media (min-width: 768px) { .dc-an-pillars { grid-template-columns: repeat(3, 1fr); } }
.dc-an-pillar { background: var(--color-surface-brand-primary, #fbfcfe); padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-height: 16rem; }
.dc-an-pillar-i { font-feature-settings: "tnum"; }
/* 5-step pipeline */
.dc-an-steps { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--color-border-primary, #6e84a8); border: 1px solid var(--color-border-primary, #6e84a8); }
@media (min-width: 1024px) { .dc-an-steps { grid-template-columns: repeat(5, 1fr); } }
.dc-an-step { background: var(--color-surface-brand-primary, #fbfcfe); padding: 1.75rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; min-height: 13rem; }

/* =========================================================================
   landing-7 — "Full-bleed Lottie immersion": the Lottie fills the viewport.
   ========================================================================= */
.dc-an-fullbleed { position: relative; width: 100%; min-height: 100svh; overflow: hidden; background: #04204a; }
.dc-an-fullbleed .dc-h3-grid,
.dc-an-fullbleed .dc-h3-lottie { position: absolute; inset: 0; }
/* Strong, text-anchored scrim so white copy reads over the bright Lottie blocks.
   Layer 1: left-anchored Oxford-blue wash (text is left-aligned) — near-solid where
   the copy sits, fading to transparent so the Lottie stays vibrant on the right.
   Layer 2: bottom vignette so the centred-over-grid mobile layout also stays legible. */
.dc-an-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(1,28,70,.94) 0%, rgba(1,28,70,.82) 30%, rgba(1,28,70,.42) 58%, rgba(1,28,70,.12) 82%, rgba(1,28,70,0) 100%),
    linear-gradient(0deg, rgba(1,28,70,.7) 0%, rgba(1,28,70,.15) 38%, rgba(1,28,70,0) 60%);
}
.dc-an-fb-overlay {
  position: relative; z-index: 2;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  gap: 1.75rem; padding: 6rem 1rem 3rem; max-width: 80rem; margin-inline: auto;
}
@media (min-width: 1024px) { .dc-an-fb-overlay { padding: 7rem 2.5rem 4rem; } }
.dc-an-fb-overlay .dc-an-title { max-width: 16ch; text-shadow: 0 1px 24px rgba(1,28,70,.55); }
/* brighter-than-dc-on-dark body copy for text sitting directly on media */
.dc-an-on-media { color: rgba(255,255,255,.92); text-shadow: 0 1px 16px rgba(1,28,70,.5); }

/* =========================================================================
   landing-6 (rebuilt) — "Pixel-grid kinetic": the shimmering DesiCrew colour
   field is the hero canvas; brand colour-block pillars below.
   ========================================================================= */
.dc-an-field-hero { position: relative; width: 100%; min-height: 86svh; overflow: hidden; background: #04204a; display: flex; }
.dc-an-field-hero .dc-h3-grid { position: absolute; inset: 0; }   /* always-on shimmering field (no Lottie layer here) */
/* radial scrim for the CENTRED hero copy (the left-anchored .dc-an-scrim is for landing-7) */
.dc-an-scrim--center {
  background: radial-gradient(125% 95% at 50% 46%, rgba(1,28,70,.5) 0%, rgba(1,28,70,.72) 52%, rgba(1,28,70,.92) 100%);
}
.dc-an-fh-overlay {
  position: relative; z-index: 2; width: 100%; max-width: 64rem; margin-inline: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
  padding: 8rem 1.5rem 4rem;
}
.dc-an-fh-overlay .dc-an-title { text-shadow: 0 1px 28px rgba(1,28,70,.6); }
/* flat brand colour-block pillars */
.dc-an-cblocks { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .dc-an-cblocks { grid-template-columns: repeat(3, 1fr); } }
.dc-an-cblock { padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-height: 18rem; }

/* =========================================================================
   landing-8 (rebuilt) — "Bento": interlocking tiles, one a live Lottie tile.
   1px gaps over a border-coloured bed give the sharp interlocking-block look.
   ========================================================================= */
.dc-an-bento {
  display: grid; gap: 1px;
  background: var(--color-border-primary, #6e84a8);
  border: 1px solid var(--color-border-primary, #6e84a8);
  grid-template-columns: 1fr;
  grid-template-areas: "head" "lot" "s1" "s2";
}
@media (min-width: 640px) {
  .dc-an-bento { grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "lot lot" "s1 s2"; }
}
@media (min-width: 1024px) {
  .dc-an-bento { grid-template-columns: 1.35fr 1fr 1fr; grid-template-areas: "head head lot" "s1 s2 lot"; }
}
.dc-an-tile {
  background: var(--color-surface-brand-primary, #fbfcfe);
  padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 1rem;
  justify-content: flex-end; min-height: 12rem;
  animation: dc-an-tile-in .6s ease both;
}
.dc-an-tile--head { justify-content: center; gap: 1.25rem; }
.dc-an-tile--stat { justify-content: space-between; }
.dc-an-tile--lottie { position: relative; overflow: hidden; padding: 0; background: #04204a; min-height: 20rem; }
.dc-an-tile-h { font-size: clamp(2.25rem, 5.5vw, 4.75rem); line-height: .95; letter-spacing: -.03em; }
.dc-an-stat-sm { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -.02em; }
@keyframes dc-an-tile-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dc-an-bento .dc-an-tile:nth-child(2) { animation-delay: .08s; }
.dc-an-bento .dc-an-tile:nth-child(3) { animation-delay: .16s; }
.dc-an-bento .dc-an-tile:nth-child(4) { animation-delay: .24s; }

/* =========================================================================
   Reduced motion — kill the bespoke motion; content stays visible.
   (landing-3.css already neutralises .dc-h3-* and hides .dc-h3-lottie here.)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .dc-an-scramble .js-title { animation: none; opacity: 1; }
  .dc-an-cue::after { animation: none; }
  .dc-an-tile { animation: none; opacity: 1; transform: none; }
  .dc-anim-block { animation: none; opacity: 1; transform: none; }
}