/* Reset, document defaults, the shared motion vocabulary, focus.
   Screens live in css/screens/. */

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

html {
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--forest);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-section);
  color: var(--cream-hi);
  margin: 0;
  text-wrap: pretty;
}

p { margin: 0; }

a { color: var(--copper-lit); text-decoration: none; transition: color var(--dur-hover) ease; }
a:hover { color: var(--copper-pale); }

img { max-width: 100%; height: auto; }

[lang="ka"] {
  font-family: var(--font-ka);
  letter-spacing: var(--ls-ka);
}


/* --- the motion vocabulary ----------------------------------------------- */
/* Six gestures, all of them from the Ink & Gilt motion table. Everything that
   moves on a public screen uses one of these. */

/* the foil, scrolled 230% → −130% on a 7s linear loop */
@keyframes sheen {
  0%   { background-position: 230% 0; }
  100% { background-position: -130% 0; }
}

/* the hero glow, opacity 0.41 → 0.6 and scale 1 → 1.06 over 16s */
@keyframes gilt-breathe {
  0%, 100% { opacity: calc(var(--sun) * 0.68); transform: scale(1); }
  50%      { opacity: var(--sun); transform: scale(1.06); }
}

/* the motes — pollen and dust caught in the gilt breath, rising.

   One path was enough when there were five of them; at fourteen a single
   trajectory reads as a loop, so there are four, and every mote also carries
   its own --rise, --dur, --delay and --peak. No two motes on the page share
   the whole set, which is what keeps the drift from resolving into a pattern.

   --peak is the ceiling for a mote's opacity, never its constant: each path
   dims and lifts two or three times on the way up, so a mote is only ever at
   full strength for a moment. Nothing here is brighter than 0.30, and the
   largest ones are the faintest — a big soft mote reads as out of focus, and
   an out-of-focus thing is dim. Transform and opacity only: they composite,
   so twenty-two of these cost one layer each and no repaint. */

/* A · the long riser — right, back left, right again; brightest early */
@keyframes mote-a {
  0%   { transform: translate3d(0, 0, 0);                              opacity: 0; }
  7%   { transform: translate3d(2px, calc(var(--rise) * -0.06), 0);    opacity: calc(var(--peak) * 0.35); }
  22%  { transform: translate3d(7px, calc(var(--rise) * -0.19), 0);    opacity: var(--peak); }
  48%  { transform: translate3d(-4px, calc(var(--rise) * -0.47), 0);   opacity: calc(var(--peak) * 0.46); }
  70%  { transform: translate3d(9px, calc(var(--rise) * -0.70), 0);    opacity: calc(var(--peak) * 0.86); }
  100% { transform: translate3d(3px, calc(var(--rise) * -1), 0);       opacity: 0; }
}

/* B · the leftward wanderer — two pulses, out well before the top */
@keyframes mote-b {
  0%   { transform: translate3d(0, 0, 0);                              opacity: 0; }
  11%  { transform: translate3d(-3px, calc(var(--rise) * -0.10), 0);   opacity: var(--peak); }
  30%  { transform: translate3d(-11px, calc(var(--rise) * -0.29), 0);  opacity: calc(var(--peak) * 0.26); }
  52%  { transform: translate3d(-6px, calc(var(--rise) * -0.50), 0);   opacity: calc(var(--peak) * 0.92); }
  78%  { transform: translate3d(-15px, calc(var(--rise) * -0.77), 0);  opacity: calc(var(--peak) * 0.28); }
  100% { transform: translate3d(-9px, calc(var(--rise) * -1), 0);      opacity: 0; }
}

/* C · the slow one — almost vertical, and never quite bright */
@keyframes mote-c {
  0%   { transform: translate3d(0, 0, 0);                              opacity: 0; }
  16%  { transform: translate3d(1px, calc(var(--rise) * -0.14), 0);    opacity: calc(var(--peak) * 0.70); }
  40%  { transform: translate3d(3px, calc(var(--rise) * -0.38), 0);    opacity: calc(var(--peak) * 0.52); }
  64%  { transform: translate3d(-2px, calc(var(--rise) * -0.63), 0);   opacity: calc(var(--peak) * 0.78); }
  88%  { transform: translate3d(4px, calc(var(--rise) * -0.87), 0);    opacity: calc(var(--peak) * 0.18); }
  100% { transform: translate3d(3px, calc(var(--rise) * -1), 0);       opacity: 0; }
}

