/* The owner-selected Assembly, with Living Light accents.
   The scene uses native scroll timelines. No scroll interception or scroll listeners. */
.into-light {
 --paper:#102871; --panel:#193785; --ink:#fff0db; --muted:#c4d4f4;
 --accent:#f4b842; --on-accent:#102871; --focus:#f4b842;
 --honey:#f4b842; --orange:#d9582b; --terracotta:#bf3c20;
 --pale-blue:#83a1d4; --daylight:#fff0db; --blue-ink:#203265;
 --warm-line:#c7b895; --warm-muted:#4e5572;
 --action-shadow:rgb(16 40 113 / .28);
 --preview-height:44px; --scene-height:calc(100svh - var(--preview-height));
 overflow-x:clip;
}
html {scroll-padding-top:64px;overflow-anchor:none}
.into-light .preview-bar {position:sticky;top:0;height:var(--preview-height);z-index:30;background:var(--paper);border:0}
.into-light .preview-bar>span {color:var(--muted)}
.into-light .site-header {position:absolute;inset:0 0 auto;background:var(--paper);border-color:var(--transparent-line);z-index:10;min-height:96px}
.into-light .site-header nav a:nth-child(2) {display:flex}
.into-light .site-header .brand svg {color:var(--honey)}
.into-light .site-header .nav-cta {border-color:var(--pale-blue)}
.into-light .arrival-journey {position:relative;background:var(--daylight)}
.into-light .arrival-scene {position:relative;display:block;height:var(--scene-height);min-height:610px;max-height:none;isolation:isolate;padding:0;overflow:hidden;background:var(--paper)}
.into-light .hero::after {display:none}
.into-light #rays {z-index:0;opacity:.46;transform:rotate(180deg)}
.into-light .hero-copy {position:absolute;z-index:3;left:var(--space);right:var(--space);top:47%;transform:translateY(-50%);width:auto;padding:0;pointer-events:none}
.into-light h1 {font-family:var(--body);font-weight:700;font-size:clamp(106px,13.7vw,196px);line-height:1;letter-spacing:-.085em;text-align:center;max-width:none}
.into-light h1 span {animation:none;opacity:1;transform:none}
.into-light .arrival-subtitle {font:clamp(22px,2vw,28px)/1.18 var(--support);max-width:none;text-align:center;margin:24px 0 0;color:var(--daylight)}
.into-light .arrival-action {position:absolute;z-index:12;left:0;right:0;bottom:82px;text-align:center;pointer-events:none}
.into-light .arrival-action .primary {pointer-events:auto;min-height:56px;gap:32px;background:var(--honey);border:1px solid var(--blue-ink);color:var(--blue-ink);font-weight:700;box-shadow:0 0 0 1px var(--daylight),0 4px 0 var(--blue-ink),0 12px 24px var(--action-shadow)} /* unslop-ignore: owner-requested separation for the primary action against changing blue and cream backgrounds. */
.into-light .arrival-action .primary:hover {background:var(--daylight);border-color:var(--blue-ink);color:var(--paper);transform:translateY(-2px)}
.into-light .arrival-action .primary:active {transform:translateY(2px);box-shadow:0 0 0 1px var(--daylight),0 2px 0 var(--blue-ink),0 6px 12px var(--action-shadow)} /* unslop-ignore: tactile pressed state for the owner-requested primary action treatment. */
.into-light .arrival-action .primary:focus-visible {outline:3px solid var(--daylight);outline-offset:5px;box-shadow:0 0 0 8px var(--blue-ink)} /* unslop-ignore: dual-color keyboard focus stays visible on both scene backgrounds. */
.into-light .ceremony-side {top:38%;z-index:3;color:var(--pale-blue);opacity:1}
.light-atmosphere {position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 43%,transparent 15%,var(--paper) 75%);pointer-events:none}
.light-core {position:absolute;width:70vmin;height:70vmin;left:calc(50% - 35vmin);top:calc(43% - 35vmin);z-index:2;background:radial-gradient(circle,var(--daylight) 0%,var(--honey) 15%,var(--orange) 32%,transparent 68%);opacity:.14;transform:scale(.4);pointer-events:none}
.compass-flight {position:absolute;width:min(95vw,870px);height:min(95vw,870px);left:50%;top:43%;margin-left:calc(min(95vw,870px) / -2);margin-top:calc(min(95vw,870px) / -2);z-index:4;opacity:.22;transform:scale(.83);transform-origin:50% 43.8%;pointer-events:none;will-change:transform,opacity}
.living-compass {width:100%;height:100%;overflow:visible}
.compass-dial {stroke:var(--pale-blue);stroke-width:1;fill:none;transform-origin:center}
.compass-ticks {stroke:var(--honey);stroke-width:1.5}
.compass-minors {fill:var(--pale-blue);stroke:none;opacity:.5}
.needle {stroke:var(--honey);stroke-width:1;fill:var(--paper)}
.needle.n0,.needle.n2 {fill:var(--honey);fill-opacity:.48}
.needle.n1,.needle.n3 {fill:var(--orange);fill-opacity:.7;stroke:var(--orange)}
.compass-cross {fill:none;stroke-linecap:square}
.cross-shadow {stroke:var(--paper);stroke-width:20}
.cross-body {stroke:var(--daylight);stroke-width:9}
.cross-glint {stroke:var(--honey);stroke-width:2}
.scroll-invitation {position:absolute;z-index:3;bottom:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:15px;font:italic 21px/1 var(--support);color:var(--daylight);pointer-events:none}
.scroll-invitation svg {height:28px;width:18px;stroke:var(--honey);stroke-width:1.4;fill:none}
.light-wash {position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--daylight);opacity:0}
.arrival-line {position:absolute;z-index:6;inset:36% 24px auto;text-align:center;color:var(--blue-ink);font:italic clamp(36px,4.2vw,68px)/1.2 var(--support);opacity:0;pointer-events:none}
/* The first reading section starts in the same light that fills the scene. */
.into-light .covenant-band {background:var(--daylight);color:var(--terracotta);padding-block:28px;border-bottom:1px solid var(--warm-line)}
.into-light .manifesto {background:var(--daylight);color:var(--blue-ink);border-color:var(--warm-line);padding-block:112px}
.into-light .manifesto h2 {animation:none;opacity:1;transform:none}
.into-light .manifesto .support-serif {color:var(--terracotta)}
.into-light .begin-section {--accent:var(--honey);background:var(--paper)}
.into-light .section-sign {color:var(--honey)}
.into-light .route-answer {background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--honey)}
.into-light .route-answer .tiny {color:var(--honey)}
.into-light .sample {--paper:#203265;--ink:#fff0db;--accent:#bf3c20;--on-accent:#fff0db;--focus:#bf3c20;--line:#83a1d4;background:#d3e3ff;color:var(--paper)}
.into-light .sample-symbol {color:var(--paper)}
.into-light .sample-symbol::before {border-color:var(--pale-blue)}
.into-light .sample-symbol svg {color:var(--terracotta)}
.into-light .about {background:var(--daylight);color:var(--blue-ink);--line:var(--warm-line);--muted:var(--warm-muted);--accent:var(--terracotta)}
.into-light .updates {background:var(--paper)}
.into-light .updates .primary {background:var(--honey);color:var(--blue-ink);font-weight:700}
.into-light footer {border-top:1px solid var(--line)}
/* Scroll comes from the browser; the whole passage remains ordinary document flow.
   If CSS timelines are unavailable, the unanimated one-screen composition is the fallback. */
@supports (animation-timeline:view()) {
 @media (prefers-reduced-motion:no-preference) {
  html:not(.motion-off) .into-light .arrival-journey {height:300svh;view-timeline-name:--arrival;view-timeline-axis:block;view-timeline-inset:44px 0px}
  html:not(.motion-off) .into-light .arrival-scene {position:sticky;top:44px}
  html:not(.motion-off) .into-light .hero-copy {animation:words-open linear both;animation-timeline:--arrival;animation-range:contain 0% contain 100%}
  html:not(.motion-off) .into-light .compass-flight {animation:through-compass linear both;animation-timeline:--arrival;animation-range:contain 0% contain 100%}
  html:not(.motion-off) .into-light .compass-dial {animation:compass-align linear both;animation-timeline:--arrival;animation-range:contain 0% contain 100%}
  html:not(.motion-off) .into-light .light-core {animation:light-opens linear both;animation-timeline:--arrival;animation-range:contain 0% contain 100%}
  html:not(.motion-off) .into-light .light-wash {animation:arrive-in-light linear both;animation-timeline:--arrival;animation-range:contain 0% contain 100%}
  html:not(.motion-off) .into-light .arrival-line {animation:arrival-words linear both;animation-timeline:--arrival;animation-range:contain 0% contain 100%}
  html:not(.motion-off) .into-light .site-header {animation:header-ink ease-in-out both;animation-timeline:--arrival;animation-range:contain 0% contain 100%}
  html:not(.motion-off) .into-light .scroll-invitation,html:not(.motion-off) .into-light .ceremony-side {animation:quiet-away linear both;animation-timeline:--arrival;animation-range:contain 0% contain 100%}
 }
}
@keyframes words-open {0%,4%{opacity:1;transform:translateY(-50%) scale(1);filter:blur(0)}30%{opacity:.16;transform:translateY(-55%) scale(1.1);filter:blur(1px)}43%,100%{opacity:0;transform:translateY(-62%) scale(1.3);filter:blur(5px)}}
@keyframes through-compass {0%,4%{opacity:.22;transform:scale(.83)}23%{opacity:.88;transform:scale(.96)}43%{opacity:1;transform:scale(1.35)}64%{opacity:1;transform:scale(2.8)}82%{opacity:.8;transform:scale(6)}100%{opacity:0;transform:scale(14)}}
@keyframes compass-align {0%{transform:rotate(-18deg)}43%{transform:rotate(0deg)}100%{transform:rotate(12deg)}}
@keyframes light-opens {0%,15%{opacity:.14;transform:scale(.4)}40%{opacity:.5;transform:scale(1.1)}65%{opacity:.8;transform:scale(3)}90%,100%{opacity:1;transform:scale(6)}}
@keyframes arrive-in-light {0%,45%{opacity:0}68%{opacity:.28}89%,100%{opacity:1}}
@keyframes arrival-words {0%,75%{opacity:0;transform:translateY(18px)}94%,100%{opacity:1;transform:translateY(0)}}
@keyframes quiet-away {0%,5%{opacity:1}24%,100%{opacity:0}}
/* Dissolve through the light; switch ink only while the header is invisible.
   Blending opposite text/background colors would leave unreadable gray text. */
@keyframes header-ink {
 0%,56%{opacity:1;color:var(--daylight);background:var(--paper)}
 69%{opacity:0;color:var(--daylight);background:var(--paper)}
 70%{opacity:0;color:var(--blue-ink);background:var(--daylight)}
 84%,100%{opacity:1;color:var(--blue-ink);background:var(--daylight)}
}
/* Keyboard navigation always reveals a readable header, even mid-dissolve. */
.into-light .site-header:focus-within {animation:none!important;opacity:1;color:var(--daylight);background:var(--paper)}
/* Content stays readable if someone explicitly pauses, prefers less motion, prints,
   has no script, or uses a browser without CSS scroll timelines. */
.motion-off .into-light .arrival-journey {height:auto}
.motion-off .into-light .arrival-scene {position:relative;top:auto}
.motion-off .into-light .scroll-invitation {display:none}
.motion-off .into-light .arrival-action {bottom:55px}
@media(max-width:1000px) {
 .into-light .arrival-scene {min-height:570px}
 .into-light .site-header {min-height:88px}
 .into-light .site-header .brand {font-size:23px}
 .into-light .hero-copy {top:45%}
 .into-light h1 {font-size:clamp(90px,14vw,144px)}
 .into-light .arrival-action {bottom:88px}
}
@media(max-width:700px) {
 .into-light .preview-bar {padding-inline:20px}
 .into-light .preview-bar>span {display:none}
 .into-light .site-header {display:flex;padding-inline:22px;min-height:80px;gap:12px}
 .into-light .site-header .brand {font-size:18px;gap:7px}
 .into-light .site-header nav a:nth-child(2) {display:none}
 .into-light .site-header .nav-cta {font-size:11px;white-space:nowrap;padding-inline:0;border:0}
 .into-light .site-header .brand svg {width:24px;height:36px}
 .into-light .arrival-scene {min-height:560px}
 .into-light .hero-copy {top:44%;left:20px;right:20px}
 .into-light h1 {font-size:clamp(63px,17.5vw,118px);line-height:1;letter-spacing:-.075em}
 .into-light .arrival-subtitle {font-size:24px;line-height:1.16;margin-top:24px}
 .into-light .arrival-action {bottom:104px}
 .compass-flight {width:600px;height:600px;margin-left:-300px;margin-top:-300px;top:40%}
 .scroll-invitation {bottom:37px;font-size:20px}
 .into-light .ceremony-side {display:none}
 .into-light .covenant-band {font-size:clamp(20px,5.9vw,40px);gap:12px;padding:24px 20px}
 .into-light .manifesto {padding-block:70px}
 .arrival-line {font-size:42px;inset:33% 30px auto}
}
@media(max-height:680px) and (min-width:701px) {
 .into-light .arrival-scene {min-height:500px}
 .into-light h1 {font-size:clamp(86px,11vw,130px)}
 .into-light .arrival-subtitle {font-size:22px;margin-top:12px}
 .into-light .arrival-action {bottom:65px}
 .scroll-invitation {bottom:15px}
}
@media(prefers-reduced-motion:reduce) {
 .into-light .arrival-journey {height:auto}
 .into-light .arrival-scene {position:relative;top:auto}
 .into-light .scroll-invitation {display:none}
 .into-light .compass-flight {will-change:auto}
}
@media print {
 .into-light .arrival-journey {height:auto!important}
 .into-light .arrival-scene {position:relative!important;height:auto!important;min-height:400px!important}
 .into-light .compass-flight,.into-light .light-core,.into-light .light-wash,.into-light .arrival-line,.into-light .scroll-invitation {display:none}
 .into-light .hero-copy {opacity:1!important;filter:none!important}
}

.into-light .site-header a:focus-visible {outline-color:currentColor}

.into-light .preview-bar::after {content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);pointer-events:none}

