/* ═══════════════════════════════════════════════════════════════════════
   home.css — the home page only. Linked after bloom.css, pages.css and
   forms.css, and consumes their tokens.

   One rule governs everything here: nothing stands between the visitor and
   the page. There is no intro and nothing to skip — the motion happens
   inside a hero that is already laid out and already clickable.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero logo, inlined as stacked layers ─────────────────────────────
   Was an <img>; an <img>'s paths cannot be reached from CSS. Sizes and the
   shadow mirror `.hero-brandmark img` in bloom.css exactly, so the resting
   logo is the same logo.

   Each moving piece is its own <svg> ELEMENT rather than a <g> inside one
   SVG. Shapes inside an SVG have no compositor layer: animating them means
   repainting the whole logo, through its clips and its drop-shadow, on the
   main thread every frame — and the first second of a page load is exactly
   when the main thread is busiest. That is what made the flower stutter.
   An <svg> element is an ordinary box, so its transform and opacity run on
   the compositor and do not care what the main thread is doing. */
.hero-brandmark .hero-logo {
  position: relative;
  height: 200px; aspect-ratio: 904 / 378;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45));
}
@media (max-width: 1100px) { .hero-brandmark .hero-logo { height: 172px; } }
@media (max-width: 900px)  { .hero-brandmark .hero-logo { height: 146px; } }
@media (max-width: 640px)  { .hero-brandmark .hero-logo { height: 106px; } }
.hero-logo-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;
}

/* ── The flower opens ─────────────────────────────────────────────────
   The wordmark is there from the first frame; only the flower above the
   "oo" moves. Stem first, then the two leaves swing out from where they
   meet it, then the blush petals — the name of the place, said once.
   Origins are the same points as before — the stem's foot, the junction,
   the petals' base — as percentages of the 904 × 378 artboard, because the
   thing being transformed is now a box and not a shape. */
/* One continuous growth, not three beats. Each piece starts while the one
   before it is still moving, and nothing overshoots: a spring curve made the
   leaves snap open after the stem had already come to rest, which read as
   stem — pause — everything at once. The stem eases in AND out so it is
   still travelling when the leaves leave it, and every piece is fully opaque
   within its first fifth, so growth is visible from the moment it begins. */
.bloom-piece {
  animation: 1.15s cubic-bezier(.22, 1, .36, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.bloom-stem {
  transform-origin: 47.79% 55.03%;
  animation-name: bloomStem; animation-duration: .75s;
  animation-timing-function: cubic-bezier(.45, 0, .4, 1);
}
.bloom-leaf-l { transform-origin: 49.12% 40.21%; animation-name: bloomLeafL; animation-delay: .34s; }
.bloom-leaf-r { transform-origin: 49.12% 40.21%; animation-name: bloomLeafR; animation-delay: .46s; }
.bloom-petals { transform-origin: 49.12% 35.45%; animation-name: bloomPetals; animation-delay: .62s; }

@keyframes bloomStem   { 0% { opacity: 0; transform: scaleY(0); } 20% { opacity: 1; } }
@keyframes bloomLeafL  { 0% { opacity: 0; transform: rotate(38deg)  scale(.12); } 20% { opacity: 1; } }
@keyframes bloomLeafR  { 0% { opacity: 0; transform: rotate(-38deg) scale(.12); } 20% { opacity: 1; } }
@keyframes bloomPetals { 0% { opacity: 0; transform: scale(.1); } 20% { opacity: 1; } }

/* The copy follows the flower up. Keyframes rather than the `.reveal`
   transition on purpose: they need no script, so the hero still appears
   for a visitor whose JavaScript never runs. */
.hero-eyebrow, .hero-title, .hero-quote, .hero-cta-row, .hero-social {
  animation: heroRise .7s cubic-bezier(.2, .7, .3, 1) both;
}
.hero-eyebrow { animation-delay: .5s; }
.hero-title   { animation-delay: .62s; }
.hero-quote   { animation-delay: .76s; }
.hero-cta-row { animation-delay: .9s; }
.hero-social  { animation-delay: 1.04s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } }

/* ── "שני מרחבים" — photographs ───────────────────────────────────────
   Graded like the hero slides so the cards belong to the same room, with a
   low scrim in the hero overlay's colour family. */
.exp-card-img { overflow: hidden; }
.exp-card-img img {
  filter: saturate(0.88) contrast(0.96) brightness(0.94);
  /* `scale`, not transform: scroll-moments.js moves these with `translate`,
     and the two individual properties compose instead of overwriting. The
     resting 1.08 leaves room for that drift without showing an edge. */
  scale: 1.08;
  transition: scale .6s cubic-bezier(.2, .7, .3, 1);
}
.exp-card-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(43,32,22,0.34), rgba(43,32,22,0) 48%),
    radial-gradient(120% 90% at 50% 0%, rgba(232,180,184,0.10), rgba(232,180,184,0) 60%);
}
.exp-card:hover .exp-card-img img,
.exp-card:focus-within .exp-card-img img { scale: 1.13; }

