/* Mobile compatibility + motion tuning (shared, loaded on every route).

   Three responsibilities only:
   1. Declare the document light-only so Android / Samsung Internet auto dark
      mode cannot reinterpret the approved Aeronovate palette.
   2. Give html / body / #root an explicit approved light base surface instead
      of relying on transparent browser defaults.
   3. Reduce reveal distance and duration on small screens. Same motion
      language as desktop, just shorter and quicker.

   No colour, copy, layout or desktop change. */

:root {
  color-scheme: only light;
}

html {
  color-scheme: only light;
  background-color: var(--silver, #f4f9fb);
  -webkit-text-size-adjust: 100%;
}

body,
#root,
#app {
  background-color: var(--silver, #f4f9fb);
}

/* ---------- mobile motion tuning ---------- */
@media (max-width: 860px) {
  /* Shared reveal families: keep travel inside the 12-24px band and the
     duration inside the 400-650ms band so a flick never outruns the motion. */
  .reveal,
  .cs-reveal,
  .wb,
  .wc,
  .wd,
  .we,
  .wf,
  .sw2,
  .ht {
    --reveal-y: 14px;
  }

  .cs-reveal {
    transform: translateY(14px);
  }
  .cs-reveal.is-in {
    transition-duration: 520ms;
  }

  .cs-flow-stage {
    transform: translateY(10px);
  }
  .cs-flow.is-in .cs-flow-stage {
    transition-duration: 480ms;
  }

  /* Case-study copy sections stay content driven on mobile: never viewport
     sized, never reserving space for motion. */
  .cs-section,
  .cs-split,
  .cs-split-text,
  .cs-split-media,
  .cs-hero-head {
    min-height: 0;
    height: auto;
  }

  /* Reveal wrappers affect motion only, never page geometry. */
  .cs-reveal,
  [data-sr],
  [data-mr],
  [data-wm-group] {
    min-height: 0;
  }
}

/* Case-study artwork on mobile: complete composition, intrinsic ratio, no
   ProjectCard crop, no fixed heights, space reserved before the image loads. */
@media (max-width: 720px) {
  .cs-media.is-natural,
  .cs-gallery.is-stacked .cs-media {
    aspect-ratio: auto;
  }
  .cs-media.is-natural img {
    height: auto;
  }
}

/* Once a reveal has settled, hand the layer back to the browser. */
.is-in,
[data-sr-in],
.wm-in,
.mr-in,
.is-revealed {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  /* Content visibility is never optional. */
  .reveal,
  .cs-reveal,
  .cs-flow-stage,
  [data-sr],
  [data-mr],
  [data-wm-anim],
  .split-word > span,
  .gold-seg {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Homepage flagship fold media: keep the grid inside the panel on Safari,
   where the images' intrinsic width can push the right column past the edge. */
img[src*="/assets/kokan-"] {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}
div:has(> img[src*="/assets/kokan-"]) {
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  div:has(> img[src*="/assets/kokan-"]) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
  div:has(> img[src*="/assets/kokan-"]) > img:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}