/* Section `arrive` (module story): sticky chapter text at y 72–190 on a halo. The painted scene is the show. */
@layer sections{
[data-section="arrive"]{min-height:calc(var(--vh-small) * 1.4);pointer-events:none}
[data-section="arrive"] .arrive-sticky{position:sticky;top:calc(72px + var(--safe-t));width:100%;display:flex;justify-content:center}
[data-section="arrive"] .arrive-block{position:relative;z-index:0;max-width:330px;padding:var(--sp-3) var(--sp-5) var(--sp-4);text-align:center;opacity:0;will-change:opacity}
/* a soft scene-tinted scrim (not a cream oval) that melts into the sky, plus a glow on the type */
[data-section="arrive"] .arrive-halo{position:absolute;z-index:-1;inset:-6px -18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,240,222,.55),rgba(250,226,200,.3) 60%,rgba(250,226,200,0))}
[data-section="arrive"] .arrive-eyebrow,[data-section="arrive"] .arrive-line{text-shadow:0 0 12px rgba(255,246,240,.95),0 0 3px rgba(255,250,246,.85)}
[data-section="arrive"] .arrive-eyebrow{font-family:var(--font-label);font-weight:600;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-silver-ink);line-height:1.5}
[data-section="arrive"] .arrive-line{margin-top:var(--sp-2);font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(20px,5.4vw,23px);line-height:1.28;color:var(--c-forest);text-wrap:balance}
[data-section="arrive"] .arrive-chip{display:inline-flex;align-items:center;margin-top:var(--sp-3);min-height:30px;padding:0 var(--sp-4);border-radius:var(--r-chip);
  background:rgba(255,253,249,.86);border:var(--hairline);font-size:var(--fs-small);color:var(--c-forest);font-weight:600}
[data-section="arrive"]:lang(ar) .arrive-line{font-style:normal;font-size:clamp(21px,5.6vw,24px);line-height:1.75}
[data-section="arrive"]:lang(ar) .arrive-eyebrow{font-size:14px;letter-spacing:0;text-transform:none}
[data-section="arrive"] .arrive-gem{display:inline-flex;vertical-align:-1px;margin:0 .55em}
[data-section="arrive"] .arrive-gem svg{width:13px;height:10px}
@media (max-height:700px){[data-section="arrive"] .arrive-sticky{top:calc(60px + var(--safe-t))}}

/* sunset into night: once the scene turns to twilight/night (html[data-tod], core/tod.js) the cream halo
   crossfades to a soft deep-teal scrim and the type turns ivory, so the caption reads on the dark sky */
[data-section="arrive"] .arrive-halo::after{content:"";position:absolute;inset:-6px -10px;border-radius:50%;opacity:0;transition:opacity 900ms var(--ease-silk);
  background:radial-gradient(closest-side,rgba(16,42,48,.66),rgba(16,42,48,.44) 55%,rgba(16,42,48,0))}
[data-section="arrive"] .arrive-halo{transition:background-color 900ms var(--ease-silk)}
[data-section="arrive"] .arrive-eyebrow,[data-section="arrive"] .arrive-line{transition:color 900ms var(--ease-silk),text-shadow 900ms var(--ease-silk)}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="arrive"] .arrive-halo{background:radial-gradient(closest-side,rgba(246,239,230,.10),rgba(246,239,230,0))}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="arrive"] .arrive-halo::after{opacity:1}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="arrive"] .arrive-eyebrow{color:var(--c-silver-200)}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="arrive"] .arrive-line{color:var(--c-ivory);text-shadow:0 1px 14px rgba(16,42,48,.55)}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="arrive"] .arrive-eyebrow{text-shadow:0 1px 10px rgba(16,42,48,.6)}
}