/* snapwish.css - page-local skin. Extends /site.css, never redefines its tokens.
   Logical properties only: the Hebrew twin is a translate-and-copy job (SITE.md:54).
   Motion is transform and opacity only. Everything is readable with JavaScript off. */

.ay-body {
  /* A system monospace, not site.css's webfont pair. Courier Prime and Cousine swap in after first
     paint and every small mono surface on this page reflows: that swap was 0.058 of the measured
     CLS against a 0.05 bar (lighthouse-alteryou.json, 2026-09-08). It also drops two requests. */
  --ay-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ay-line: color-mix(in srgb, var(--stone) 34%, transparent);
  --ay-card: color-mix(in srgb, var(--cream) 5%, transparent);
  --ay-gap: clamp(3.5rem, 9vw, 7rem);
  --ay-rule: 1px solid var(--ay-line);
  background:
    radial-gradient(120% 70% at 82% -8%, color-mix(in srgb, var(--rust) 42%, transparent) 0%, transparent 62%),
    radial-gradient(90% 60% at 0% 4%, color-mix(in srgb, var(--paper) 9%, transparent) 0%, transparent 55%),
    var(--ink);
  background-attachment: fixed;
}

/* a grain plate, drawn not downloaded: one inline SVG turbulence, no request */
.ay-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ay-body main {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  padding-block: clamp(6rem, 14vw, 9rem) clamp(3rem, 8vw, 5rem);
}

.ay-body section { margin-block-end: var(--ay-gap); }

.ay-body h1 {
  margin-block: 0 0.9rem;
  font-size: clamp(2.15rem, 7.2vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 15ch;
  text-wrap: balance;
}

.ay-body h1 em {
  font-style: normal;
  color: color-mix(in srgb, var(--rust) 62%, var(--cream));
}

.ay-body h2 {
  margin-block: 0 1rem;
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.ay-body h3 {
  margin-block: 0 0.5rem;
  font-family: var(--ay-mono);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}

.ay-sub { margin-block: 0 0.45rem; max-width: 42ch; color: var(--paper); font-size: 1.08rem; }
.ay-sec p { max-width: 54ch; }

/* --- section headings get a hairline and a mono kicker ------------------------------------- */
.ay-sec { border-block-start: var(--ay-rule); padding-block-start: 1.6rem; }

/* --- hero ----------------------------------------------------------------------------------- */
.ay-hero { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }

@media (min-width: 860px) {
  .ay-hero { grid-template-columns: 1.05fr 0.95fr; }
  .ay-hero > .ay-pair { margin-block-start: 0; }
}

/* --- the WhatsApp button, the only call to action on the page -------------------------------- */
.ay-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: 1.8rem;
  padding-block: 0.85rem;
  padding-inline: 1.5rem;
  min-block-size: 48px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--rust);
  color: var(--cream);
  font-family: var(--ay-mono);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease;
}

.ay-wa:hover { background: color-mix(in srgb, var(--rust) 80%, var(--cream)); transform: translateY(-2px); }
.ay-wa:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.ay-wa-glyph { inline-size: 1.3rem; block-size: 1.3rem; flex-shrink: 0; }

.ay-book .ay-wa { font-size: 1rem; }

/* --- the before/after frame ------------------------------------------------------------------ */
/* Default state, which is also the no-JavaScript state and the reduced-motion state: two frames
   side by side, the photo and the portrait, nothing moving. With JavaScript and motion allowed the
   pair collapses to one frame and the two images crossfade inside it. */
