/* ============================================================
   Detourers — Vapor Clouds + Fog-Reveal (assets/fog.css)
   Synthesized final spec. Depends on nothing else; safe to link
   from all 5 pages' <helmet> immediately after the Google Fonts
   <link>. Reuses the drift/driftback keyframes already defined
   inline in each page's <style> block — does NOT redefine them
   here to avoid duplicate/competing @keyframes; instead this file
   defines the NEW keyframes (cloud-bob, cloud-pulse) plus all
   .dt-cloud* and .dt-fog* rules referenced by fog-reveal.js and
   the new cloud markup.
   ============================================================ */

/* ---------- CLOUD LAYER (replaces old box-shadow "blob" divs) ---------- */

/* Zero-size anchor. All visible mass comes from layered, blurred
   box-shadows — no hard silhouette, no rounded-rect edge, reads as
   vapor rather than a sticker. This is the box-shadow-stack technique,
   same family of trick the old blobs used, just re-tuned: more, softer,
   lower-opacity layers + an actual blur() filter on top for true
   feathered edges (the old blobs used only 0.4-0.6px blur, too crisp). */
.dt-cloud{
  position:absolute;
  width:4px; height:4px;
  background:transparent;
  border-radius:50%;
  pointer-events:none;
  will-change:transform;
  animation: cloud-bob var(--bob-dur, 14s) ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
}

/* Light vapor — for use over photo hero skies */
.dt-cloud--light{
  box-shadow:
    0     0    0 26px rgba(255,255,255,.55),
    38px  6px  0 20px rgba(255,255,255,.42),
    -40px 4px  0 22px rgba(255,255,255,.40),
    14px -14px 0 16px rgba(255,255,255,.34),
    -18px -10px 0 15px rgba(255,255,255,.30),
    64px  10px 0 14px rgba(255,255,255,.22),
    -66px 8px  0 13px rgba(255,255,255,.20);
  filter: blur(9px);
  opacity: var(--cloud-op, .8);
  animation: cloud-bob var(--bob-dur, 14s) ease-in-out infinite,
             cloud-pulse var(--pulse-dur, 11s) ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s), var(--pulse-delay, 0s);
}

/* Tinted/dim vapor — for solid-color accent sections (e.g. the
   dark green #book band). Same construction, lower contrast so it
   reads as atmosphere, not a sticker on a flat color. */
.dt-cloud--tint{
  box-shadow:
    0    0    0 24px rgba(255,255,255,.14),
    36px 5px  0 18px rgba(255,255,255,.11),
    -38px 4px 0 20px rgba(255,255,255,.10),
    12px -12px 0 15px rgba(255,255,255,.08),
    60px 9px  0 13px rgba(255,255,255,.06);
  filter: blur(10px);
  opacity: var(--cloud-op, .8);
  animation: cloud-bob var(--bob-dur, 14s) ease-in-out infinite,
             cloud-pulse var(--pulse-dur, 11s) ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s), var(--pulse-delay, 0s);
}

/* Size variants — scale the whole puff without duplicating shadows */
.dt-cloud--sm{ transform: scale(.68); }
.dt-cloud--md{ transform: scale(1); }
.dt-cloud--lg{ transform: scale(1.45); }

/* Wrapper that performs the actual horizontal drift. Put drift/driftback
   animation directly on this element via inline style (duration/delay
   vary per instance, so they stay inline rather than as modifier classes).
   Keeping width/height at 1px means the drift transform's translateX
   values (already tuned for -30vw..130vw in each page's existing
   @keyframes drift/driftback) continue to work unmodified. */
.dt-cloud-wrap{
  position:absolute;
  left:0;
  width:1px; height:1px;
  pointer-events:none;
}

@keyframes cloud-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.015); }
}
@keyframes cloud-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .9; }
}

/* ---------- FOG-REVEAL ON SCROLL ---------- */

/* Base state: section starts slightly scaled down, invisible, and
   "under fog"; JS adds .dt-reveal--in via IntersectionObserver once
   the section is ~15% visible, which triggers this transition. Only
   opacity/transform are animated (both are compositor-only, no layout
   or paint cost), so this is cheap even with many sections observed
   at once. */
.dt-reveal{
  position: relative;
  opacity: 0;
  transform: scale(.97);
  transition: opacity 900ms cubic-bezier(.22,.7,.25,1),
              transform 900ms cubic-bezier(.22,.7,.25,1);
  will-change: opacity, transform;
}
.dt-reveal.dt-reveal--in{
  opacity: 1;
  transform: scale(1);
}

/* The fog band itself: a horizontal gradient strip that sweeps across
   and off the section as it reveals — this is what makes the reveal
   read as "fog physically clearing sideways" rather than a generic
   fade/slide-up. Sits above section content (z-index:4) but below the
   sticky nav (z-index:60 in every page). Must be inserted as the FIRST
   child of the section so it paints above the section's own content
   but the ambient .dt-cloud-wrap layers (also absolutely positioned,
   inserted after it in DOM order in the accent sections) still sit on
   top of it — see fog-reveal.js / HTML wiring notes. */
.dt-fog{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(251,247,236,0)   0%,
    rgba(251,247,236,.55) 35%,
    rgba(251,247,236,.92) 50%,
    rgba(251,247,236,.55) 65%,
    rgba(251,247,236,0)   100%
  );
  transform: translateX(0%);
  opacity: 1;
  transition: transform 1100ms cubic-bezier(.22,.7,.25,1) 80ms,
              opacity 1100ms ease 400ms;
}

/* Dark variant for sections on the green #book gradient background,
   so the fog doesn't flash a pale cream box over a dark section. */
.dt-fog--dark{
  background: linear-gradient(
    90deg,
    rgba(35,48,25,0)    0%,
    rgba(35,48,25,.5)   35%,
    rgba(35,48,25,.88)  50%,
    rgba(35,48,25,.5)   65%,
    rgba(35,48,25,0)    100%
  );
}

.dt-reveal--in .dt-fog{
  transform: translateX(115%);
  opacity: 0;
}

/* Ensure real section content stacks above the fog sweep + clouds */
.dt-reveal > *:not(.dt-fog):not(.dt-cloud-wrap){ position:relative; z-index:1; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .dt-cloud,
  .dt-cloud-wrap{
    animation: none !important;
  }
  .dt-reveal,
  .dt-reveal .dt-fog{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}