/* Cinematic layer. Every rule is scoped under .cin, which cinema.js adds only when
   scripts run and the visitor has not asked for reduced motion. Without it the page
   renders exactly as before. */

@property --w {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ---- Opening: the mark assembles, then the frame splits along the 47° cut ---- */

.intro { display: none; }

.intro-on .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  animation: intro-gone 0s linear 2.4s forwards;
}

.intro__a,
.intro__b {
  position: absolute;
  inset: 0;
  background: var(--black, #0e0e0e);
}

.intro__a {
  clip-path: polygon(0 0, calc(50vw + 46.6vh) 0, calc(50vw - 46.6vh) 100%, 0 100%);
  animation: intro-a 0.8s cubic-bezier(0.76, 0, 0.24, 1) 1.3s forwards;
}

.intro__b {
  clip-path: polygon(calc(50vw + 46.6vh) 0, 100% 0, 100% 100%, calc(50vw - 46.6vh) 100%);
  animation: intro-b 0.8s cubic-bezier(0.76, 0, 0.24, 1) 1.3s forwards;
}

.intro__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(36vw, 190px);
  height: auto;
  translate: -50% -50%;
  overflow: visible;
  animation: intro-mark-out 0.45s ease-in 1.2s forwards;
}

.intro__chev {
  fill: var(--accent-dark, #6fd68a);
  transform-box: fill-box;
  animation: intro-chev 0.95s cubic-bezier(0.2, 0.7, 0.1, 1) 0.15s both;
}

.intro__arms {
  fill: var(--on-panel, #dcdcd6);
  animation: intro-arms 0.95s cubic-bezier(0.2, 0.7, 0.1, 1) 0.15s both;
}

@keyframes intro-chev {
  from { transform: translateX(-340px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes intro-arms {
  from { transform: translateX(340px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes intro-mark-out {
  to { opacity: 0; scale: 1.15; }
}

@keyframes intro-a { to { translate: -88vmax -82vmax; } }
@keyframes intro-b { to { translate: 88vmax 82vmax; } }
@keyframes intro-gone { to { visibility: hidden; } }

.intro-on .hero__rise { animation-delay: calc(var(--d, 0s) + 1.55s); }

/* ---- Headlines: word-level masked rise (never per letter, Arabic must keep joining) ---- */

.cin .split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.22em;
  margin-block: -0.22em;
}

.cin .split .w__i {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: calc(var(--base, 0s) + var(--i, 0) * 70ms);
}

.cin .split.is-in .w__i { transform: none; }

.cin .split.reveal,
.cin .split.hero__rise {
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
}

/* ---- The cut as a section wipe ---- */

.cin [data-cut] {
  --w: 0;
  clip-path: polygon(0 0, calc(var(--w) * 146%) 0, calc(var(--w) * 146% - 46%) 100%, 0 100%);
  transition: --w 1.2s cubic-bezier(0.2, 0.7, 0.1, 1);
}

.cin [data-cut].is-cut { --w: 1; }
.cin [data-cut].cut-done { clip-path: none; transition: none; }

:root[dir="rtl"].cin [data-cut],
:root[dir="rtl"] .cin [data-cut] {
  clip-path: polygon(100% 0, calc(100% - var(--w) * 146%) 0, calc(100% - var(--w) * 146% + 46%) 100%, 100% 100%);
}

:root[dir="rtl"].cin [data-cut].cut-done { clip-path: none; }

/* ---- Pinned principle: the line lights up word by word while the symbol grows ---- */

.cin .section--quote {
  position: relative;
  height: 240vh;
  padding: 0;
  background: var(--panel);
  color: var(--on-panel);
}

.cin .section--quote > .container {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-items: center;
}

:root .cin .section--quote .quote,
.cin :root .section--quote .quote,
.cin .section--quote .quote {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  max-width: none;
  padding: 0;
  border: 0;
  text-align: center;
}

.cin .section--quote .quote > div { width: 100%; max-width: none; justify-self: center; }
.cin .section--quote .quote__text { max-width: 13em; margin-inline: auto; }
.cin .section--quote .quote__by { max-width: 40ch; margin-inline: auto; }

.cin .section--quote .quote__text {
  margin-bottom: 2rem;
  font-size: clamp(2.1rem, 5vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.cin .section--quote .quote__text .w__q {
  display: inline-block;
  opacity: 0.14;
}

.cin .section--quote .quote__by {
  color: color-mix(in srgb, var(--on-panel) 62%, transparent);
  opacity: calc((var(--qp, 0) - 0.82) * 6);
}

.cin .section--quote .quote__by strong { color: var(--on-panel); }

:root .cin .section--quote .quote__crop,
.cin .section--quote .quote__crop {
  position: absolute;
  z-index: -1;
  left: 50%;
  right: auto;
  top: 50%;
  width: min(980px, 120vw);
  height: auto;
  translate: -50% -50%;
  scale: calc(0.5 + var(--qp, 0) * 0.95);
  transform: none;
  --accent: color-mix(in srgb, var(--accent-solid) 30%, transparent);
  color: color-mix(in srgb, var(--on-panel) 7%, transparent);
}

:root[dir="rtl"].cin .section--quote .quote {
  border: 0;
  padding: 0;
}

/* GSAP drives programmatic scrolling (anchor glides); native smooth scrolling would
   fight it, so it is off while the motion layer is active. */
html.cin { scroll-behavior: auto; }

/* ---- Contact: the signal field slides in along the cut ---- */

.cin .cta__field {
  translate: 36% 0;
  transition: translate 1.35s var(--ease-out) 0.15s;
}

.cin .cta.is-in .cta__field { translate: 0 0; }

:root[dir="rtl"].cin .cta__field,
:root[dir="rtl"] .cin .cta__field { translate: -36% 0; }

:root[dir="rtl"].cin .cta.is-in .cta__field,
:root[dir="rtl"] .cin .cta.is-in .cta__field { translate: 0 0; }

@media (max-width: 760px) {
  .cin .cta__field { translate: 0 70%; }
  :root[dir="rtl"].cin .cta__field { translate: 0 70%; }
  .cin .cta.is-in .cta__field,
  :root[dir="rtl"].cin .cta.is-in .cta__field { translate: 0 0; }
  .cin .section--quote { height: 200vh; }
}

/* A language arrival is already revealed by the document transition. Do not hide it again. */
.language-arrival .hero__rise,
.language-arrival.cin .reveal,
.language-arrival.cin .split .w__i {
  animation: none;
  transition: none;
  opacity: 1;
  transform: none;
}
:root.language-arrival.cin [data-cut] { clip-path: none; transition: none; }