/* D · the one that arrives mid-air — nothing at all for the first quarter,
   then a wide lateral wander. This is the path that breaks the rhythm. */
@keyframes mote-d {
  0%   { transform: translate3d(0, 0, 0);                              opacity: 0; }
  24%  { transform: translate3d(-6px, calc(var(--rise) * -0.22), 0);   opacity: 0; }
  41%  { transform: translate3d(2px, calc(var(--rise) * -0.40), 0);    opacity: var(--peak); }
  60%  { transform: translate3d(13px, calc(var(--rise) * -0.58), 0);   opacity: calc(var(--peak) * 0.40); }
  79%  { transform: translate3d(6px, calc(var(--rise) * -0.77), 0);    opacity: calc(var(--peak) * 0.64); }
  100% { transform: translate3d(18px, calc(var(--rise) * -1), 0);      opacity: 0; }
}

/* the quote mark, settling */
@keyframes settle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* an anatomy pin, pulsing once every four seconds */
@keyframes pin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--copper-pulse); }
  50%      { box-shadow: 0 0 0 7px var(--copper-pulse-out); }
}

/* the basket count — the only fast thing on the page */
@keyframes count-pop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.14); }
  100% { transform: scale(1); opacity: 1; }
}


/* --- the foil ------------------------------------------------------------ */
/* Five places, and no more: the hero CTA, the hero eyebrow rule, the two
   seams, and the overture divider rule. Everything else that wants to look
   like metal takes a still gradient. */
.foil {
  background-image: var(--foil);
  background-size: var(--foil-size);
  animation: sheen var(--dur-sheen) linear infinite;
}
/* the 2px seam where the ground changes */
.seam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
}


/* --- focus: the design has none ------------------------------------------ */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--forest-panel);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  border: 1px solid var(--hairline-firm);
}
.skip-link:focus { left: var(--gutter); top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* --- the holding page ---------------------------------------------------- */
/* /shop, /basket, /admin and /order until M2–M4 build them. */
.holding {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 120px var(--gutter) 96px;
  text-align: center;
  overflow: hidden;
}
.holding__glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(760px, 84vw);
  height: min(760px, 84vw);
  margin: -1px 0 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-image: var(--breath-holding);
  opacity: var(--sun);
  animation: gilt-breathe var(--dur-breath) ease-in-out infinite;
  pointer-events: none;
}
.holding > *:not(.holding__glow) { position: relative; z-index: 2; }
.holding__mark { width: 74px; opacity: .9; }
.holding__wordmark {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  letter-spacing: var(--ls-wordmark);
  text-indent: var(--ls-wordmark);
  color: var(--cream);
}
.holding__rule {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(520px, 74vw);
}
/* a static gilt rule, not the foil: the sheen is budgeted for the landing's
   four elements and a placeholder screen has no claim on it */
.holding__rule i { flex: 1; height: 1px; }
.holding__rule i:first-of-type {
  background-image: linear-gradient(90deg, transparent, var(--gilt-deep) 40%, var(--gilt));
}
.holding__rule i:last-of-type {
  background-image: linear-gradient(90deg, var(--gilt), var(--gilt-deep) 60%, transparent);
}
.holding__rule b {
  width: 6px;
  height: 6px;
  background: var(--copper);
  transform: rotate(45deg);
}
.holding__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 25px);
  color: var(--gilt-light);
}
.holding__note {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--sage-meta);
}
.holding__back {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}


/* --- motion off ---------------------------------------------------------- */
/* Non-negotiable: reveals, drift and parallax are disabled, and content is
   never left hidden when the observer does not fire. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}