/* Living Teyvat Interface — cinematic layer for the portfolio. */
:root { --light-x: 50vw; --light-y: 50vh; }
.hero-profession > span:first-child { display: inline-flex; align-items: center; gap: .24em; white-space: nowrap; }
.hero-profession .typed {
  position: relative;
  display: inline-block;
  height: 1.4em;
  margin-left: 0;
  vertical-align: middle;
  white-space: nowrap;
  transition: width 620ms cubic-bezier(.16,.8,.2,1);
}
.role-morph-word { position: absolute; left: 0; top: 0; display: inline-block; white-space: nowrap; will-change: transform,opacity,filter; }
.role-morph-enter { opacity: 0; filter: blur(7px); transform: translateY(13px) scale(.985); }
.role-morph-enter.role-morph-enter-active { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); transition: opacity 580ms ease,filter 620ms ease,transform 620ms cubic-bezier(.16,.8,.2,1); }
.role-morph-exit { opacity: 0; filter: blur(5px); transform: translateY(-11px) scale(.985); letter-spacing: .025em; transition: opacity 390ms ease,filter 430ms ease,transform 430ms cubic-bezier(.4,0,.7,.2),letter-spacing 430ms ease; }
.hero-profession .typed::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: 1px; background: linear-gradient(90deg,transparent,#91dcf3,#f1d99f,transparent); opacity: 0; transform: scaleX(.2); box-shadow: 0 0 8px rgba(127,218,246,.55); }
.hero-profession .typed:has(.role-morph-enter)::after { animation: role-hydro-trace .7s ease-out both; }
.portfolio-page::after {
  content: '';
  position: fixed;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--light-x) var(--light-y), rgba(143, 225, 255, .055), transparent 72%);
  mix-blend-mode: screen;
}

