/* =====================================================================
   STADIA GLOBAL — shape layer: rounded corners for every page
   Loaded last on every page. Delete the <link> to go back to the
   original square/full-bleed blocks — nothing else depends on it.

   Idea: sections become rounded "bays" floating on the page canvas,
   and several corners round themselves *during* the scroll scenes,
   so the rounding is part of the motion, not just decoration.
   ===================================================================== */
:root {
  --r-bay: clamp(24px, 3.2vw, 48px);     /* big section bays */
  --r-frame: clamp(20px, 2.4vw, 36px);   /* photo frames, panels */
  --r-card: 20px;                        /* small cards */
  --bay-gap: clamp(8px, 1.1vw, 16px);    /* space around a bay */
}

/* =====================================================================
   HOME (Figure)
   ===================================================================== */

/* Header: full-width bar at the top, floats into a rounded capsule once you scroll */
.site-header {
  transition: color .4s ease, background-color .4s ease, border-color .4s ease,
              top .5s var(--ease-dossier, cubic-bezier(.16,1,.3,1)), left .5s var(--ease-dossier, cubic-bezier(.16,1,.3,1)),
              right .5s var(--ease-dossier, cubic-bezier(.16,1,.3,1)), height .5s var(--ease-dossier, cubic-bezier(.16,1,.3,1)),
              border-radius .5s var(--ease-dossier, cubic-bezier(.16,1,.3,1));
}
.site-header.is-scrolled {
  top: var(--bay-gap); left: var(--bay-gap); right: var(--bay-gap);
  height: 64px; border-radius: 999px;
  border: 1px solid var(--color-calibration-gray);
  padding-left: var(--spacing-24); padding-right: var(--spacing-24);
}
.site-header.is-scrolled.is-over-dark { border-color: rgba(255, 255, 255, 0.16); }

/* Hero: the photo's corners round off as it retracts into the split */
.h-hero__frame {
  clip-path: inset(
    calc(var(--t, 1) * var(--ci-top)) calc(var(--t, 1) * var(--ci-right))
    calc(var(--t, 1) * var(--ci-bottom)) calc(var(--t, 1) * var(--ci-left))
    round calc(var(--t, 1) * var(--r-frame)));
}
.frame { border-radius: var(--r-frame); }

/* Company panels: three rounded cards with gaps instead of one block */
.h-index { gap: var(--bay-gap); padding: 0 var(--bay-gap); }
.h-panel { border-radius: var(--r-bay); }
.h-panel:focus-visible { outline-offset: -8px; }

/* Black "at a glance" chapter and grey contact band become bays */
.h-glance, .h-contact { margin: var(--bay-gap); border-radius: var(--r-bay); overflow: clip; }

/* Pill-shaped, underlined fields keep their Figure line, gain a soft end */
.field input, .field select, .field textarea { border-radius: 0 0 6px 6px; }

/* =====================================================================
   PRODUCT PAGES (Apple Watch Ultra)
   ===================================================================== */

/* Flood scenes: as the color fills in, the stage pulls in from the edges and rounds into a bay */
[data-theme="ultra"] .pin-stage[data-flood] {
  clip-path: inset(calc(var(--t, 1) * var(--bay-gap)) round calc(var(--t, 1) * var(--r-bay)));
}
/* The orange gallery sits in the same rounded bay */
[data-theme="ultra"] .sb-gallery .pin-stage { clip-path: inset(var(--bay-gap) round var(--r-bay)); }

/* Colored and grey bands float on the black canvas as rounded bays */
[data-theme="ultra"] :is(.ah-words, .ah-numbers, .u-polar, .u-graphite, .u-carbon, .cb-steps, .cb-cta) {
  margin: var(--bay-gap); border-radius: var(--r-bay); overflow: clip;
}
/* Footer shape lives in css/footer.css (shared by every page) */

/* Number blocks on the green band: rounded cards instead of top rules */
[data-theme="ultra"] .ah-numbers dl > div {
  border-top: 0; padding: 28px; border-radius: var(--r-card);
  background: rgba(6, 42, 20, 0.08);
}

/* Steps: rounded step cards and a rounded progress line */
[data-theme="ultra"] .cb-steps__line, [data-theme="ultra"] .cb-steps__line span,
[data-theme="ultra"] .sb-progress, [data-theme="ultra"] .sb-progress span { border-radius: 999px; }
[data-theme="ultra"] .cb-steps li { padding: 28px; border-radius: var(--r-card); background: rgba(255, 255, 255, 0.05); }

/* Product bar: rounded capsule once it sticks */
[data-theme="ultra"] .u-lnav {
  transition: background-color .3s ease, margin .5s var(--ease-dossier), border-radius .5s var(--ease-dossier), top .5s var(--ease-dossier);
}
[data-theme="ultra"] .u-lnav.is-stuck {
  top: var(--bay-gap); margin: 0 var(--bay-gap); border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =====================================================================
   PAGE WIPE: the leading edge of the panel is rounded as it travels
   ===================================================================== */
.wipe.is-covering { border-radius: 64px 64px 0 0; transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1), border-radius 0.55s ease; }
html.wipe-in .wipe { border-radius: 0; }
.wipe.is-leaving { border-radius: 0 0 64px 64px; transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1), border-radius 0.3s ease; }

/* ---------- Small screens: slightly smaller radii ---------- */
@media (max-width: 767px) {
  :root { --r-bay: 24px; --r-frame: 20px; }
  .site-header.is-scrolled { height: 56px; }
  .site-nav { border-radius: 24px; margin-top: 8px; border: 1px solid var(--color-calibration-gray); overflow: hidden; }
}