/* base.css — font faces, reset, typography, grain, layout, reveal, transitions (D1). */

/* Fonts are self-hosted under /assets/fonts (no Google Fonts, no CDN). */
@font-face {
  font-family: "Encode Condensed";
  src: url("../fonts/encode-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Encode Condensed";
  src: url("../fonts/encode-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

* { margin: 0; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(214, 52, 43, .07), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(255, 255, 255, .025), transparent 60%);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  background-image: var(--noise);
  opacity: .035;
}

/* Headings */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin-block: 0 var(--s-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.2rem; }

p {
  max-width: var(--measure);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

/* Inline links within prose */
a { color: inherit; }
.zt-prose a:not(.zt-btn),
.zt-content a:not(.zt-btn),
.zt-editorial p a:not(.zt-btn),
.zt-product__notice a,
.zt-form__hint a {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: .22em;
  text-decoration-thickness: 1.5px;
  transition: color var(--d-2) var(--ease-out), text-decoration-color var(--d-2) var(--ease-out);
}
.zt-prose a:not(.zt-btn):hover,
.zt-content a:not(.zt-btn):hover,
.zt-editorial p a:not(.zt-btn):hover,
.zt-product__notice a:hover,
.zt-form__hint a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

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

/* Skip link */
.zt-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: calc(var(--z-consent) + 1);
  transform: translateY(-120%);
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-s);
}
.zt-skip-link:not(:focus) { opacity: 0; pointer-events: none; } /* stays hidden on iOS overscroll */
.zt-skip-link:focus { transform: translateY(0); opacity: 1; }

/* Layout helpers */
.zt-container {
  width: min(calc(100% - 2 * var(--gutter)), var(--container));
  margin-inline: auto;
}
.zt-container--narrow {
  width: min(calc(100% - 2 * var(--gutter)), var(--container-narrow));
}

.zt-main { display: block; }

/* Sections */
.zt-section {
  padding-block: var(--section-y) calc(var(--section-y) * 1.08);
}
.zt-section--tight { padding-block: calc(var(--section-y) * .55); }

/* Form base */
input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

/* Scroll-reveal (CSS only, no JS) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal]:not([data-reveal="stagger"]) {
      animation: zt-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    [data-reveal="stagger"] > * {
      animation: zt-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    [data-reveal="stagger"] > *:nth-child(2) { animation-range: entry 6% entry 66%; }
    [data-reveal="stagger"] > *:nth-child(3) { animation-range: entry 12% entry 72%; }
    [data-reveal="stagger"] > *:nth-child(4) { animation-range: entry 18% entry 78%; }
    [data-reveal="stagger"] > *:nth-child(n+5) { animation-range: entry 22% entry 82%; }
  }
}

/* Uses the individual translate/scale properties (not transform), so hover
   transforms on revealed cards keep working after the entry animation. */
@keyframes zt-reveal {
  from {
    opacity: 0;
    translate: 0 28px;
    scale: .985;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: none;
  }
}

/* Revision 3 (Felix: more transitions/animations) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* Reading progress: thin amber-to-red bar on top of the viewport. */
    .zt-body::before {
      content: "";
      position: fixed;
      inset: 0 0 auto 0;
      height: 2px;
      z-index: calc(var(--z-header) + 1);
      background: linear-gradient(90deg, var(--accent-2), var(--accent));
      transform-origin: 0 50%;
      scale: 0 1;
      pointer-events: none;
      animation: zt-progress linear both;
      animation-timeline: scroll(root);
    }
    /* The header island gains depth once the page scrolls. */
    .zt-header__inner {
      animation: zt-header-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 180px;
    }
  }
  @supports (animation-timeline: view()) {
    /* Cards on every page ease in while scrolling, no markup hooks needed. */
    .zt-product-grid > *, .zt-cards-3 > *, .zt-cards-4 > *, .zt-grid > *,
    .zt-channels > *, .zt-contact-card, .zt-contact-form, .zt-cart-line,
    .zt-facts, .zt-related, .zt-faq__item, .zt-blog-card, .zt-frame-card {
      animation: zt-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
  /* Page heads and product panels rise in on load. */
  .zt-page-head, .zt-editorial__head, .zt-contact-head, .zt-shop__head,
  .zt-product__media, .zt-product__body, .zt-error {
    animation: zt-rise-in .8s var(--ease-out) both;
  }
  .zt-product__body { animation-delay: .12s; }
}
@keyframes zt-progress { to { scale: 1 1; } }
@keyframes zt-header-lift { to { box-shadow: var(--shadow-2), 0 0 0 1px var(--line-strong); } }
@keyframes zt-rise-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

/* View transitions */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: var(--d-2) var(--ease-in-out) both zt-fade-out;
}
::view-transition-new(root) {
  animation: var(--d-3) var(--ease-out) both zt-fade-in;
}

@keyframes zt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes zt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}