/* A scroll-led site journey and Cairn's motion language. All content remains visible without JS. */
.page-progress { position: fixed; inset: 0 0 auto; z-index: 110; height: 3px; pointer-events: none; background: #102b3b; }
.page-progress span { display: block; width: 100%; height: 100%; transform: scaleX(var(--page-progress,0)); transform-origin: left; background: linear-gradient(90deg,#54d8ee,#82abff 54%,#e4efff); box-shadow: 0 0 14px #6deaff9e; }
.scroll-cue { display: inline-block; color: inherit; border-bottom: 1px solid #a4e2f788; animation: cue-drift 2.8s ease-in-out infinite; }
.scroll-cue:hover { color: #b7efff; }
.scroll-cue:focus-visible { outline: 2px solid #a7efff; outline-offset: 5px; }

.journey { position: relative; isolation: isolate; overflow: clip; padding: clamp(84px,9vw,150px) 0 105px; color: #eaf7fd; background: radial-gradient(ellipse at 8% 16%,#1749667a,transparent 47%),radial-gradient(ellipse at 100% 90%,#0e709268,transparent 46%),#061723; }
.journey::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .32; background: repeating-radial-gradient(ellipse at 10% 35%,transparent 0 36px,#9edcf01a 37px 38px,transparent 39px 73px); pointer-events: none; }
.journey-heading { max-width: 1240px; padding-bottom: 65px; }
.journey-kicker { color: #82e1f6; font-size: 10px; font-weight: 800; letter-spacing: .23em; }
.journey-heading h2 { max-width: 890px; margin: 22px 0 20px; font-size: clamp(60px,7vw,112px); line-height: .98; letter-spacing: -.062em; }
.journey-heading h2 em { color: #a7e3fa; font-family: var(--serif); font-weight: 400; }
.journey-heading p { max-width: 600px; margin: 0; color: #b6d0de; font-size: 16px; line-height: 1.75; }
.journey-layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: clamp(50px,7vw,125px); align-items: start; }
.journey-stage { position: sticky; z-index: 3; top: 95px; height: min(70vh,650px); min-height: 490px; overflow: hidden; isolation: isolate; border: 1px solid #8dd4e377; border-radius: 17px; background: #0c2a3b; box-shadow: 0 34px 95px #000f1bd1,inset 0 1px #c5ecf887; }
.journey-stage::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg,#061925a6,transparent 24%,transparent 70%,#061925ba); pointer-events: none; }
.journey-stage-grid { position: absolute; inset: 0; z-index: 2; opacity: .23; background: linear-gradient(#b6edfa41 1px,transparent 1px),linear-gradient(90deg,#b6edfa41 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg,#000,transparent 80%); pointer-events: none; }
.journey-scene { position: absolute; inset: 0; background-image: linear-gradient(135deg,#071c2899,#071e2a14 50%,#061925aa),url('/assets/civzu-module-atlas-v1.webp'); background-size: cover,200% 200%; opacity: 0; transform: scale(1.13) rotate(1.5deg); transition: opacity .85s cubic-bezier(.16,1,.3,1),transform 1.6s cubic-bezier(.16,1,.3,1); }
.journey-scene-survey { background-position: center,left top; opacity: 1; transform: scale(1); }
.journey-scene-terrain { background-image: linear-gradient(135deg,#071c2899,#071e2a14 50%,#061925aa),url('/assets/civzu-terrain-hero.webp'); background-size: cover,cover; background-position: center,center; }
.journey-scene-design { background-position: center,left bottom; }
.journey-scene-issue { background-image: linear-gradient(135deg,#071c2899,#071e2a14 50%,#061925aa),url('/assets/shots/sheets.webp'); background-size: cover,cover; background-position: center,center; }
.journey[data-active="1"] .journey-scene-survey,.journey[data-active="2"] .journey-scene-survey,.journey[data-active="3"] .journey-scene-survey { opacity: 0; transform: scale(1.13) rotate(-1.5deg); }
.journey[data-active="1"] .journey-scene-terrain,.journey[data-active="2"] .journey-scene-design,.journey[data-active="3"] .journey-scene-issue { opacity: 1; transform: scale(1) rotate(0); }
.journey-route { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 9px #7de5ff); pointer-events: none; }
.journey-route path { stroke-linecap: round; stroke-linejoin: round; }
.journey-route-base { stroke: #9ce6f563; stroke-width: 2; stroke-dasharray: 5 9; }
.journey-route-drawn { stroke: #a3efff; stroke-width: 4; stroke-dasharray: 840; stroke-dashoffset: calc(840 * (1 - var(--route-progress,0))); }
.journey-route circle { fill: #b7f5ff; stroke: #0b4a66; stroke-width: 5; }
.journey-stage-top,.journey-stage-bottom { position: absolute; z-index: 4; right: 24px; left: 24px; display: flex; justify-content: space-between; gap: 15px; color: #dcf4fd; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.journey-stage-top { top: 23px; }
.journey-stage-bottom { bottom: 23px; align-items: end; }
.journey-stage-code { padding: 10px 13px; border: 1px solid #9bdff493; background: #071d2ecc; }
.journey-stage-counter { color: #bbd8e5; }
.journey-stage-counter b { color: #e8f8fe; font-size: 35px; line-height: 1; }
.journey-steps { padding: 3vh 0 13vh; }
.journey-step { display: flex; flex-direction: column; justify-content: center; min-height: min(70vh,650px); padding: 35px 0; border-bottom: 1px solid #8cc5d953; opacity: 1; transition: opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1); }
.motion-ready .journey-step { opacity: .52; transform: translateY(16px); }
.journey-step:first-child { border-top: 1px solid #8cc5d953; }
.journey-step.is-active { opacity: 1; transform: translateY(0); }
.journey-step-number { display: flex; align-items: center; gap: 14px; color: #8fdff2; font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.journey-step-number i { width: 38px; height: 1px; background: #8fdff2a1; }
.journey-step h3 { margin: 24px 0 15px; max-width: 550px; font-size: clamp(45px,5.4vw,78px); line-height: 1.03; letter-spacing: -.058em; }
.journey-step p { max-width: 450px; margin: 0; color: #bed5df; font-size: 16px; line-height: 1.75; }
.journey-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.journey-tags span { padding: 7px 10px; border: 1px solid #93cde172; color: #c2e4f0; font-size: 10px; letter-spacing: .06em; }
.journey-outro { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #9acbd85b; padding-top: 24px; color: #a9cedc; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.journey-outro a { color: #d4f4ff; border-bottom: 1px solid #a8e8f4; }

.cairn-launch { isolation: isolate; }
.cairn-launch::before { content: ''; position: absolute; z-index: -1; inset: -8px; border: 1px solid #9ae7f2a6; border-radius: 33px; box-shadow: 0 0 22px #43d7ed77; animation: cairn-beacon 4.8s cubic-bezier(.16,1,.3,1) infinite; }
.cairn-launch img { animation: cairn-breathe 5.4s cubic-bezier(.45,0,.2,1) infinite; transform-origin: 50% 80%; }
.cairn-orbit { position: absolute; inset: -13px; z-index: -1; animation: cairn-orbit 14s linear infinite; pointer-events: none; }
.cairn-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #bdf4ff; box-shadow: 0 0 13px #66dfff; }
.cairn-orbit i:nth-child(1) { top: 0; left: 50%; }
.cairn-orbit i:nth-child(2) { bottom: 16%; left: 0; width: 3px; height: 3px; }
.cairn-orbit i:nth-child(3) { right: 0; bottom: 18%; width: 3px; height: 3px; }
.cairn-launch.is-hopping img { animation: cairn-hop .82s cubic-bezier(.16,1,.3,1) both; }
.cairn-guide.is-greeting .cairn-launch img { animation: cairn-greet 1.05s cubic-bezier(.16,1,.3,1) both; }
.cairn-speech { position: absolute; right: 109px; bottom: 22px; width: 155px; padding: 10px 13px; border: 1px solid #95dded83; border-radius: 10px 10px 3px 10px; color: #e8faff; background: #0a2a40e8; box-shadow: 0 14px 30px #0013208c; opacity: 0; transform: translate(8px,7px) scale(.94); pointer-events: none; transition: opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1); }
.cairn-speech span { display: block; color: #8ee2f0; font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.cairn-speech strong { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; }
.cairn-guide.has-scrolled .cairn-speech,.cairn-guide:hover .cairn-speech,.cairn-guide:focus-within .cairn-speech { opacity: 1; transform: translate(0,0) scale(1); }
.cairn-field-note { margin-top: 11px; padding: 13px; border: 1px solid #7cbfd084; border-radius: 8px; background: #0a2e45; }
.cairn-panel:not([hidden]) { transform-origin: 90% 100%; animation: cairn-panel-rise .42s cubic-bezier(.16,1,.3,1) both; }
.cairn-field-note > span { color: #9ce7f5; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.cairn-field-note p { margin: 7px 0 10px; color: #e0f5fb; font: 17px/1.35 var(--serif); }
.cairn-wave { padding: 5px 0; border: 0; background: none; color: #9be9fa; font-size: 11px; font-weight: 800; cursor: pointer; }
.cairn-wave:hover { color: #fff; }
.cairn-guide.is-greeting .cairn-field-note { border-color: #a8f5ff; box-shadow: inset 0 0 19px #57dbf120; }

.motion-ready .motion-reveal { opacity: 0; transform: translateY(44px) scale(.985); }
.motion-ready .motion-reveal.is-revealed { opacity: 1; transform: none; transition: opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1); transition-delay: var(--reveal-delay,0ms); }
.motion-ready .hero-art { transform: translateY(var(--hero-shift,0px)); }

@keyframes cairn-breathe { 0%,100% { transform: translateY(-7px) rotate(-3deg) scale(1); } 50% { transform: translateY(-13px) rotate(3deg) scale(1.045); } }
@keyframes cue-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes cairn-beacon { 0%,100% { opacity: .32; transform: scale(.96); } 50% { opacity: .85; transform: scale(1.06); } }
@keyframes cairn-orbit { to { transform: rotate(360deg); } }
@keyframes cairn-hop { 0%,100% { transform: translateY(-7px) rotate(0); } 32% { transform: translateY(-31px) rotate(-9deg) scale(1.12); } 64% { transform: translateY(-5px) rotate(7deg) scale(.94); } }
@keyframes cairn-greet { 0%,100% { transform: translateY(-7px) rotate(0); } 22% { transform: translateY(-20px) rotate(-16deg) scale(1.1); } 48% { transform: translateY(-20px) rotate(14deg) scale(1.12); } 70% { transform: translateY(-10px) rotate(-9deg); } }
@keyframes cairn-panel-rise { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 900px) { .journey-layout { grid-template-columns: 1fr; gap: 25px; } .journey-stage { top: 74px; height: min(43vh,390px); min-height: 275px; } .journey-steps { padding: 0 0 8vh; } .journey-step { min-height: 43vh; padding: 65px 12px 40px; } .journey-step h3 { font-size: clamp(45px,8vw,65px); } }
@media (max-width: 650px) { .journey { padding: 80px 0 76px; } .journey-heading { padding-bottom: 39px; } .journey-heading h2 { font-size: clamp(54px,12vw,76px); } .journey-heading p { font-size: 14px; } .journey-stage { top: 69px; height: 34vh; min-height: 235px; border-radius: 10px; } .journey-stage-top,.journey-stage-bottom { right: 12px; left: 12px; font-size: 8px; } .journey-stage-top { top: 12px; } .journey-stage-bottom { bottom: 12px; } .journey-stage-code { padding: 7px; } .journey-stage-counter b { font-size: 25px; } .journey-step { min-height: 48vh; padding: 53px 8px 35px; } .journey-step h3 { font-size: clamp(43px,11vw,59px); } .journey-step p { font-size: 14px; } .journey-outro { display: block; line-height: 1.6; } .journey-outro a { display: inline-block; margin-top: 12px; } .cairn-speech { display: none; } .cairn-launch::before { inset: -5px; border-radius: 25px; } .cairn-orbit { inset: -8px; } }
@media (prefers-reduced-motion: reduce) { .page-progress span,.scroll-cue,.journey-scene,.journey-step,.cairn-launch::before,.cairn-launch img,.cairn-panel,.cairn-orbit,.cairn-speech,.motion-reveal,.hero-art { animation: none !important; transition: none !important; transform: none !important; } .journey-step { opacity: 1; } .journey-scene { opacity: 0; } .journey-scene-survey { opacity: 1; } .journey[data-active="1"] .journey-scene-terrain,.journey[data-active="2"] .journey-scene-design,.journey[data-active="3"] .journey-scene-issue { opacity: 1; } }