.ay-pair {
  position: relative;
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.ay-pair figcaption { grid-column: 1 / -1; }
/* The resting frame is the PORTRAIT, not the photograph: the product is the transformation, so the
   first thing painted is the thing being sold. The photograph is the reveal. */
.ay-frame .ay-alt { display: none; }
.ay-frame--b { order: -1; }

.js .ay-pair { grid-template-columns: 1fr; }
.js .ay-frame--b { display: none; }
.js .ay-frame .ay-alt { display: block; }

.ay-frame {
  position: relative;
  aspect-ratio: 640 / 781;
  overflow: hidden;
  border: var(--ay-rule);
  background: color-mix(in srgb, var(--stone) 25%, var(--ink));
}

.ay-frame img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.js .ay-frame .ay-main { animation: ay-fade-a 7s ease-in-out infinite; }
.js .ay-frame .ay-alt { opacity: 0; animation: ay-fade-b 7s ease-in-out infinite; }

@keyframes ay-fade-a { 0%, 38% { opacity: 1 } 50%, 88% { opacity: 0 } 100% { opacity: 1 } }
@keyframes ay-fade-b { 0%, 38% { opacity: 0 } 50%, 88% { opacity: 1 } 100% { opacity: 0 } }

.ay-tag {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 2;
  padding-block: 0.25rem;
  padding-inline: 0.6rem;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  border: var(--ay-rule);
  font-family: var(--ay-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
}

.ay-tag span { display: block }
.ay-tag .ay-tag-b { display: none }
.js .ay-tag .ay-tag-a { animation: ay-fade-a 7s ease-in-out infinite }
.js .ay-tag .ay-tag-b { display: block; position: absolute; inset-block-start: 0.25rem; opacity: 0; animation: ay-fade-b 7s ease-in-out infinite }

.ay-pair figcaption { font-family: var(--ay-mono); font-size: 0.76rem; color: var(--stone); }

/* The offer, above the fold: the two tiers and the style range as chips, so a buyer sees what
   there is to buy without scrolling. Both are claim text already on the page. */
.ay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block: 1.2rem 0;
  padding: 0;
  list-style: none;
}

.ay-chips li {
  padding-block: 0.3rem;
  padding-inline: 0.7rem;
  border: var(--ay-rule);
  border-radius: 999px;
  font-family: var(--ay-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.ay-chips li:nth-child(-n+2) {
  border-color: color-mix(in srgb, var(--rust) 70%, transparent);
  color: var(--cream);
}

.ay-proof {
  margin-block: 1.1rem 0;
  padding-inline-start: 0.8rem;
  border-inline-start: 2px solid var(--rust);
  font-family: var(--ay-mono);
  font-size: 0.8rem;
  color: var(--paper);
  max-width: 40ch;
}

/* --- how it works: two tier cards ------------------------------------------------------------ */
.ay-tiers { display: grid; gap: 1rem; margin-block-start: 1.6rem; }
@media (min-width: 720px) { .ay-tiers { grid-template-columns: 1fr 1fr } }

.ay-tier {
  padding: 1.3rem;
  border: var(--ay-rule);
  background: var(--ay-card);
}

.ay-tier > p { margin-block: 0 1rem; font-size: 0.98rem }

/* the open question. Shown, not hidden: the page says what it does not yet say, once, in prose -
   never as raw internal markup (that read as broken, not as honest, in review). */
.ay-fill-line {
  margin-block-start: 1rem;
  padding-block-start: 0.7rem;
  border-block-start: var(--ay-rule);
  max-width: 54ch;
  font-family: var(--ay-mono);
  font-size: 0.8rem;
  color: var(--stone);
}

/* --- one ticker, for the style range --------------------------------------------------------- */
.ay-ticker { overflow: hidden; margin-block: 1.4rem; border-block: var(--ay-rule); padding-block: 0.7rem; block-size: 2.6rem }
.ay-ticker-run { display: flex; inline-size: max-content; gap: 2.5rem; font-family: var(--ay-mono); font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper) }
.js .ay-ticker-run { animation: ay-run 26s linear infinite }
@keyframes ay-run { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.ay-ticker-run span { white-space: nowrap }
.ay-ticker-run span::after { content: " ·"; color: var(--rust) }

/* --- styles gallery -------------------------------------------------------------------------- */
/* Filled slots: a real portrait fills the box, a chip label sits over it bottom-start, same
   dark chip language as .ay-tag on the hero. Border switches from dashed (empty) to solid
   (filled) automatically via :has(), no extra class needed. */
.ay-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); gap: 0.7rem }
.ay-slot {
  position: relative;
  aspect-ratio: 640 / 781;
  overflow: hidden;
  border: var(--ay-rule);
  border-style: dashed;
  background: var(--ay-card);
  display: flex;
  align-items: flex-end;
  padding: 0.6rem;
  font-family: var(--ay-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.ay-slot:has(img) { border-style: solid }
.ay-slot img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: 0;
}
.ay-slot span {
  position: relative;
  z-index: 1;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  border: var(--ay-rule);
}

/* --- who it is for --------------------------------------------------------------------------- */
.ay-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0; margin: 0; padding: 0; list-style: none }
.ay-list li { padding-block: 0.85rem; border-block-end: var(--ay-rule); font-size: 1.02rem }

/* --- the closing block ----------------------------------------------------------------------- */
.ay-book {
  padding: clamp(1.6rem, 5vw, 2.8rem);
  border: var(--ay-rule);
  background: linear-gradient(150deg, color-mix(in srgb, var(--rust) 26%, transparent), transparent 70%), var(--ay-card);
}
.ay-book h2 { margin-block-end: 0.6rem }

/* --- scroll reveals: opt-in, so the page is complete with JavaScript off ---------------------- */
.js .ay-rise { opacity: 0; transform: translateY(18px); transition: opacity 620ms ease, transform 620ms cubic-bezier(.2,.7,.3,1) }
.js .ay-rise.ay-in { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) {
  .js .ay-rise,
  .js .ay-rise.ay-in { opacity: 1; transform: none; transition: none }
  .js .ay-ticker-run,
  .js .ay-frame .ay-main,
  .js .ay-frame .ay-alt,
  .js .ay-tag .ay-tag-a,
  .js .ay-tag .ay-tag-b { animation: none }
  .js .ay-pair { grid-template-columns: 1fr 1fr }
  .js .ay-frame--b { display: block }
  .js .ay-frame .ay-alt { display: none }
  .js .ay-tag .ay-tag-b { display: none }
  .ay-wa { transition: none }
}

/* site.css hides every nav link under 480px except a named few. Keep the one that matters here:
   this page has exactly one call to action and the nav should still reach it on a phone. */
@media (max-width: 480px) {
  .ay-body .site-nav a.ay-nav-book { display: inline; }
  .ay-wa { padding-inline: 1.15rem; font-size: 0.85rem; }
}

/* Hebrew has no Courier Prime or Cousine glyphs (site.css:24 records the same finding), so every
   mono surface on the Hebrew twin falls through to a system monospace and comes out loosely
   letter-spaced. Hebrew text takes the regular stack; the Latin logo keeps the mono. */
.ay-body--he .eyebrow,
.ay-body--he h3,
.ay-body--he .ay-wa,
.ay-body--he .ay-tag,
.ay-body--he .ay-proof,
.ay-body--he .ay-chips li,
.ay-body--he .ay-fill li,
.ay-body--he .ay-fill-line,
.ay-body--he .ay-ticker-run,
.ay-body--he .ay-slot,
.ay-body--he .ay-pair figcaption {
  font-family: var(--font);
  letter-spacing: 0;
}

.ay-body--he .eyebrow,
.ay-body--he .ay-ticker-run,
.ay-body--he .ay-slot {
  letter-spacing: 0.04em;
}