/* ── Instagram — a strip of the room ──────────────────────────────────── */
.ig-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 24px 40px;
  margin-block-end: 40px;
}
.ig .ig-title {
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.05;
  letter-spacing: -0.03em; margin-top: 12px; color: var(--ink);
}
.ig .ig-title .display-en { display: block; text-align: right; color: var(--sage-text); font-size: 0.8em; }
.ig .ig-text {
  font-family: 'Heebo', sans-serif; font-size: 15px; line-height: 1.7;
  color: var(--ink); opacity: 0.78; margin-top: 14px; max-width: 36ch;
}
.ig-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* Olive, for the reason written beside `.follow-btn` in bloom.css: ivory on
   sage fails contrast, ivory on olive is 6.36:1, and the hover darkens
   rather than lightens so the button never reads as switching off. */
.ig-follow {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--olive); color: var(--ivory);
  border: 1px solid var(--olive); border-radius: var(--radius-pill);
  padding: 13px 26px;
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 14px;
  box-shadow: 0 14px 28px -18px rgba(80,87,56,0.55), 0 3px 8px -4px rgba(80,87,56,0.30);
  transition: background .25s, border-color .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.ig-follow:hover { background: #42472E; border-color: #42472E; transform: translateY(-2px); }
.ig-follow:active { transform: translateY(0) scale(.98); }

.ig-more {
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--mocha-deep, var(--mocha));
  border-bottom: 1px solid rgba(140,90,54,0.25);
  padding-block: 4px;
  transition: border-color .2s;
}
.ig-more:hover { border-color: var(--mocha); }
.ig-more:active { opacity: .7; }

.ig-strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .ig-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
}
.ig-tile {
  position: relative; overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  background: var(--neutral);
  box-shadow: var(--shadow-card);
}
.ig-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.9) contrast(0.97);
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ig-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(43,32,22,0.22), rgba(43,32,22,0) 45%);
}
.ig-tile:hover img { transform: scale(1.06); }
@media (max-width: 520px) { .ig-tile { border-radius: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .bloom-piece,
  .hero-eyebrow, .hero-title, .hero-quote, .hero-cta-row, .hero-social { animation: none; }
  .exp-card-img img, .ig-tile img, .ig-follow { transition: none; }
  .exp-card:hover .exp-card-img img,
  .exp-card:focus-within .exp-card-img img,
  .ig-tile:hover img, .ig-follow:hover, .ig-follow:active { transform: none; }
}


/* ── Scroll moments (scroll-moments.js) ─────────────────────────────── */

/* The falling petals: above the page, below the fixed header (z 50), and
   never in the way of a click. */
.petal-field {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none; overflow: hidden;
}
.petal {
  position: absolute; top: 0; left: 0;
  opacity: 0; will-change: transform, opacity;
  transform-style: preserve-3d;
}
.petal-defs { position: absolute; width: 0; height: 0; }
/* A soft shadow that sits a little below the petal, as if it were in the
   air above the page rather than printed on it. Far petals are softened
   instead: a touch of blur reads as distance. */
.petal-body {
  display: block; width: 100%; height: 100%; overflow: visible;
  transform-origin: 50% 20%;
  animation: petalFlutter 3.6s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.petal--near .petal-body { filter: drop-shadow(0 10px 8px rgba(140, 90, 54, 0.16)); }
.petal--mid  .petal-body { filter: drop-shadow(0 6px 5px rgba(140, 90, 54, 0.14)); }
.petal--far  .petal-body { filter: blur(0.6px); }
@keyframes petalFlutter {
  0%   { transform: rotate(-9deg) scaleY(1); }
  50%  { transform: rotate(3deg) scaleY(0.9); }
  100% { transform: rotate(10deg) scaleY(1); }
}

/* The hero's photographs sink as the page scrolls; the hero clips them. */
.hero { overflow: hidden; }
.hero-bg, .hero-content { will-change: transform; }

/* The welcome photograph: the owner's reading corner, in the card that
   used to hold the drawing. Oversized a touch for its parallax drift. */
.welcome-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  scale: 1.1;
  filter: saturate(0.92) contrast(0.97);
}
.welcome-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(43, 32, 22, 0.18), rgba(43, 32, 22, 0) 40%);
}
.welcome-photo .ph-tag { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .petal-field { display: none; }
  .petal-body { animation: none; }
  .exp-card-img img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Owner's content round, 6 October 2026.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── "לפני שמגיעים לבלום" — four notes, then the rounds ─────────────── */
.before-grid--notes { list-style: none; margin: 0; padding: 0; }
.before-grid--notes .before-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 20px 22px;
  border-radius: var(--radius-card);
  box-shadow: 0 18px 36px -30px rgba(140,90,54,0.35), 0 3px 8px -5px rgba(140,90,54,0.10);
}
.before-icon { font-size: 26px; line-height: 1; margin-block-end: 6px; }
.before-title {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 17px;
  line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
}
.before-grid--notes .before-desc { color: rgba(43,43,43,0.78); }

