/* Home: one sticky scene. The pouch glides with the scroll; four lines of copy trade places. */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); }
html { scroll-behavior: auto; }
body.home { overflow-x: hidden; }

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--xl) clamp(var(--xl), 4vw, 48px);
}
.bar .brand img { height: 24px; width: auto; }
.bar a.lang { font-size: 14px; color: var(--text-secondary); transition: color .2s; }
.bar a.lang:hover { color: var(--text); }

.stage { position: relative; height: 470vh; }
.scene {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
/* One studio photo of the pouch on the same white as the page, so there is no cutout edge. Moved
   only by transforms: sharp at any size and composited on the GPU, so scrolling never waits on
   image decoding. Its contact shadow is part of the photo. */
#pouch {
  position: absolute; left: 50%; top: 50%;
  opacity: 0;
  scale: 0.96; translate: 0 16px;
  transition: opacity 1.1s var(--ease-out), scale 1.4s var(--ease-out), translate 1.4s var(--ease-out);
  will-change: transform;
}
#pouch img { display: block; width: 100%; height: 100%; }
.ready #pouch { opacity: 1; scale: 1; translate: 0 0; }

/* First load: the header settles in. */
@keyframes settle {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); }
}
.bar > * { animation: settle 0.8s var(--ease-out) 0.55s both; }

.beats { position: absolute; inset: 0; pointer-events: none; }
.beat { position: absolute; pointer-events: none; }
.beat.on { pointer-events: auto; }
.beat h1, .beat h2 {
  font-weight: 300;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
html[lang="ar"] .beat h1, html[lang="ar"] .beat h2 { letter-spacing: 0; line-height: 1.3; }
.beat h1 .ln { display: block; }
.beat p { margin-top: var(--lg); font-size: clamp(16px, 1.5vw, 19px); color: var(--text-secondary); }

/* Word by word: each word rises out of its own mask. The incoming line waits a beat so the
   outgoing one has cleared; scrolling back plays it all in reverse. */
.beat .w {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: 0.1em 0.05em 0.16em; margin: -0.1em -0.05em -0.16em;
}
.beat .w > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.45s cubic-bezier(0.5, 0, 0.75, 0);
  transition-delay: calc(var(--i) * 25ms);
}
.beat.on .w > span {
  transform: none;
  transition: transform 1s var(--ease-out);
  transition-delay: calc(0.3s + var(--i) * 75ms);
}
.beat.gone .w > span { transform: translateY(-115%); }
.beat p, .beat .actions {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.35s, transform 0.45s;
}
.beat.on p, .beat.on .actions {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(0.45s + var(--n) * 75ms);
}

/* Page cover for switching language: rises over this page, lifts off the next. */
html::after {
  content: ''; position: fixed; inset: 0; z-index: 100;
  background: var(--text);
  transform: translateY(100%);
  pointer-events: none;
}
html.leaving::after { transform: none; transition: transform 0.65s var(--ease-in-out); }
html.covered::after, html.lifting::after { transform: none; }
html.lifting::after { transform: translateY(-100%); transition: transform 0.9s var(--ease-in-out); }

/* Desktop: copy sits on the side the pouch is not on. Beats 1 and 3 on the start side. */
@media (min-width: 760px) {
  .beat { top: 50%; margin-top: -1.2em; width: 40vw; }
  .beat:nth-child(odd) { inset-inline-start: clamp(var(--xl), 7vw, 120px); }
  .beat:nth-child(even) { inset-inline-end: clamp(var(--xl), 7vw, 120px); }
  .beat.final { inset: auto 0 9vh 0; margin: 0; width: auto; text-align: center; }
}
@media (max-width: 759px) {
  .beat { inset: auto var(--xl) 10svh var(--xl); text-align: center; }
  .beat h1, .beat h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .beat p { margin-top: var(--sm); }
  .beat.final { bottom: 7svh; }
  .hint { bottom: var(--md); height: 32px; }
}

.final h2 { font-size: clamp(34px, 4.4vw, 56px); }
.final .actions { margin-top: var(--xl); display: flex; flex-direction: column; align-items: center; gap: var(--lg); }
.final .alt { font-size: 14px; color: var(--text-secondary); border-bottom: 1px solid var(--border); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.final .alt:hover { color: var(--text); border-color: var(--text); }
.final .btn { transition: opacity .2s var(--ease-out), transform .16s var(--ease-out); }
.final .btn:active { transform: scale(0.97); }

.hint {
  position: absolute; bottom: var(--xxl); left: 50%;
  width: 1px; height: 44px; margin-left: -.5px;
  background: var(--border); overflow: hidden;
  transition: opacity .4s;
}
.hint::after {
  content: ''; position: absolute; left: 0; top: -100%;
  width: 1px; height: 100%; background: var(--text);
  animation: hint 2.2s cubic-bezier(.6, 0, .2, 1) infinite;
}
@keyframes hint { to { top: 100%; } }
.scrolled .hint { opacity: 0; }

.foot {
  display: flex; flex-wrap: wrap; gap: var(--md) var(--xl);
  justify-content: center;
  padding: var(--xxl) var(--xl) var(--xxxl);
  font-size: 13px; color: var(--text-secondary);
}
.foot a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .hint::after { animation: none; top: 0; }
  #pouch { transition: none; scale: 1; translate: 0 0; }
  .bar > * { animation: none; }
  .beat .w > span, .beat p, .beat .actions { transition: none !important; }
  .final .btn:active { transform: none; }
}