/* ==========================================================================
   Home hero: copy on one side, the floating island story on the other.
   Motion is CSS for the loops (smoke, blades, clouds, confetti) and JS for
   the story beats. Logical properties only, so Arabic mirrors.
   ========================================================================== */

.hero-split { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-split h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); max-width: 17ch; }
.hero-split .lede { max-width: 44ch; }
.hero-split .eyebrow { background: var(--teal-100); padding: .35em .9em; border-radius: var(--pill); }
.hero-split .hl-word { color: var(--teal-500); }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .island { max-width: 560px; margin-inline: auto; width: 100%; }
}

/* the island card */
.island { margin: 0; position: relative; }
.island-tilt {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  transform-style: preserve-3d;
}
.island svg {
  display: block; width: 100%; height: auto; border-radius: 36px;
  border: 4px solid var(--indigo-900); box-shadow: var(--shadow-pop);
  background: #CBEBFA;
}

/* captions under the island */
.island-cap { display: grid; justify-items: center; gap: .55rem; margin-block-start: .9rem; }
.island-steps { display: grid; min-height: 2.6em; width: 100%; text-align: center; }
.island-steps > span {
  grid-area: 1 / 1; align-self: center; justify-self: center;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 1.7vw, 1.2rem); color: var(--indigo-700);
  background: var(--white); border: 3px solid var(--indigo-700); border-radius: var(--pill); padding: .3em 1.1em;
  box-shadow: 0 4px 0 var(--indigo-700);
  opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .35s, transform .35s;
}
.island-steps > span.on { opacity: 1; transform: none; }
.island-dots { display: flex; gap: .45rem; }
.island-dots i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--indigo-100); border: 2px solid var(--indigo-700); transition: background .3s; }
.island-dots i.on { background: var(--teal-400); }
.island.is-still .island-steps > span:last-child { opacity: 1; transform: none; }

