/* =====================================================================
   HERO (round 2): a light room, drifting daylight, three still lifes at
   three depths, a headline that assembles word by word.
   ===================================================================== */
.hero { padding: 0; height: 175svh; }
.hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; border-radius: var(--r) var(--r) 0 0; isolation: isolate; }

.hero__bg { position: absolute; inset: -4%; z-index: 0;
  transform: translate3d(0, calc(var(--hp, 0) * 7vh), 0) scale(calc(1 + var(--hp, 0) * 0.06)); }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 30%; max-width: none; display: block;
  animation: heroPush 2600ms cubic-bezier(0.2, 0.7, 0.1, 1) both; }
@keyframes heroPush { from { scale: 1.14; filter: brightness(1.08); } to { scale: 1; filter: none; } }

/* a patch of daylight drifting across the wall, slow enough to feel like time */
.hero__sun { position: absolute; inset: -20%; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(38% 30% at 30% 35%, rgb(255 236 200 / 0.95), rgb(255 236 200 / 0) 70%);
  animation: sunDrift 18s ease-in-out infinite alternate; }
@keyframes sunDrift { from { transform: translate3d(-6%, -3%, 0) rotate(-4deg); } to { transform: translate3d(10%, 5%, 0) rotate(3deg); } }

/* the photograph is washed away from the text rather than darkened under it */
.hero__wash { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(246 243 238 / 0.94) 0%, rgb(246 243 238 / 0.86) 36%, rgb(246 243 238 / 0.2) 62%, rgb(246 243 238 / 0) 78%),
    linear-gradient(to top, rgb(246 243 238 / 0.9) 0%, rgb(246 243 238 / 0) 22%); }

/* three still lifes, three depths (--d): they part as you scroll, lean to the pointer */
.hero__cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hcard { position: absolute; margin: 0; width: var(--w); border-radius: var(--r); background: var(--white); padding: 8px 8px 10px;
  box-shadow: 0 30px 50px -28px rgb(60 44 28 / 0.45), 0 2px 6px rgb(60 44 28 / 0.08);
  transform: translate3d(calc(var(--mx, 0) * 16px * var(--d)), calc(var(--hp, 0) * -34vh * var(--d) + var(--my, 0) * 10px * var(--d)), 0) rotate(var(--r0));
  will-change: transform; }
.hcard img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; max-width: none; }
.hcard figcaption { margin-top: 8px; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--soft); }
.hcard > * { animation: cardIn 1200ms cubic-bezier(0.2, 0.75, 0.1, 1) both; animation-delay: var(--delay); }
@keyframes cardIn { from { opacity: 0; transform: translateY(90px) rotate(7deg) scale(0.92); } to { opacity: 1; transform: none; } }
.hcard--a { --w: min(17vw, 250px); right: 27%; top: 13%; --r0: -5deg; --delay: 500ms; z-index: 1; }
.hcard--b { --w: min(20vw, 300px); right: 7%; top: 27%; --r0: 3deg; --delay: 650ms; z-index: 3; }
.hcard--c { --w: min(15vw, 225px); right: 26%; top: 56%; --r0: -2deg; --delay: 800ms; z-index: 2; }

.hero__copy { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; justify-content: center;
  transform: translate3d(0, calc(var(--hp, 0) * -12vh), 0); opacity: clamp(0, (0.9 - var(--hp, 0)) * 3, 1); }
