/* Safari / iOS WebKit — strip compositing killers so page animations stay smooth.
   Visual intent is preserved with cheaper substitutes (box-shadow, opacity). */

/*
  iOS Safari ignores background-attachment:fixed on body — fabric scrolls and
  looks different from Android/Chrome. Paint fabric on a real position:fixed
  layer instead so it stays pinned like on Android.
*/
html.is-safari {
  /* Must be transparent or body::before (z-index:-1) paints behind it and vanishes. */
  background-color: transparent !important;
  background-image: none !important;
}

html.is-safari body {
  background-image: none !important;
  background-color: transparent !important;
}

html.is-safari body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper-color);
  background-image: var(--paper-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Promote layer — more reliable fixed paint on iOS */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

html.is-safari body.is-home-intro::before {
  background-color: #f4f1ea;
  background-image: url("../images/home-paper-bg.webp");
}

html.is-safari body.is-home-intro.home-intro-revealing::before,
html.is-safari body.home-intro-skipped::before {
  background-color: var(--paper-color);
  background-image: var(--paper-image);
}

/* Grain temporarily disabled for scroll-perf test */
html.is-safari .page-grain {
  display: none !important;
}

html.is-safari .scroll-focus-target {
  filter: none !important;
  will-change: auto !important;
  transition: opacity 0.35s ease !important;
}

html.is-safari .site-nav,
html.is-safari .work-lightbox__backdrop,
html.is-safari .illustration-lightbox__backdrop,
html.is-safari .branding-lightbox__backdrop,
html.is-safari .packaging-lightbox__backdrop,
html.is-safari .editorial-lightbox__backdrop,
html.is-safari .highlights-lb__backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Stacked CSS filter drop-shadows are filter ops on WebKit — use one box-shadow. */
html.is-safari .work-preview__inner {
  filter: none !important;
  box-shadow:
    3px 3px 0 rgba(80, 8, 8, 0.35),
    6px 8px 18px rgba(0, 0, 0, 0.16);
}

html.is-safari .software-icon,
html.is-safari .skill-pill,
html.is-safari .chart-center-hint,
html.is-safari .peg-clip,
html.is-safari .clothesline-rope-shared,
html.is-safari .price-card,
html.is-safari .price-card:hover {
  filter: none !important;
}

html.is-safari .clothesline-reveal,
html.is-safari .clothesline-mover,
html.is-safari .clothesline-grid,
html.is-safari .peg-swing,
html.is-safari .peg-clip {
  will-change: auto !important;
}

/* Infinite peg sway: pause unless the line is actively in view & drifting */
html.is-safari .clothesline-line:not(.is-drifting) .peg-swing,
html.is-safari .clothesline-line:not(.is-drifting) .peg-clip {
  animation-play-state: paused !important;
}

/* LCST: drop per-stroke paper turbulence; keep strokes readable */
html.is-safari #lcst .ink-dust {
  display: none !important;
}

html.is-safari #lcst .ink-ribbon-outer,
html.is-safari #lcst .ink-ribbon-mid,
html.is-safari #lcst .ink-main,
html.is-safari #lcst .lcst-stroke {
  filter: none !important;
}

html.is-safari #lcst .lcst-stage {
  will-change: auto !important;
}

html.is-safari .c-cursor {
  display: none !important;
}

/* ── Pie chart (Safari): SVG transform-box letter flies are the real hitch ── */
html.is-safari .chart-center-hint {
  animation: none !important;
  will-change: auto !important;
}

/* Letters: same scatter-gather as other browsers (solid fill only). */
html.is-safari .chart-letter {
  opacity: 0;
  transform: translate(var(--sx, 100px), var(--sy, 100px)) scale(0.4) rotate(var(--sr, 0deg));
  will-change: auto !important;
}

html.is-safari .skills-chart.chart-letters-play .chart-letter {
  animation: chart-letter-fly 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards !important;
  animation-delay: calc(var(--word-delay, 0s) + var(--i, 0) * 0.035s) !important;
  will-change: auto !important;
}

html.is-safari .chart-letter text {
  fill: #fff !important;
}

/* Eject cards: one cheap transition instead of multi-keyframe scale/rotate */
html.is-safari .chart-illustration-eject__img,
html.is-safari .chart-branding-eject__img,
html.is-safari .chart-packaging-eject__img,
html.is-safari .chart-editorial-eject__img {
  box-shadow: 0 4px 12px rgba(18, 8, 8, 0.22);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: auto !important;
}

html.is-safari .skills-chart.chart-letters-play .chart-illustration-eject__img,
html.is-safari .skills-chart.chart-letters-play .chart-branding-eject__img,
html.is-safari .skills-chart.chart-letters-play .chart-packaging-eject__img,
html.is-safari .skills-chart.chart-letters-play .chart-editorial-eject__img {
  animation: none !important;
  opacity: 1;
}

html.is-safari .skills-chart.chart-letters-play .chart-illustration-eject__img {
  transform: translate(var(--illustration-pos-end), calc(-1 * var(--illustration-pos-end))) scale(1) rotate(-10deg);
}

html.is-safari .skills-chart.chart-letters-play .chart-branding-eject__img {
  transform: translate(var(--branding-pos-end), var(--branding-pos-end)) scale(1) rotate(10deg);
}

html.is-safari .skills-chart.chart-letters-play .chart-packaging-eject__img {
  transform: translate(calc(-1 * var(--packaging-pos-end)), var(--packaging-pos-end)) scale(1) rotate(-10deg);
}

html.is-safari .skills-chart.chart-letters-play .chart-editorial-eject__img {
  transform: translate(calc(-1 * var(--editorial-pos-end)), calc(-1 * var(--editorial-pos-end))) scale(1) rotate(10deg);
}

html.is-safari .skills-chart {
  contain: layout style;
}

html.is-safari .skills-chart svg {
  /* Avoid promoting a giant filtered SVG layer */
  filter: none !important;
}