/* ---- loops inside the svg ---- */
.il-float { animation: ilFloat 6s ease-in-out infinite; }
@keyframes ilFloat { 50% { transform: translateY(-9px); } }
.il-shadow { animation: ilShadow 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ilShadow { 50% { transform: scale(.9); opacity: .1; } }
.il-logo { animation: ilLogo 3.2s ease-in-out infinite; }
@keyframes ilLogo { 50% { transform: translateY(-5px); } }
.il-logo-glow { animation: ilGlow 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ilGlow { 50% { transform: scale(1.12); opacity: .7; } }
.il-rays { animation: ilSpin 26s linear infinite; }
.il-blades { animation: ilSpin 2.2s linear infinite; }
@keyframes ilSpin { to { transform: rotate(360deg); } }
.il-drift { animation: ilDrift 22s ease-in-out infinite alternate; }
.il-drift2 { animation-duration: 30s; animation-direction: alternate-reverse; }
@keyframes ilDrift { to { transform: translateX(46px); } }
.il-flag { animation: ilFlag 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
@keyframes ilFlag { 50% { transform: scaleX(.8) skewY(4deg); } }
.il-puff { fill: #57505E; opacity: 0; animation: ilPuff 3.2s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ilPuff { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 12% { opacity: .85; } 100% { transform: translate(16px, -60px) scale(2.4); opacity: 0; } }
.il-spark { animation: ilSpark .5s steps(2) infinite; }
@keyframes ilSpark { 50% { opacity: .15; } }
.il-flow path { stroke-dasharray: 6 14; animation: ilFlow .8s linear infinite; filter: drop-shadow(0 0 3px #FFC53D); }
@keyframes ilFlow { to { stroke-dashoffset: -20; } }
.il-ring { animation: ilRing 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ilRing { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.il-glint { animation: ilGlint 2.6s ease-in-out infinite; }
@keyframes ilGlint { 50% { opacity: .05; } }
.il-conf { animation: ilConf 3s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ilConf { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(600px) rotate(600deg); } }
.il-heart { animation: ilHeart 2.2s ease-out infinite; }
@keyframes ilHeart { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: 0 -44px; } }

/* windows light up */
.il-home .win { fill: #3B3F5C; transition: fill .4s; }
.il-home.lit .win { fill: #FFE27A; }
.il-home.lit .win { filter: drop-shadow(0 0 3px #FFD54F); }
.dwin { fill: #3B3F5C; }

@media (prefers-reduced-motion: reduce) {
  .island-tilt { transition: none; }
  .il-float, .il-shadow, .il-logo, .il-logo-glow, .il-rays, .il-blades, .il-drift, .il-flag, .il-puff, .il-spark,
  .il-flow path, .il-ring, .il-glint, .il-conf, .il-heart { animation: none; }
  .il-conf { opacity: 0; }
}

/* ---- impact figures: six in one even row, never a scroller ---- */
.impact-strip.six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.6rem); align-items: start; }
.impact-strip.six .impact-figure { margin: 0; background: var(--white); border: 3px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem .8rem; box-shadow: var(--shadow-card); height: 100%; }
.impact-strip.six .num { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.impact-strip.six .label { font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.3; }
@media (max-width: 1000px) { .impact-strip.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .impact-strip.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Home page rhythm: slightly larger type, a little wider, tighter gaps.
   Scoped to body.home so the other pages keep their own measure.
   ========================================================================== */
body.home { font-size: 19.5px; }
body.home .wrap { width: min(100% - 2.5rem, 1240px); }
body.home main > section { padding-block: clamp(2.2rem, 4.2vw, 3.5rem); }
body.home .hero-split { padding-block: clamp(1.5rem, 3.5vw, 2.6rem) clamp(1rem, 2vw, 1.6rem); }
body.home h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
body.home h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
body.home .lede { font-size: clamp(1.15rem, 1.8vw, 1.38rem); line-height: 1.55; }
body.home .hero-split .lede { font-size: clamp(1.2rem, 1.9vw, 1.45rem); max-width: 40ch; }
body.home .chip { font-size: .95rem; }
body.home .mt-3 { margin-block-start: 1.6rem; }

/* gallery text */
body.home .g-head { max-width: 58rem; margin-block-end: 1.4rem; }
body.home .g-sub { font-size: 1.45rem; margin-block: 2rem .9rem; }
body.home .g-partner-copy p { font-size: 1.12rem; }
body.home .g-partner-logo { height: clamp(52px, 7vw, 76px); }
body.home .g-quote blockquote { font-size: clamp(1.05rem, 1.45vw, 1.22rem); }
body.home .t-role { font-size: .98rem; }

/* impact cards */
body.home .impact-strip.six .num { font-size: clamp(2.5rem, 4vw, 3.6rem); }
body.home .impact-strip.six .label { font-size: clamp(1.02rem, 1.4vw, 1.18rem); }

/* experiments teaser cards */
body.home .exp-teaser-grid .t { font-size: 1.08rem; }
body.home .exp-teaser-grid .c { font-size: .95rem; }
body.home .exp-teaser { gap: clamp(1.6rem, 4vw, 3rem); }

/* why + what we do, side by side */
.why-what { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.why-copy .lede { color: var(--text); margin: 0; }
.what-list { display: grid; gap: 1rem; }
.what-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  background: var(--white); border: 3px solid var(--line); border-radius: var(--r-lg);
  padding: 1.15rem 1.4rem; box-shadow: var(--shadow-card);
}
.what-item .icon-badge { margin: 0; }
.what-item h3 { margin: 0 0 .2em; }
.what-item p { margin: 0; color: var(--text-soft); }
@media (max-width: 900px) { .why-what { grid-template-columns: 1fr; } }
body.home .slide-card figcaption { font-size: 1rem; font-weight: 700; color: var(--text-soft); margin-block-start: .5rem; }
body.home .panel { padding: clamp(1.6rem, 3vw, 2.4rem); }
body.home .panel .lede { font-size: clamp(1.2rem, 2vw, 1.45rem); }

/* ---- Grid Control game teaser ---- */
.band-game { background: linear-gradient(135deg, #2E2A63 0%, #4B2A6E 100%); color: #EDEBFB; }
.band-game h2 { color: #fff; }
.band-game .lede { color: #D9D4F7; }
.game-teaser { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
.game-copy h2 { margin-block: .6rem .35em; }
.game-points { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .65rem; }
.game-points li { display: flex; align-items: center; gap: .8rem; font-weight: 700; color: #fff; }
.gp-ic { width: 2.1rem; height: 2.1rem; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 1.05rem; color: var(--indigo-900); }
.gp-amber { background: var(--amber-400); } .gp-teal { background: var(--teal-400); } .gp-sky { background: var(--sky-400); } .gp-coral { background: var(--coral-400); }
.game-preview {
  position: relative; display: block; border-radius: 26px; overflow: hidden; text-decoration: none;
  border: 4px solid #fff; box-shadow: 0 10px 0 rgba(0,0,0,.25), 0 24px 50px rgba(0,0,0,.35);
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); transition: transform .35s ease, box-shadow .35s ease;
}
.game-preview:hover { transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px); box-shadow: 0 14px 0 rgba(0,0,0,.25), 0 30px 60px rgba(0,0,0,.4); }
.game-preview:focus-visible { outline: 4px solid var(--amber-400); outline-offset: 4px; }
.game-frame { display: block; aspect-ratio: 1296 / 856; background: #8CCBEF; }
.game-frame iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.game-play {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .6rem;
  background: rgba(34,30,82,.18); transition: background .25s;
}
.game-preview:hover .game-play { background: rgba(34,30,82,.05); }
.gp-btn {
  width: 5.2rem; height: 5.2rem; border-radius: 50%; background: var(--amber-400); color: var(--indigo-900);
  border: 4px solid var(--indigo-900); box-shadow: 0 6px 0 var(--indigo-900); display: grid; place-items: center;
  transition: transform .2s; animation: gpPulse 2s ease-in-out infinite;
}
.gp-btn svg { width: 2.2rem; height: 2.2rem; margin-inline-start: .3rem; }
.game-preview:hover .gp-btn { transform: scale(1.08); }
.game-play b { background: #fff; color: var(--indigo-900); font-family: var(--font-display); font-size: 1.15rem; padding: .25em 1em; border-radius: var(--pill); border: 3px solid var(--indigo-900); }
.game-badge { position: absolute; inset-inline-start: .9rem; inset-block-start: .9rem; background: var(--teal-400); color: var(--indigo-900); font-weight: 800; font-size: .88rem; padding: .3em .9em; border-radius: var(--pill); border: 2.5px solid var(--indigo-900); }
@keyframes gpPulse { 50% { box-shadow: 0 6px 0 var(--indigo-900), 0 0 0 12px rgba(255,197,61,.28); } }
@media (max-width: 900px) { .game-teaser { grid-template-columns: 1fr; } .game-preview { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gp-btn { animation: none; } .game-preview, .game-preview:hover { transform: none; } }