.hero__kicker { padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); max-width: 560px; }
.hero__h { margin: clamp(22px, 3vw, 40px) 0 0; font-family: var(--sc-font-display); font-size: clamp(2.3rem, 0.8rem + 4.4vw, 5.8rem); line-height: 0.99; letter-spacing: -0.045em; max-width: 14ch; text-wrap: balance; }
.hero__sub { margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: var(--soft); }
.hero__buy { margin-top: clamp(26px, 3.4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero__today { font-size: 0.95rem; color: var(--soft); max-width: 36ch; line-height: 1.5; }
.hero__today b { display: block; color: var(--text); }
.facts { padding-block: 0 clamp(56px, 7vw, 100px); }
.facts .title__facts { margin-top: 0; }

/* ------------------------------------------------------------ motion kit
   Words rise out of their own line; photos open with a wipe and settle;
   short elements rise into place. All once, on arrival. */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.wd__i { display: inline-block; transform: translateY(108%); transition: transform 1000ms cubic-bezier(0.2, 0.75, 0.1, 1); transition-delay: calc(var(--i, 0) * 45ms); }
[data-words].is-in .wd__i { transform: none; }
[data-rise] { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--sc-ease-out), transform 900ms var(--sc-ease-out); transition-delay: var(--rd, 0ms); }
[data-rise].is-in { opacity: 1; transform: none; }
[data-wipe] { clip-path: inset(0 0 100% 0 round var(--r)); transition: clip-path 1300ms cubic-bezier(0.65, 0, 0.2, 1); }
[data-wipe] img { scale: 1.14; transition: scale 1800ms cubic-bezier(0.2, 0.75, 0.1, 1); }
[data-wipe].is-in { clip-path: inset(0 0 0 0 round var(--r)); }
[data-wipe].is-in img { scale: 1; }
/* the engine's flow rise, a little bolder */
[data-sc-in], [data-sc-stagger] > * { transform: translate3d(0, 28px, 0); transition-duration: 850ms, 850ms; }

@media (prefers-reduced-motion: reduce) {
  .hero__bg img, .hcard > *, .hero__sun { animation: none !important; }
  .hero__bg, .hcard, .hero__copy { transform: none !important; }
  .hero__copy { opacity: 1 !important; }
  .wd__i, [data-rise] { transform: none !important; opacity: 1 !important; transition: none; }
  [data-wipe] { clip-path: none !important; }
  [data-wipe] img { scale: 1 !important; }
}

@media (max-width: 860px) {
  .hero { height: 150svh; }
  .hero__wash { background:
    linear-gradient(to bottom, rgb(246 243 238 / 0.95) 0%, rgb(246 243 238 / 0.9) 50%, rgb(246 243 238 / 0.35) 72%, rgb(246 243 238 / 0.1) 100%); }
  .hero__bg img { object-position: 8% 30%; }
  .hero__copy { justify-content: flex-start; padding-top: 7svh; }
  .hero__h { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .hero__buy .btn { width: 100%; }
  .hero__today { font-size: 0.88rem; }
  .hcard { padding: 5px 5px 7px; }
  .hcard figcaption { display: none; }
  .hcard--a { --w: 31vw; right: auto; left: 5vw; top: auto; bottom: 5svh; --r0: -6deg; }
  .hcard--b { --w: 36vw; right: auto; left: 32vw; top: auto; bottom: 9svh; --r0: 2deg; }
  .hcard--c { --w: 29vw; right: 4vw; top: auto; bottom: 4svh; --r0: 5deg; }
  .hero__cards { z-index: 3; }
}

/* composition fixes: the cards keep to the right, the headline keeps its own space */
.hero__h { font-size: clamp(2.3rem, 0.8rem + 3.7vw, 5rem); }
@media (min-width: 861px) {
  .hcard--a { right: 21%; top: 10%; }
  .hcard--b { right: 3.5%; top: 25%; }
  .hcard--c { right: 19%; top: 58%; }
}
@media (max-width: 860px) and (max-height: 720px) {
  /* short phones: the fan waits just below the fold and rises with the scroll */
  .hcard--a { bottom: -16svh; }
  .hcard--b { bottom: -11svh; }
  .hcard--c { bottom: -18svh; }
}
@media (max-width: 860px) {
  /* on a phone the fan passes OVER the fading headline as it rises */
  .hero__cards { z-index: 5; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .hcard--a { bottom: -22svh; }
  .hcard--b { bottom: -18svh; }
  .hcard--c { bottom: -24svh; }
}