/* ============================================
   KIVI public site — reset, element defaults and shared utilities
   ============================================ */

@view-transition {
  navigation: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--sp-4));
  background: var(--color-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}

/* Film grain keeps large dark surfaces from looking flat. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Editorial accent: italic serif words inside display headings. */
.accent-serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.025em;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

dialog {
  color: inherit;
}

/* ---- Utilities ---- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(100% - 2 * var(--container-gutter), var(--container-max));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - 2 * var(--container-gutter), var(--container-wide));
}

.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: calc(var(--z-cursor) + 1);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: var(--fw-bold);
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

.text-accent {
  color: var(--color-accent-text);
}

/* Display headings set their accent words in the italic serif. */
h1 em,
h2 em,
.page-hero__title .accent-serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.025em;
  color: var(--color-accent-text);
}

/* Locale switch fade owned by js/i18n.js class names. */
.i18n-switching {
  transition: opacity 0.2s var(--ease-out), filter 0.2s var(--ease-out);
}

.i18n-switch-out,
.i18n-switch-before-in {
  opacity: 0;
  filter: blur(4px);
}

.i18n-switch-in {
  opacity: 1;
  filter: none;
}

/* ---- Theme reveal (circular view transition started by js/site-shell.js) ---- */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
}

.is-theme-transition::view-transition-old(root) {
  animation: none;
}

.is-theme-transition::view-transition-new(root) {
  animation: site-theme-reveal 700ms var(--ease-in-out);
}

@keyframes site-theme-reveal {
  from {
    clip-path: circle(0 at var(--theme-origin-x, 50%) var(--theme-origin-y, 0%));
  }
  to {
    clip-path: circle(150vmax at var(--theme-origin-x, 50%) var(--theme-origin-y, 0%));
  }
}

/* ---- Editorial motion (classes added by js/site-shell.js initMotion) ---- */

/* Words of a heading rise into place one after another. */
.m-words .word {
  display: inline-block;
}

.is-ready .m-words:not(.is-inview) .word {
  opacity: 0;
  transform: translate3d(0, 0.5em, 0) rotate(2deg);
}

.is-ready .m-words .word {
  transition:
    opacity 600ms var(--ease-out) calc(var(--w, 0) * 55ms),
    transform 900ms var(--ease-out) calc(var(--w, 0) * 55ms);
}

/* Children of a list arrive in a short stagger. */
.is-ready .m-stagger:not(.is-inview) > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}

.is-ready .m-stagger:not(.is-settled) > * {
  transition:
    opacity 700ms var(--ease-out) calc(var(--i, 0) * 70ms),
    transform 900ms var(--ease-out) calc(var(--i, 0) * 70ms);
}

/* Top rules are redrawn as a line that grows from the left. */
.is-ready .m-rule:not(.kicker) {
  position: relative;
  border-top-color: transparent;
}

.is-ready .m-rule:not(.kicker)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: var(--rule-offset, -1.5px);
  height: var(--rule-width, 1.5px);
  background: var(--color-text);
  transform-origin: 0 50%;
  transition: transform 1100ms var(--ease-out);
}

.is-ready .m-rule:not(.kicker):not(.is-inview)::before {
  transform: scaleX(0);
}

.is-ready .kicker::after {
  transform-origin: 0 50%;
  transition: transform 1100ms var(--ease-out) 200ms;
}

.is-ready .kicker.m-rule:not(.is-inview)::after {
  transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  .is-ready .m-words:not(.is-inview) .word,
  .is-ready .m-stagger:not(.is-inview) > * {
    opacity: 1;
    transform: none;
  }

  .is-ready .m-rule:not(.kicker):not(.is-inview)::before,
  .is-ready .kicker.m-rule:not(.is-inview)::after {
    transform: none;
  }

  .is-ready .m-words .word,
  .is-ready .m-stagger > *,
  .is-ready .m-rule::before,
  .is-ready .kicker::after {
    transition: none;
  }
}

/* Cross-document navigation keeps the header in place. */
.site-header {
  view-transition-name: site-header;
}

/* ---- Scroll reveal ---- */

.is-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
}

.is-ready [data-reveal] {
  transition:
    opacity var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms);
}

.is-ready [data-reveal="fade"]:not(.is-visible) {
  transform: none;
}

.is-ready [data-reveal="scale"]:not(.is-visible) {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .is-ready [data-reveal]:not(.is-visible) {
    opacity: 1;
    transform: none;
  }

  .is-ready [data-reveal] {
    transition: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}