/* Ambient rotation belongs to the outer circle alone. The existing parent
   still supplies scroll movement; the central cross remains upright. */
.compass-outer-ring {
 transform-box:view-box;
 transform-origin:500px 500px;
 filter:drop-shadow(0 0 3px #d3e3ff80) drop-shadow(0 0 9px #f4b84240);
 animation:outer-ring-drift 160s linear infinite;
}
@keyframes outer-ring-drift {to {transform:rotate(360deg)}}
.praying .compass-outer-ring,.low-power .compass-outer-ring {
 animation-play-state:paused!important;
}
@media(prefers-reduced-motion:reduce) {
 .compass-outer-ring {animation:none!important}
}

/* Two quiet parallel walking trails below the signup content, with room of their own.
   Positive staggered delays make footprints arrive one step at a time. */
.into-light .updates {row-gap:32px;padding-bottom:24px}
.footsteps {
 --foot-width:56px; --step-count:11; --foot-opacity:.15;
 grid-column:1 / -1;position:relative;height:180px;
 margin-inline:calc(-1 * var(--space));overflow:hidden;
 color:var(--daylight);pointer-events:none;user-select:none;
}
.footstep-definitions {position:absolute;overflow:hidden}
.footstep-trail {position:absolute;inset:12px 0 auto;height:64px;--walking-offset:0s;--step-cadence:.65s}
.second-walker {top:96px;--walking-offset:.18s;--foot-width:46px;--step-count:13;--step-cadence:.55s}
.footstep {
 position:absolute;width:var(--foot-width);height:calc(var(--foot-width) * .55);
 left:calc(var(--step) * (100% - var(--foot-width)) / var(--step-count));
 top:0;fill:currentColor;opacity:var(--foot-opacity);
 transform-origin:50% 50%;
}
.right-foot {top:32px}
.right-foot use {transform:translateY(44px) scaleY(-1)}
/* The smaller companion takes shorter, quicker steps with a narrower gait.
   Independent rotation preserves foot placement when motion is paused. */
.second-walker .footstep {top:4px;rotate:-4deg;left:calc(5px + var(--step) * (100% - var(--foot-width) - 10px) / var(--step-count))}
.second-walker .right-foot {top:29px;rotate:5deg}
.second-walker .footstep:nth-child(4n + 3) {top:2px;rotate:-2deg}
.second-walker .footstep:nth-child(4n + 4) {top:31px;rotate:3deg}
.footsteps[data-animate] .footstep {
 animation:quiet-footfall 16s ease-out infinite both;
 animation-delay:calc(var(--step) * var(--step-cadence) + var(--walking-offset));
 animation-play-state:paused;
}
.footsteps.is-in-view .footstep {animation-play-state:running}
@keyframes quiet-footfall {
 0% {opacity:0;transform:translateX(-5px) scale(.94)}
 3% {opacity:var(--foot-opacity);transform:translateX(0) scale(1)}
 58% {opacity:var(--foot-opacity)}
 83%,100% {opacity:0;transform:translateX(0) scale(1)}
}
.motion-off .footstep,.low-power .footstep {
 animation:none!important;opacity:var(--foot-opacity);transform:none;
}
@media(max-width:700px) {
 .into-light .updates {row-gap:28px;padding-bottom:18px}
 .footsteps {--foot-width:44px;--step-count:5;height:144px}
 .footstep-trail {height:52px}
 .second-walker {top:80px;--foot-width:36px;--step-count:6;--step-cadence:.54s}
 .footstep {top:0}
 .right-foot {top:27px}
 .first-walker .footstep:nth-child(n+7),.second-walker .footstep:nth-child(n+8) {display:none}
 .second-walker .right-foot {top:24px}
 .second-walker .footstep:nth-child(4n + 4) {top:26px}
}
@media(prefers-reduced-motion:reduce) {
 .footsteps .footstep {animation:none!important;opacity:var(--foot-opacity);transform:none}
}
@media print {.footsteps {display:none}}

/* The heartbeat stays on the cross, separate from the rotating compass dial. */
.living-compass .cross-heartbeat {stroke:none;opacity:.18;transform-box:view-box;transform-origin:500px 438px;transform:scale(.82);animation:cross-heartbeat 3.2s ease-in-out infinite;pointer-events:none}
@keyframes cross-heartbeat {0%,42%,100% {opacity:.18;transform:scale(.82)}10% {opacity:.8;transform:scale(1.08)}18% {opacity:.32;transform:scale(.94)}28% {opacity:.64;transform:scale(1.02)}}
.praying .cross-heartbeat,.low-power .cross-heartbeat {animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce),print {.living-compass .cross-heartbeat {animation:none!important}}
@media print {.living-compass .cross-heartbeat {display:none}}