/* 1. Hydro Vision awakening. */
.vision { isolation: isolate; }
.vision::before {
  content: '';
  position: absolute;
  inset: -13px;
  border: 1px solid rgba(112, 220, 255, .72);
  border-radius: 50%;
  opacity: 0;
  transform: rotate(-45deg) scale(.55);
}
.motion-ready .vision::before { animation: hydro-vision-ring 1.2s 1.1s cubic-bezier(.18,.8,.2,1) both; }
.hydro-awakening { position: absolute; inset: -24px; transform: rotate(-45deg); pointer-events: none; }
.hydro-awakening i { position: absolute; inset: 5px; border: 1px solid rgba(111, 216, 255, .32); border-radius: 50%; animation: hydro-orbit 8s linear infinite; }
.hydro-awakening i:nth-child(2) { inset: 12px; border-style: dashed; animation-direction: reverse; animation-duration: 11s; }
.hydro-awakening i:nth-child(3) { inset: -3px; border-color: rgba(113, 211, 255, .13); animation-duration: 15s; }
.hydro-awakening b { position: absolute; left: 50%; top: 50%; width: 4px; height: 7px; border-radius: 60% 40% 60% 40%; background: #a8eaff; opacity: 0; box-shadow: 0 0 8px #55cfff; }
.hydro-awakening b:nth-of-type(1) { --drop-angle: -58deg; --drop-distance: 45px; animation-delay: 1.35s; }
.hydro-awakening b:nth-of-type(2) { --drop-angle: 26deg; --drop-distance: 51px; animation-delay: 1.52s; }
.hydro-awakening b:nth-of-type(3) { --drop-angle: 142deg; --drop-distance: 43px; animation-delay: 1.7s; }
.motion-ready .hydro-awakening b { animation: hydro-vision-drop 1.25s var(--drop-delay, 1.3s) ease-out both; }
.vision:hover .hydro-awakening { filter: brightness(1.3); }
.vision:hover .hydro-awakening i { border-color: rgba(170, 240, 255, .62); }
.vision img { transition: filter .45s ease, scale .65s cubic-bezier(.16,.8,.2,1); }
.vision:hover img { scale: 1.09; filter: drop-shadow(0 0 11px #77dcff); }

/* 2. Elemental cursor and droplets. */
.elemental-cursor { position: fixed; z-index: 999; left: -13px; top: -13px; width: 26px; height: 26px; border: 1px solid rgba(135, 226, 255, .46); border-radius: 50%; pointer-events: none; transition: width .2s ease, height .2s ease, margin .2s ease, border-color .2s ease; mix-blend-mode: screen; }
.elemental-cursor::before,.elemental-cursor::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(255, 238, 177, .5); transform: rotate(45deg); }
.elemental-cursor::after { inset: 10px; border-radius: 50%; background: #dffaff; box-shadow: 0 0 10px #7fdfff; }
.hydro-cursor-drop { position: fixed; z-index: 998; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; background: #bcefff; box-shadow: 0 0 8px #68d7ff; animation: hydro-cursor-fall .7s ease-out both; }
body:has(a:hover,button:hover) .elemental-cursor { width: 36px; height: 36px; margin: -5px; border-color: rgba(255, 235, 165, .7); }

/* 3. Scroll-driven world camera. */
.world-atmosphere { position: fixed; z-index: 8; inset: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.1s ease; }
.world-atmosphere > i { position: absolute; inset: -12%; transition: background 1.3s ease, opacity 1s ease; }
.world-glow { background: radial-gradient(circle at 70% 25%, rgba(124, 215, 255, .13), transparent 34%); }
.world-haze { background: linear-gradient(180deg, transparent 34%, rgba(90, 176, 199, .05) 58%, transparent 83%); }
.world-stars { opacity: 0; background: radial-gradient(circle,#eafaff 0 1px,transparent 1.6px) 0 0/117px 103px; }
body[data-world-chapter="keahlian"] .world-atmosphere,
body[data-world-chapter="perjalanan"] .world-atmosphere,
body[data-world-chapter="kontak"] .world-atmosphere { opacity: 1; }
body[data-world-chapter="keahlian"] .world-stars,
body[data-world-chapter="kontak"] .world-stars { opacity: .24; animation: cinematic-star-drift 20s linear infinite; }
body[data-world-chapter="karya"] .world-glow { background: radial-gradient(circle at 50% 42%, rgba(240, 217, 159, .08), transparent 38%); }
body[data-world-chapter="kontak"] .world-glow { background: radial-gradient(circle at 50% 30%, rgba(139, 160, 255, .16), transparent 42%); }

/* 5–6. Project domain entrance and interactive data preview. */
.work-card { --art-x: 50%; --art-y: 50%; }
.journey-progress-indicator { position:fixed; z-index:100; top:0; left:0; width:100%; height:2px; background:rgba(237,221,166,.14); pointer-events:none; }
.journey-progress-indicator i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#81cddd,#f2dda1 72%,#fff6c8); box-shadow:0 0 12px rgba(218,201,139,.85); transform:scaleX(0); transform-origin:left; will-change:transform; }
.work-art { perspective: 950px; }
.work-card::before { content:''; position:absolute; z-index:6; inset:0; pointer-events:none; opacity:0; background:radial-gradient(300px circle at var(--spotlight-x,50%) var(--spotlight-y,40%),rgba(255,249,218,.23),transparent 62%); mix-blend-mode:soft-light; transition:opacity .35s ease; }
.work-card { position:relative; overflow:hidden; transition:transform .45s cubic-bezier(.16,.8,.2,1),box-shadow .45s ease,border-color .45s ease; }
.work-card.project-spotlit { transform:translateY(-7px); border-color:rgba(202,172,101,.72); box-shadow:0 22px 48px rgba(20,57,65,.16),0 0 0 1px rgba(247,226,166,.22); }
.work-card.project-spotlit::before { opacity:1; }
.work-card.project-spotlit .work-art > img { transform:scale(1.025); filter:saturate(1.08) brightness(1.045); }
.work-art > img { transition:transform .7s cubic-bezier(.16,.8,.2,1),filter .5s ease; }
.domain-gate { position: absolute; z-index: 5; inset: 13%; pointer-events: none; opacity: 0; transform: scale(.72) rotate(45deg); border: 1px solid color-mix(in srgb,var(--project-accent) 70%,transparent); box-shadow: 0 0 45px color-mix(in srgb,var(--project-accent) 24%,transparent); }
.domain-gate::before,.domain-gate::after,.domain-gate i { content: ''; position: absolute; inset: 9%; border: 1px solid color-mix(in srgb,var(--project-accent) 35%,transparent); }
.domain-gate::after { inset: 22%; border-radius: 50%; }
.domain-gate i:nth-child(1) { inset: -5%; border-radius: 50%; border-style: dashed; }
.domain-gate i:nth-child(2) { left: 50%; top: -22%; bottom: -22%; width: 1px; border: 0; background: linear-gradient(transparent,var(--project-accent),transparent); }
.domain-gate i:nth-child(3) { top: 50%; left: -22%; right: -22%; height: 1px; border: 0; background: linear-gradient(90deg,transparent,var(--project-accent),transparent); }
.work-card.cinematic-seen .domain-gate { animation: domain-open 1.15s var(--domain-delay) cubic-bezier(.16,.8,.2,1) both; }
.work-card.cinematic-seen .work-art > img { animation: domain-art-arrive .95s calc(var(--domain-delay) + 180ms) cubic-bezier(.16,.8,.2,1) both; }
.project-data-flow { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.project-data-flow i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--project-accent); box-shadow: 0 0 12px var(--project-accent); opacity: 0; }
.project-data-flow i:nth-child(1) { left: 18%; top: 27%; }
.project-data-flow i:nth-child(2) { left: 72%; top: 22%; animation-delay: .18s!important; }
.project-data-flow i:nth-child(3) { left: 82%; top: 73%; animation-delay: .35s!important; }
.project-data-flow i:nth-child(4) { left: 31%; top: 79%; animation-delay: .52s!important; }
.work-card.cinematic-active .project-data-flow i { animation: project-data-pulse 2.6s ease-in-out infinite; }
.work-tech span { transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.work-tech span:hover { color: #fff3c7; border-color: var(--project-accent); background: color-mix(in srgb,var(--project-accent) 14%,transparent); box-shadow: 0 0 16px color-mix(in srgb,var(--project-accent) 25%,transparent); }
.work-card[data-tech-focus] .work-art img { filter: saturate(1.25) brightness(1.04); transform: scale(1.045); }

/* 7. Adventure Chronicle: one calm reveal, then local quest-record feedback. */
#perjalanan .chapter-arrival-mark { display:none; }
.journey-list { position:relative; --journey-route-start:218px; }
.journey-route { position:absolute; z-index:1; left:var(--journey-route-start); width:1px; overflow:visible; background:rgba(172,151,99,.26); pointer-events:none; }
.journey-route::after { content:''; position:absolute; inset:0; background:linear-gradient(#a5e0d0,#f3db99 72%,#f9ecc2); box-shadow:0 0 11px rgba(159,220,202,.7); transform:scaleY(0); transform-origin:top; }
.journey-awakened .journey-route::after { animation:chronicle-route-draw .95s .12s cubic-bezier(.16,.8,.2,1) forwards; }
.journey-item { position:relative; z-index:2; transition:background-color .32s ease,box-shadow .32s ease; }
.journey-ready .journey-item :is(.journey-date,.journey-node,.journey-body) { opacity:0; }
.journey-awakened .journey-item .journey-node { animation:chronicle-node-arrive .62s calc(.28s + var(--ley-delay)) cubic-bezier(.16,.8,.2,1) both; }
.journey-awakened .journey-item .journey-date { animation:chronicle-copy-arrive .48s calc(.34s + var(--ley-delay)) cubic-bezier(.16,.8,.2,1) both; }
.journey-awakened .journey-item .journey-body { animation:chronicle-copy-arrive .5s calc(.4s + var(--ley-delay)) cubic-bezier(.16,.8,.2,1) both; }
.journey-map-label { position:absolute; left:245px; top:16px; color:rgba(239,221,169,.72); font:600 7px/1 var(--sans); letter-spacing:.2em; }
.journey-waypoint { position:absolute; left:50%; top:50%; display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border:1px solid rgba(238,219,159,.65); border-radius:50%; color:#f9e7b5; background:#102d3bd9; font:600 6px/1 var(--sans); letter-spacing:.04em; transform:translate(-50%,-50%) rotate(-45deg); }
.journey-body { position:relative; }
.journey-body::before { content:''; position:absolute; right:calc(100% + 13px); top:17px; width:42px; height:1px; opacity:0; background:linear-gradient(90deg,#9ed7c1,#f1d99a); box-shadow:0 0 9px rgba(158,215,193,.68); transform:scaleX(0); transform-origin:left; transition:opacity .18s ease; }
.journey-item:hover .journey-body::before { animation:ley-detail-channel .55s cubic-bezier(.16,.8,.2,1) both; }
.journey-item:hover .journey-node { transform:rotate(45deg) scale(1.06); box-shadow:0 0 0 6px rgba(240,217,159,.09),0 0 22px rgba(158,215,193,.58); filter:brightness(1.12); }
@media (min-width:1101px) {
  .journey-item { grid-template-columns:180px 42px minmax(0,720px); justify-content:start; }
}

/* The AI case opens as a compact domain, then resolves into readable project detail. */
#project-dialog.domain-entering[open] .dialog-inner::before { content:'✦'; position:absolute; z-index:3; left:50%; top:50%; display:grid; width:76px; height:76px; place-items:center; border:1px solid #f5de9a; border-radius:50%; color:#fff2bd; background:radial-gradient(circle,rgba(98,195,224,.45),rgba(6,28,53,.92) 62%); box-shadow:0 0 0 12px rgba(114,219,247,.09),0 0 48px rgba(118,218,247,.65); font:32px/1 var(--serif); pointer-events:none; transform:translate(-50%,-50%) scale(.25) rotate(-45deg); animation:project-domain-seal .95s cubic-bezier(.16,.8,.2,1) both; }
#project-dialog.domain-entering[open] .dialog-inner::after { content:'DOMAIN RECORD / AI INTEGRATION'; position:absolute; z-index:3; left:50%; top:calc(50% + 54px); color:#dff9ff; font:600 8px/1 var(--sans); letter-spacing:.22em; white-space:nowrap; pointer-events:none; transform:translate(-50%,-50%); animation:project-domain-copy .9s ease-out both; }

/* 8. Distinct chapter signatures. */
[data-cinematic-chapter] { position: relative; }
.chapter-signature { position: absolute; z-index: 9; top: 18px; right: 0; width: 210px; height: 42px; pointer-events: none; opacity: 0; transform: translateX(24px); }
.chapter-signature span { position: absolute; right: 0; top: 0; color: rgba(88,117,126,.55); font: 600 7px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.chapter-signature i { position: absolute; right: 0; top: 18px; width: 100%; height: 1px; background: linear-gradient(90deg,transparent,#cbb878); transform: scaleX(0); transform-origin: right; }
.chapter-signature i:nth-child(3) { width: 12px; height: 12px; top: 12px; border: 1px solid #cbb878; background: transparent; transform: rotate(45deg) scale(0); }
.chapter-signature i:nth-child(4) { width: 5px; height: 5px; top: 16px; right: 4px; border-radius: 50%; background: #f0d99f; }
.cinematic-seen > .chapter-signature { animation: chapter-signature-in .65s ease-out both; }
.cinematic-seen > .chapter-signature i:first-of-type { animation: chapter-signature-line .85s .25s ease-out forwards; }
.cinematic-seen > .chapter-signature i:nth-of-type(2) { animation: chapter-signature-diamond .6s .7s ease-out forwards; }
.cinematic-seen > .chapter-signature i:nth-of-type(3) { animation: chapter-signature-dot .45s .9s ease-out both; }
.signature-stars i:first-of-type { background: linear-gradient(90deg,transparent,#8fcfec); box-shadow: 0 0 7px #8fcfec; }
.signature-domain i:first-of-type { background: linear-gradient(90deg,transparent,#d4bc78); }
.signature-leyline i:first-of-type { background: linear-gradient(90deg,transparent,#9ed7c1); }
.signature-wish i:first-of-type { background: linear-gradient(90deg,transparent,#aeb9f3); }

/* 9. Reactive constellation chapter navigator. */
.chapter-nav { --chapter-progress: 0; }
.chapter-nav-line { position: absolute; z-index: -1; left: 6px; top: 5px; bottom: 5px; width: 1px; background: linear-gradient(#f0d99f calc(var(--chapter-progress) * 100%),rgba(234,214,154,.18) 0); box-shadow: 0 0 7px rgba(240,217,159,.35); }
.chapter-nav-traveller { position: absolute; left: 3px; top: calc(var(--chapter-progress) * (100% - 7px)); width: 7px; height: 7px; border-radius: 50%; background: #fff0b2; box-shadow: 0 0 11px 3px #f0d99f; transition: top .25s ease-out; }
.chapter-nav a.active { animation: chapter-nav-pulse 1.8s ease-in-out infinite alternate; }

/* 10. Hydro page transition. */
.hydro-page-ripple { position: fixed; z-index: 9999; width: 24px; height: 24px; margin: -12px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(184,238,255,.75); box-shadow: 0 0 45px rgba(83,204,255,.45), inset 0 0 18px rgba(173,236,255,.3); animation: hydro-page-wave .7s cubic-bezier(.18,.7,.2,1) both; }

/* 11. Character idle motion. */
.character-stage.cinematic-active #portrait { animation: character-image-idle 7.5s ease-in-out infinite alternate; }
#portrait { translate: var(--portrait-pan-x, 0px) var(--portrait-pan-y, 0px); transition: translate .65s ease-out; }
.portrait-window .portrait-crossfade { animation: none!important; transition: none!important; }
.character-stage.cinematic-active .vision { animation: vision-idle 4.8s ease-in-out infinite alternate; }
.character-stage.cinematic-active .portrait-window::before { content: ''; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(105deg,transparent 38%,rgba(163,227,255,.09) 49%,transparent 59%); transform: translateX(-130%); animation: character-light-pass 8s 1.8s ease-in-out infinite; }

/* Character selection scene. */
.character-stage { isolation: isolate; }
.portrait-card { transition: transform .8s cubic-bezier(.16,.8,.2,1), filter .5s ease, box-shadow .55s ease; }
.character-select-trigger { position: absolute; z-index: 8; inset: 8px 8px 48px; border: 0; background: transparent; color: transparent; cursor: pointer; }
.character-select-trigger:focus-visible { outline: 2px solid #a8eeff; outline-offset: 5px; border-radius: 148px 148px 2px 2px; }
.character-selection-ui { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.character-title-card,.character-attribute-card,.character-traits,.character-constellation-link { position: absolute; opacity: 0; transition: opacity .45s ease, transform .7s cubic-bezier(.16,.8,.2,1), filter .45s ease; }
.character-title-card { left: -8px; top: 54px; padding-left: 14px; border-left: 1px solid rgba(241,221,164,.72); color: #f5e7c3; transform: translateX(-20px); }
.character-title-card small,.character-attribute-card small { display: block; margin-bottom: 6px; color: #9cdff2; font: 600 7px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.character-title-card strong { display: block; font: 400 23px/1 var(--serif); letter-spacing: .07em; text-transform: uppercase; }
.character-title-card span { display:block; margin-top:6px; color:#c8dadd; font:500 7px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.character-attribute-card { right: -73px; top: 99px; width: 112px; padding: 11px 12px; border: 1px solid rgba(137,223,247,.38); background: rgba(8,37,66,.64); box-shadow: 0 0 28px rgba(64,189,231,.12); backdrop-filter: blur(8px); transform: translateX(24px); }
.character-attribute-card b { display:block; color:#a9ecff; font:400 17px/1 var(--serif); letter-spacing:.13em; text-transform:uppercase; }
.character-attribute-card span { display:block; margin-top:7px; color:#d6e8ed; font:500 7px/1.5 var(--sans); letter-spacing:.07em; }
.character-traits { right: -111px; bottom: 104px; display:grid; gap:6px; transform: translateX(23px); }
.character-traits span { padding: 5px 7px; border-right: 1px solid rgba(242,219,158,.62); color:#f0e3be; background:linear-gradient(90deg,transparent,rgba(18,63,83,.35)); font:600 7px/1 var(--sans); letter-spacing:.13em; text-align:right; text-transform:uppercase; }
.character-constellation-link { right: -102px; bottom: 50px; display:flex; align-items:center; gap:7px; padding: 8px 10px; border:1px solid rgba(158,225,244,.4); color:#dff8ff; background:rgba(8,33,61,.72); font:600 7px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase; text-decoration:none; pointer-events:auto; transform: translateY(14px); }
.character-constellation-link i { color:#ffe7a4; font-size:12px; font-style:normal; }
.character-constellation-link:hover,.character-constellation-link:focus-visible { border-color:#ffebae; color:#fff5d0; }
.character-selected .portrait-card { box-shadow: 0 20px 88px rgba(4,30,67,.65),0 0 0 4px rgba(103,219,255,.08); }
.character-selected .character-title-card,.character-selected .character-attribute-card,.character-selected .character-traits,.character-selected .character-constellation-link { opacity:1; transform:translate(0); }
.character-selected .orbit { opacity:.35; filter:brightness(.72); transition:opacity .6s ease,filter .6s ease; }
.character-selected .vision { filter:brightness(1.35) drop-shadow(0 0 15px #70dbff); }
.character-selected .hydro-awakening i { border-color:rgba(168,241,255,.82); animation-duration:4.6s; }
.character-select-flare .vision::after { content:''; position:absolute; inset:-30px; border-radius:50%; border:1px solid #e1fbff; box-shadow:0 0 32px 12px rgba(122,225,255,.6); animation: character-select-flare .85s ease-out both; }
.character-stage.cinematic-active.outfit-shifting .portrait-window::before { content:''; position:absolute; z-index:5; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 30%,rgba(125,220,255,.15),transparent 70%); animation: character-light-pass .45s ease-in-out both; }
.character-stage[data-outfit="casual"] .character-title-card small::after { content:' / Casual Expedition'; color:#f2d99f; }
.character-stage[data-outfit="formal"] .character-title-card small::after { content:' / Formal Attire'; color:#f2d99f; }
.constellation-departing .character-constellation-link i { animation: constellation-launch .9s cubic-bezier(.16,.8,.2,1) both; }
.constellation-departing .character-constellation-link::after { content:''; position:absolute; left:8px; right:8px; top:50%; height:1px; background:#a7efff; box-shadow:0 0 9px #a7efff; animation: constellation-link-trace .8s ease-out both; }

/* 12. Wish finale. */
.wish-finale { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.wish-finale i:not(.wish-comet) { position: absolute; left: 50%; top: 28%; width: 5px; height: 5px; background: #e9f8ff; border-radius: 50%; box-shadow: 0 0 12px #b6dfff; opacity: 0; }
.wish-finale i:nth-child(2) { --wish-x:-170px; --wish-y:70px; }
.wish-finale i:nth-child(3) { --wish-x:145px; --wish-y:92px; animation-delay:.12s!important; }
.wish-finale i:nth-child(4) { --wish-x:40px; --wish-y:-62px; animation-delay:.24s!important; }
.wish-comet { position: absolute; left: -20%; top: 18%; width: 120px; height: 2px; background: linear-gradient(90deg,transparent,#d9f5ff,#fff0ac); box-shadow: 0 0 12px #8bdcff; opacity: 0; transform: rotate(-18deg); }
.wish-finale strong { position: absolute; left: 50%; top: 25%; color: #fff0ae; font-size: 28px; opacity: 0; transform: translate(-50%,-50%) scale(.3); }
.contact.cinematic-active .wish-comet { animation: wish-comet-cross 1.55s .25s ease-out both; }
.contact.cinematic-active .wish-finale i:not(.wish-comet) { animation: wish-stars-gather 1.15s .7s cubic-bezier(.18,.8,.2,1) both; }
.contact.cinematic-active .wish-finale strong { animation: wish-star-bloom 1.1s 1.35s ease-out both; }
.contact.wish-acquired::after { content: 'MESSAGE CONSTELLATION ACQUIRED'; position: absolute; z-index: 5; left: 50%; bottom: 23px; color: #fff0b1; font: 600 8px/1 var(--sans); letter-spacing: .22em; transform: translateX(-50%); animation: acquired-message 1.7s ease-out both; }

/* 13. Global reactive light. */
.work-card,.character-archive,.talent-card,.journey-item,.contact { --local-light: radial-gradient(320px circle at var(--light-x) var(--light-y),rgba(153,226,255,.07),transparent 70%); }
.paper { position: relative; }
.paper::after { content: ''; position: fixed; z-index: 80; inset: 0; pointer-events: none; background: radial-gradient(340px circle at var(--light-x) var(--light-y),rgba(126,211,232,.045),transparent 72%); }

@keyframes hydro-vision-ring { 0%{opacity:0;transform:rotate(-45deg) scale(.45)} 58%{opacity:1;transform:rotate(25deg) scale(1.25)} 100%{opacity:.35;transform:rotate(45deg) scale(1)} }
@keyframes role-hydro-trace { 0%{opacity:0;transform:scaleX(.2)} 45%{opacity:1} 100%{opacity:0;transform:scaleX(1)} }
@keyframes hydro-orbit { to{transform:rotate(360deg)} }
@keyframes hydro-vision-drop { 0%{opacity:0;transform:rotate(var(--drop-angle)) translateX(8px) scale(.2)} 35%{opacity:1} 100%{opacity:0;transform:rotate(var(--drop-angle)) translateX(var(--drop-distance)) scale(1)} }
@keyframes hydro-cursor-fall { to{opacity:0;transform:translate(var(--drop-x),var(--drop-y)) scale(.2)} }
@keyframes cinematic-star-drift { to{transform:translate3d(-28px,20px,0)} }
@keyframes domain-open { 0%{opacity:0;transform:scale(.55) rotate(45deg)} 56%{opacity:.8} 100%{opacity:.2;transform:scale(1.05) rotate(135deg)} }
@keyframes domain-art-arrive { from{opacity:.18;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);transform:scale(1.08)} to{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:none} }
@keyframes project-data-pulse { 0%,100%{opacity:.08;transform:scale(.6)} 50%{opacity:.78;transform:scale(1.25)} }
@keyframes chronicle-route-draw { from{transform:scaleY(0);opacity:.25} to{transform:scaleY(1);opacity:1} }
@keyframes chronicle-node-arrive { 0%{opacity:0;filter:brightness(2);box-shadow:0 0 0 0 rgba(240,217,159,0)} 58%{opacity:1;filter:brightness(1.4);box-shadow:0 0 0 9px rgba(240,217,159,.1),0 0 27px rgba(158,215,193,.72)} 100%{opacity:1;filter:none;box-shadow:0 0 0 4px rgba(240,217,159,.05),0 0 12px rgba(158,215,193,.28)} }
@keyframes chronicle-copy-arrive { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes chronicle-control-arrive { from{opacity:0;transform:scale(.72)} to{opacity:1;transform:scale(1)} }
@keyframes ley-node-awaken { to{box-shadow:0 0 0 8px rgba(240,217,159,.12),0 0 25px #9ed7c1;filter:brightness(1.22)} }
@keyframes ley-trace { from{transform:scaleX(0);transform-origin:left} to{transform:scaleX(1);transform-origin:left} }
@keyframes journey-copy-awaken { from{opacity:.38;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes ley-detail-channel { from{opacity:0;transform:scaleX(0)} 55%{opacity:1} to{opacity:.72;transform:scaleX(1)} }
@keyframes ley-detail-pulse { 0%{filter:brightness(1);box-shadow:0 0 0 0 rgba(240,217,159,.28)} 48%{filter:brightness(1.55);box-shadow:0 0 0 12px rgba(240,217,159,.09),0 0 30px rgba(158,215,193,.8)} 100%{filter:brightness(1.12);box-shadow:0 0 0 5px rgba(240,217,159,.08),0 0 18px rgba(158,215,193,.5)} }
@keyframes chapter-signature-in { to{opacity:1;transform:none} }
@keyframes chapter-signature-line { to{transform:scaleX(1)} }
@keyframes chapter-signature-diamond { to{transform:rotate(45deg) scale(1)} }
@keyframes chapter-signature-dot { from{opacity:0;transform:scale(.2)} to{opacity:1;transform:scale(1)} }
@keyframes chapter-nav-pulse { to{filter:brightness(1.35);box-shadow:0 0 0 7px rgba(234,214,154,.12),0 0 18px #edd99a} }
@keyframes hydro-page-wave { to{opacity:0;transform:scale(85);border-width:0} }
@keyframes character-breathe { 0%,100%{translate:0 0} 50%{translate:0 -3px} }
@keyframes character-image-idle { from{transform:scale(1.003) translateY(0)} to{transform:scale(1.018) translateY(-2px)} }
@keyframes vision-idle { from{translate:var(--vision-pan-x,0px) var(--vision-pan-y,0px)} to{translate:var(--vision-pan-x,0px) calc(var(--vision-pan-y,0px) - 3px)} }
@keyframes character-light-pass { 0%,65%{transform:translateX(-130%)} 90%,100%{transform:translateX(130%)} }
@keyframes character-select-flare { from{opacity:1;transform:scale(.35)} to{opacity:0;transform:scale(1.6)} }
@keyframes project-domain-seal { 0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-45deg)} 42%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(15deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.5) rotate(65deg)} }
@keyframes project-domain-copy { 0%,32%{opacity:0;letter-spacing:.42em} 55%{opacity:1} 100%{opacity:0;letter-spacing:.22em} }
@keyframes outfit-ripple { 0%{opacity:0;transform:scale(.3)} 35%{opacity:1} 100%{opacity:0;transform:scale(1.7)} }
@keyframes outfit-arrive { 0%{opacity:.25;transform:scale(1.08);filter:brightness(1.7) saturate(.6)} 100%{opacity:1;transform:scale(1);filter:none} }
@keyframes constellation-launch { 0%{transform:translate(0,0) scale(1)} 55%{transform:translate(34px,24px) scale(1.7)} 100%{transform:translate(72px,56px) scale(.15);opacity:0} }
@keyframes constellation-link-trace { from{transform:scaleX(0);transform-origin:left;opacity:1} to{transform:scaleX(1);transform-origin:left;opacity:0} }
@keyframes wish-comet-cross { 0%{opacity:0;transform:translateX(0) rotate(-18deg)} 18%{opacity:1} 100%{opacity:0;transform:translateX(120vw) rotate(-18deg)} }
@keyframes wish-stars-gather { 0%{opacity:0;transform:translate(var(--wish-x),var(--wish-y)) scale(.3)} 70%{opacity:1} 100%{opacity:0;transform:translate(0,0) scale(1.5)} }
@keyframes wish-star-bloom { 0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-30deg)} 55%{opacity:1;transform:translate(-50%,-50%) scale(1.65) rotate(8deg)} 100%{opacity:.72;transform:translate(-50%,-50%) scale(1) rotate(0)} }
@keyframes acquired-message { 0%{opacity:0;transform:translate(-50%,8px)} 20%,75%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0;transform:translate(-50%,-6px)} }

@media (max-width:800px) {
  .elemental-cursor,.hydro-cursor-drop,.chapter-signature,.chapter-nav-line,.chapter-nav-traveller { display:none!important; }
  .domain-gate { inset:18%; }
  .journey-route { left:calc(var(--journey-route-start) - 1px); }
  .world-atmosphere { opacity:.55; }
  .character-stage.cinematic-active .portrait-card { animation-duration:7s; }
  .character-title-card,.character-attribute-card,.character-traits,.character-constellation-link { display:none; }
  .character-selected .portrait-card { transform:none; }
}
@media (min-width:601px) and (max-width:800px) { .journey-list { --journey-route-start:123px; } }
@media (max-width:600px) { .journey-list { --journey-route-start:13px; } .journey-route { display:block; } }
@media (prefers-reduced-motion:reduce) {
  .character-stage .portrait-window::before { display:none!important; }
  #portrait { translate:none!important; }
  .world-atmosphere,.journey-progress-indicator,.elemental-cursor,.hydro-cursor-drop,.hydro-page-ripple,.chapter-signature,.domain-gate,.project-data-flow,.wish-finale,.constellation-energy-channel { display:none!important; }
  .journey-route::after { transform:scaleY(1); transition:none; }
  .journey-ready .journey-item :is(.journey-date,.journey-node,.journey-body) { opacity:1; }
  .journey-item,.journey-item * { animation:none!important; transition:none!important; }
  .vision::before,.hydro-awakening *,.character-stage .portrait-card,.character-stage .portrait-window img,.character-stage .vision,.chapter-nav a.active { animation:none!important; }
  .character-select-trigger,.character-selection-ui { display:none; }
  .portfolio-page::after,.paper::after { display:none; }
  .hero-profession .typed { transition:none; }
}