.before-rounds {
  margin-block-start: 28px;
  padding: 22px 24px;
  background: var(--ivory);
  border: 1px solid var(--neutral);
  border-radius: var(--radius-card);
}
.before-rounds-title {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--sage-text); letter-spacing: 0.12em;
  margin-block-end: 10px;
}
.rounds { margin: 0; }
.rounds-row {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding-block: 12px;
  border-top: 1px solid var(--neutral);
}
.rounds-row:first-child { border-top: 0; padding-block-start: 4px; }
@media (min-width: 620px) {
  .rounds-row { grid-template-columns: 130px 1fr; align-items: baseline; gap: 16px; }
}
.rounds dt {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink);
}
.rounds dd {
  margin: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.rounds dd bdi {
  font-family: 'Heebo', sans-serif; font-weight: 500; font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--cream); border: 1px solid var(--neutral); color: var(--ink);
}
.before-link {
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--sage-text);
  border-bottom: 1px solid rgba(92,98,70,0.3); padding-block: 4px;
  transition: border-color .2s;
}
.before-link:hover { border-color: var(--sage-text); }
.before-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* ── Welcome: the tagline under the name ──────────────────────────────── */
.welcome h2 .welcome-tagline {
  display: block; margin-top: 18px;
  font-weight: 500; font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.35; letter-spacing: -0.01em; color: var(--sage-text);
}
.welcome p.welcome-invite { font-weight: 700; }

/* ── Six spaces — smaller cards, three by two ─────────────────────────── */
.exp--six { padding: 96px 0 90px; }
.exp--six .exp-grid { gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .exp--six .exp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .exp--six .exp-grid { grid-template-columns: repeat(3, 1fr); } }
.exp--six .exp-card { border-radius: 20px; }
.exp--six .exp-card-img { aspect-ratio: 16/10; }
.exp--six .exp-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.exp--six .exp-card h3 { font-size: 21px; margin-top: 0; }
.exp--six .exp-card p { font-size: 14.5px; margin-top: 8px; }
.exp--six .exp-card .more { margin-top: auto; padding-top: 16px; align-self: flex-start; }
.exp--six .exp-card .more:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* No photograph yet: a sage tint and a drawn sprig, in the card's place. */
.exp-card--noimg .exp-card-img {
  display: grid; place-items: center;
  background:
    radial-gradient(70% 90% at 80% 10%, rgba(232,180,184,0.35), rgba(232,180,184,0) 60%),
    radial-gradient(80% 80% at 15% 100%, rgba(152,160,122,0.40), rgba(152,160,122,0) 65%),
    var(--cream);
}
.exp-card--noimg .exp-card-img::after { display: none; }
.exp-card-mark {
  width: 64px; height: 64px;
  fill: none; stroke: var(--sage-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.exp-card-mark circle { fill: var(--rose); stroke: none; }

/* ── "נעים להכיר" ─────────────────────────────────────────────────────── */
.about { padding: 110px 0 100px; background: var(--ivory); }
.about-inner { max-width: 640px; text-align: center; }
.about h2 {
  font-family: 'Heebo', sans-serif; font-weight: 800;
  font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink);
}
.about p {
  font-family: 'Heebo', sans-serif; font-size: 17px; line-height: 1.75;
  color: var(--ink); margin-top: 18px;
}
.about .about-lead { font-size: 20px; font-weight: 600; margin-top: 26px; }
.about .about-close {
  margin-top: 34px; padding-top: 28px;
  border-top: 1px solid var(--neutral);
  font-size: 18px;
}
.about .about-close span {
  display: block; margin-top: 6px;
  font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); color: var(--sage-text);
  letter-spacing: -0.01em;
}

/* ── WhatsApp beside Instagram ────────────────────────────────────────── */
.ig-follow:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ── Today ────────────────────────────────────────────────────────────── */
.today-lead {
  font-family: 'Heebo', sans-serif; font-size: 18px; font-weight: 500;
  color: var(--ink); margin-top: 10px;
}
.today-cta { margin-top: 20px; }
@media (max-width: 619px) { .exp--six .exp-card-img { aspect-ratio: 16/9; } }