/* LucidCairn v3 — material continuity / tiny moments of delight
   Completely progressive: static illustration remains if script never executes. */

/* 1. The cairn's survey line continues into the Work chapter. */
.hero-art{overflow:visible}
.hero-art .cairn{
  transform:translate3d(var(--px,0px),calc(var(--py,0px) + var(--stone-y,0px)),0) scale(var(--stone-scale,1));
  transform-origin:50% 58%;
  will-change:auto;
}
.topography-ring{opacity:var(--topo-opacity,1);transition:opacity .2s linear}
.atlas-handoff{
  position:relative;
  display:grid;
  grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:center;
  gap:14px;
  height:110px;
  margin-top:-19px;
  color:#9db3a5;
  pointer-events:none;
  isolation:isolate;
}
.atlas-handoff::before{
  content:"";
  position:absolute;
  top:50%;left:2%;right:2%;
  height:1px;
  background:linear-gradient(90deg,transparent,#6a857866,transparent);
  z-index:-1;
}
.handoff-map{width:100%;height:85px;overflow:visible}
.handoff-track{stroke:#85a59555;stroke-width:1.35;stroke-dasharray:4 7;vector-effect:non-scaling-stroke}
.handoff-ink{stroke:#cfaa7e;stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;transition:stroke-dashoffset .12s linear}
.handoff-start,.handoff-end{fill:#cfaa7e;opacity:.9}
.handoff-marker{display:flex;gap:6px;align-items:baseline;white-space:nowrap;font:19px var(--serif);color:#ead9bb}
.handoff-small{font:9px var(--mono);color:#9db3a5;letter-spacing:.06em}
.handoff-next{justify-self:end}
#work{padding-top:55px}
#work>.chapter{position:relative;padding-left:18px}
#work>.chapter::before{content:"";position:absolute;left:0;top:3px;height:10px;width:10px;border:1px solid #cfaa7e;transform:rotate(45deg)}

/* 2. LINGA is a tiny illustrated experience: listen > notice > speak.
   It does not play audio or impersonate a real app. */
.linga-scene{
  gap:7px!important;
  padding:13px 10px 30px!important;
  justify-content:center;
}
.linga-orbit{inset:10%;opacity:.74}
.linga-lockup{font-size:clamp(40px,4vw,63px);letter-spacing:-.10em;flex:0 0 auto;line-height:1.05}
.linga-micro-demo{
  position:relative;z-index:2;display:grid;align-items:center;justify-items:center;
  width:min(88%,310px);height:72px;flex:0 0 auto;
  border-top:1px solid #c1f6db44;border-bottom:1px solid #c1f6db33;
  background:#062d2d66;
}
.linga-demo-line{position:absolute;top:-2px;left:0;right:0;height:2px;display:flex;justify-content:space-between;pointer-events:none}
.linga-demo-line i{position:relative;z-index:1;display:block;height:5px;width:5px;top:-2px;border-radius:50%;background:#86bfa9;border:1px solid #cff6e6}
.linga-timeline-fill{position:absolute;inset:0 auto auto 0;height:2px;width:33.333%;background:#d3ffe7;box-shadow:0 0 7px #8ff4c36b;transition:width .48s cubic-bezier(.2,.8,.2,1)}
.linga-scene[data-stage="notice"] .linga-timeline-fill{width:66.666%}
.linga-scene[data-stage="speak"] .linga-timeline-fill{width:100%}
.linga-stage-view{position:relative;width:100%;height:100%;display:grid;place-items:center}
.linga-state{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:#d5faeb;opacity:0;visibility:hidden;transform:translateY(7px) scale(.98);
  transition:opacity .3s ease,transform .38s cubic-bezier(.2,.8,.2,1),visibility .3s;
}
.linga-scene[data-stage="listen"] .linga-listen,
.linga-scene[data-stage="notice"] .linga-notice,
.linga-scene[data-stage="speak"] .linga-speak{opacity:1;visibility:visible;transform:none}
.linga-state .soundbars{height:25px;gap:3px}
.linga-state .soundbars i{width:3px}
.linga-transcript{font:9px var(--mono);letter-spacing:.06em;color:#c4e7d3}
.linga-notice{font:clamp(13px,1.2vw,17px)/1.2 var(--serif);gap:8px}
.linga-notice mark{background:transparent;color:#b8f5d4;box-shadow:inset 0 -5px 0 #5bc6a455}
.linga-underline{width:0;height:1px;background:#b8f5d4}
.linga-scene.is-active[data-stage="notice"] .linga-underline{width:64%;transition:width .85s cubic-bezier(.2,.8,.2,1)}
.linga-speak-ring{
  display:grid;place-items:center;border:1px solid #b5ebd0;border-radius:50%;height:37px;width:37px;
  box-shadow:0 0 0 5px #a7ebcb1d;
}
.linga-mic-icon{font:24px var(--serif);color:#e0ffec}
.linga-phases{
  position:relative;z-index:7;display:flex;align-items:center;justify-content:center;width:min(95%,330px);gap:5px;
}
.linga-phase{
  display:flex;align-items:center;justify-content:center;gap:6px;
  flex:1;min-width:0;min-height:44px;
  padding:9px 5px;
  border:1px solid #c9edd058;border-radius:3px;background:#092f2d92;
  color:#c3e5d5;font:10px var(--mono);
  cursor:pointer;touch-action:manipulation;
  transition:background-color .22s,border-color .22s,color .22s,transform .22s;
}
.linga-phase-index{font:9px var(--mono);color:#8cb6a5}
.linga-phase[aria-pressed="true"]{background:#c2f2dc;color:#173b35;border-color:#c2f2dc}
.linga-phase[aria-pressed="true"] .linga-phase-index{color:#436f5b}
.linga-phase:focus-visible{outline:2px solid #e8ffec;outline-offset:2px}
.linga-phase:active{transform:scale(.96)}
.linga-scene .scene-stamp{bottom:7px;left:12px;font-size:8px}
.linga-scene.is-active[data-stage="listen"] .soundbars i{animation:linga-pulse .85s ease-in-out infinite alternate;animation-delay:calc(var(--n) * -75ms)}
.linga-scene.is-active[data-stage="speak"] .linga-speak-ring{animation:linga-reply 2s ease-in-out infinite}
@keyframes linga-reply{50%{box-shadow:0 0 0 12px #a7ebcb0a;transform:scale(1.04)}}
.linga-scene:not([data-stage="listen"]) .soundbars i{animation:none}

/* 3. Each project gets its own physical micro-interaction, not the same hover. */
.folio-dust{
  position:absolute;z-index:1;inset:5% 10%;
  background:radial-gradient(#e1d7bd5f .6px,transparent .9px) 0 0/14px 14px;
  opacity:.25;transform:rotate(-10deg) scale(.95);
  transition:opacity .55s,transform .55s;
}
.folio-sheet.front::after{
  content:"";position:absolute;right:0;top:0;
  border-style:solid;border-width:0 24px 24px 0;
  border-color:transparent #c2beac transparent transparent;
  filter:drop-shadow(-2px 2px 2px #11111133);
}
.project:is(:hover,:focus-within) .folio-sheet.back{transform:rotate(12deg) translate(21px,-5px)}
.project:is(:hover,:focus-within) .folio-dust{opacity:.52;transform:rotate(-7deg) scale(1.04)}
.quant-line{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.25s cubic-bezier(.15,.7,.15,1)}
.quant-marker{fill:#f1d9b4;filter:drop-shadow(0 0 5px #f0bd8f)}
.quant-scene.is-visible .quant-line{stroke-dashoffset:0}
.quant-scene .quant-marker{transform-origin:289px 47px}
.project:is(:hover,:focus-within) .quant-marker{transform:scale(1.7);transition:transform .4s}
.query-scan{display:flex;gap:4px;width:60%;height:14px;justify-content:center;z-index:1}
.query-scan i{display:block;flex:1;height:4px;border:1px solid #d9c9b06c;background:#eacbb655;opacity:.65;transition:background .3s,transform .3s}
.query-scene.is-visible .query-scan i:nth-child(1){animation:query-hop 2.8s .0s infinite}
.query-scene.is-visible .query-scan i:nth-child(2){animation:query-hop 2.8s .22s infinite}
.query-scene.is-visible .query-scan i:nth-child(3){animation:query-hop 2.8s .44s infinite}
.query-scene.is-visible .query-scan i:nth-child(4){animation:query-hop 2.8s .66s infinite}
.query-scene.is-visible .query-scan i:nth-child(5){animation:query-hop 2.8s .88s infinite}
@keyframes query-hop{17%{background:#f5d6b2;transform:translateY(-3px)}36%{background:#eacbb655;transform:none}}
.forge-ring-inner{width:111px;height:111px;border-color:#c9ab875c;border-radius:39%;transform:rotate(-25deg)}
.project:is(:hover,:focus-within) .forge-ring-inner{transform:rotate(-50deg)}
.forge-steps{letter-spacing:.06em}
.forge-mark{transition:transform .4s}
.project:is(:hover,:focus-within) .forge-mark{transform:rotate(-13deg) scale(1.14)}
.brand-scene{contain:paint}
@media(hover:none){
  /* Touch never gets a stuck desktop hover scene. Stage buttons remain tappable. */
  .project:hover,.project.reveal-pending.in-view:hover{transform:none;box-shadow:none}
  .project:focus-within{transform:none;box-shadow:none}
  .project:active{border-color:#cfaa7e}
  .project:hover .folio-sheet.front{transform:rotate(-6deg)}
  .project:hover .folio-sheet.back{transform:rotate(9deg) translate(15px,0)}
  .project:hover .linga-orbit{transform:rotate(-24deg) scaleY(.76)}
  .project:hover .forge-ring{transform:rotate(45deg)}
  .project:hover .forge-ring-inner{transform:rotate(-25deg)}
  .project:hover .soundbars i{animation:none}
}

/* 4. Mobile receives deliberately crafted density, not a squeezed desktop. */
@media(max-width:900px){
  .atlas-handoff{height:88px;margin-top:-12px}
  #work{padding-top:57px}
  .hero-art .cairn{transition-duration:.32s}
}
@media(max-width:600px){
  .atlas-handoff{height:72px;gap:6px;margin-top:-9px}
  .handoff-map{height:60px}
  .handoff-marker{font-size:15px}
  .handoff-small{font-size:7px}
  #work{padding-top:45px}
  #work>.chapter{margin-bottom:25px}
  .hero-art .cairn{transform:translate3d(0,var(--stone-y,0px),0) scale(var(--stone-scale,1))}
  .hero-art .art-caption{max-width:128px}
  .project{border-radius:6px}
  .project .brand-scene,.project.featured .brand-scene{height:252px;min-height:252px}
  .linga-scene{gap:5px!important}
  .linga-lockup{font-size:51px}
  .linga-micro-demo{height:66px}
  .linga-phases{gap:5px}
  .project-filters{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;padding:5px 0 12px;margin-bottom:-16px;-webkit-overflow-scrolling:touch}
  .project-filters::-webkit-scrollbar{display:none}
  .project-filters button{flex:0 0 auto;min-height:44px;padding:10px 16px;scroll-snap-align:start}
  .project .project-action{min-height:46px}
  .project-copy{gap:2px}
  .project .project-origin{line-height:1.6}
  .motion-switch{min-height:44px;min-width:104px;justify-content:center;bottom:0}
  .cta-row .btn{min-height:50px}
}
@media(max-width:360px){
  .handoff-small{font-size:6.5px}
  .atlas-handoff{gap:4px}
  .linga-lockup{font-size:46px}
  .linga-phase{font-size:9px}
  .linga-phase-index{font-size:8px}
  .linga-stage-view .linga-notice{font-size:13px}
  .project-filters button{padding:10px 13px}
}
@media(prefers-reduced-motion:reduce){
 .hero-art .cairn{transform:none!important}
 .handoff-ink{stroke-dashoffset:0!important;transition:none}
 .topography-ring{opacity:1!important}
 .linga-timeline-fill,.linga-state,.linga-phase,.folio-sheet,.folio-dust,.quant-line,.quant-marker,.forge-ring,.forge-mark{transition:none!important;animation:none!important}
 .linga-underline{transition:none!important}
 .linga-scene.is-active .soundbars i,.linga-scene.is-active .linga-speak-ring,.query-scene.is-visible .query-scan i{animation:none!important}
}
.motion-off .handoff-ink{stroke-dashoffset:0!important;transition:none}
.motion-off .linga-state,.motion-off .linga-phase,.motion-off .folio-sheet,.motion-off .folio-dust,.motion-off .quant-line,.motion-off .forge-ring,.motion-off .forge-mark{transition:none!important}
.motion-off .linga-speak-ring,.motion-off .linga-scene .soundbars i,.motion-off .query-scan i{animation:none!important}

/* Keep mobile viewport stable when the language switch changes text length. */
@media(max-width:600px){html{-webkit-text-size-adjust:100%}.brand-scene,.linga-phases{max-width:100%}}

/* v4 — view-driven project theater. This is a progressive enhancement:
   each illustration is fully legible even if animation never runs. */
.brand-scene::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 27%, #ffffff0b 50%, transparent 73%);
  transform: translate3d(-85%, 0, 0);
}
.brand-scene.is-playing::before {
  animation: scene-light-sweep 9s ease-in-out infinite;
}
@keyframes scene-light-sweep {
  0%, 12%, 100% { opacity: 0; transform: translate3d(-85%, 0, 0); }
  24% { opacity: .55; }
  41% { opacity: 0; transform: translate3d(85%, 0, 0); }
  42%, 99% { transform: translate3d(85%, 0, 0); }
}

/* Folio — a research dossier gently turning its pages, with drifting grain. */
.folio-scene.is-playing .folio-sheet.front {
  animation: folio-page-front 6.2s ease-in-out infinite;
}
.folio-scene.is-playing .folio-sheet.back {
  animation: folio-page-back 6.2s ease-in-out infinite;
}
.folio-scene.is-playing .folio-dust {
  animation: folio-grain 6.2s ease-in-out infinite;
}
@keyframes folio-page-front {
  0%, 100% { transform: rotate(-6deg) translate3d(0, 0, 0); }
  38%, 55% { transform: rotate(-3deg) translate3d(5px, -9px, 0); }
}
@keyframes folio-page-back {
  0%, 100% { transform: rotate(9deg) translate3d(15px, 0, 0); }
  38%, 55% { transform: rotate(12deg) translate3d(21px, -4px, 0); }
}
@keyframes folio-grain {
  0%, 100% { opacity: .21; transform: rotate(-10deg) scale(.95); }
  45% { opacity: .45; transform: rotate(-7deg) scale(1.02); }
}

/* LINGA — the existing illustration automatically cycles
   Listen → Notice → Speak while visible. JS handles stage timing. */
.linga-scene.is-playing .linga-orbit {
  animation: linga-halo 7s ease-in-out infinite;
}
@keyframes linga-halo {
  0%, 100% { transform: rotate(-24deg) scaleY(.76); opacity: .66; }
  50% { transform: rotate(6deg) scaleY(.83); opacity: .94; }
}

/* Quant Compass — draw the chart, highlight a point, then repeat.
   Clearly marked as an illustration, never live market data. */
.quant-scene.is-playing .quant-line {
  animation: quant-draw 7.2s cubic-bezier(.25,.75,.2,1) infinite;
}
.quant-scene.is-playing .quant-area {
  animation: quant-area-rise 7.2s ease-in-out infinite;
}
.quant-scene.is-playing .quant-marker {
  animation: quant-point 7.2s ease-in-out infinite;
}
@keyframes quant-draw {
  0%, 5% { stroke-dashoffset: 1; }
  34%, 90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}
@keyframes quant-area-rise {
  0%, 8%, 100% { opacity: .2; }
  36%, 85% { opacity: .95; }
}
@keyframes quant-point {
  0%, 27%, 100% { transform: scale(1); opacity: .5; }
  37%, 48% { transform: scale(1.65); opacity: 1; }
  63% { transform: scale(1); opacity: .9; }
}

/* Queryline — the query moves through three deliberate processing steps. */
.query-scene.is-playing .query-question {
  animation: query-prompt 5.8s ease-in-out infinite;
}
.query-scene.is-playing .query-process span {
  animation: query-step 5.8s ease-in-out infinite;
}
.query-scene.is-playing .query-process span:nth-of-type(2) { animation-delay: 1.15s; }
.query-scene.is-playing .query-process span:nth-of-type(3) { animation-delay: 2.3s; }
@keyframes query-prompt {
  0%, 100% { transform: rotate(-5deg) translate3d(0, 0, 0); }
  23%, 37% { transform: rotate(-2deg) translate3d(0, -6px, 0); }
}
@keyframes query-step {
  0%, 11%, 42%, 100% { color: #ecd1be; border-color: #bda3948a; background: transparent; }
  19%, 32% { color: #271f1d; border-color: #f0d0ac; background: #f0d0ac; }
}

/* MockForge — two independent forge rings, and a brief question spark. */
.forge-scene.is-playing .forge-ring:not(.forge-ring-inner) {
  animation: forge-orbit-outer 9s ease-in-out infinite;
}
.forge-scene.is-playing .forge-ring-inner {
  animation: forge-orbit-inner 7s ease-in-out infinite;
}
.forge-scene.is-playing .forge-mark {
  animation: forge-spark 4.5s ease-in-out infinite;
}
@keyframes forge-orbit-outer {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(81deg) scale(1.06); }
}
@keyframes forge-orbit-inner {
  0%, 100% { transform: rotate(-25deg) scale(1); }
  50% { transform: rotate(-66deg) scale(.93); }
}
@keyframes forge-spark {
  0%, 100% { transform: rotate(0) scale(1); opacity: .82; }
  50% { transform: rotate(-8deg) scale(1.12); opacity: 1; }
}

/* Mobile only: keep a tactile hint of focus without imitating desktop hover. */
@media (hover: none), (pointer: coarse) {
  .project:has(.brand-scene.is-playing) { border-color: #b58f6970; }
  .project .brand-scene { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-scene::before,
  .brand-scene.is-playing *,
  .brand-scene.is-playing::before { animation: none !important; }
  .brand-scene::before { opacity: 0 !important; }
}
.motion-off .brand-scene::before,
.motion-off .brand-scene.is-playing *,
.motion-off .brand-scene.is-playing::before { animation: none !important; }
.motion-off .brand-scene::before { opacity: 0 !important; }

/* Seasonal Echo — a small climate-calendar illustration, using no live weather data. */
.seasonal-scene {
  background: radial-gradient(ellipse at 45% 40%, #304e50, #1c363e 60%, #14282e);
}
.seasonal-kicker {
  position: absolute;
  top: 18px;
  left: 18px;
  color: #b4ccc2;
  font: 9px var(--mono);
  letter-spacing: .08em;
}
.seasonal-wheel {
  position: relative;
  flex: 0 0 auto;
  width: min(76%, 198px);
  aspect-ratio: 1;
  margin: 28px 0 32px;
}
.seasonal-band {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: conic-gradient(#7eb9bc, #8fbea7, #d5ce80, #dda475, #bdbf83, #82b8b7, #7eb9bc);
  mask: radial-gradient(closest-side, transparent calc(100% - 19px), #000 calc(100% - 18px));
}
.seasonal-wheel .seasonal-dial { position: absolute; inset: 0; width: 100%; height: 100%; }
.seasonal-guide { stroke: #a9c9bd30; stroke-width: 1; }
.seasonal-ticks { stroke: #183139; stroke-width: 22; stroke-dasharray: 1.2 3; }
.seasonal-match { stroke: #d6dfad; stroke-width: 1; stroke-dasharray: 3 5; opacity: .7; }
.seasonal-date { fill: #d6dfad; stroke: #173038; stroke-width: 2; }
.seasonal-date-echo { fill: #e2b18a; }
.seasonal-dial text { fill: #afc8c0; font: 8px var(--mono); }
.seasonal-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #e2e5c3;
  font: 48px/1 var(--serif);
}
.seasonal-center small { color: #afc8c0; font: 6px var(--mono); letter-spacing: .06em; }
.seasonal-scene .scene-stamp { font-size: 7px; }
.seasonal-scene.is-playing .seasonal-band { animation: seasonal-turn 12s ease-in-out infinite; }
.seasonal-scene.is-playing .seasonal-match { animation: seasonal-echo 6s linear infinite; }
@keyframes seasonal-turn { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes seasonal-echo { to { stroke-dashoffset: -32; } }