/* Noticeable cinematic interactions built on, not over, Concept 04. */
:root{--motion-copper:#f7a35c;--motion-edge:#e89751}
@view-transition{navigation:auto}
body:not(.menu-open) main{animation:pageReveal .52s cubic-bezier(.2,.7,0,1) both}
@keyframes pageReveal{from{opacity:.15;filter:brightness(.5)}to{opacity:1;filter:brightness(1)}}
/* hero: the original art remains the visible, primary scene */
.home-hero .hero-art img{animation:heroDrift 19s ease-in-out infinite alternate;transform-origin:63% 56%}
@keyframes heroDrift{0%{transform:scale(1.005) translate3d(0,0,0)}100%{transform:scale(1.075) translate3d(-12px,-5px,0)}}
.living-hero-layers{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;isolation:isolate}
.hero-haze{display:block;position:absolute;width:150%;height:55%;left:-22%;bottom:-12%;filter:blur(16px);opacity:.42;background:radial-gradient(ellipse at 20% 70%,rgba(255,225,190,.28),transparent 34%),radial-gradient(ellipse at 47% 44%,rgba(205,224,223,.32),transparent 37%),radial-gradient(ellipse at 72% 75%,rgba(255,215,174,.2),transparent 35%);animation:mistFlow 13s ease-in-out infinite alternate}
.hero-haze.haze-front{bottom:-23%;left:-40%;height:48%;opacity:.35;filter:blur(26px);animation-duration:17s;animation-direction:alternate-reverse}
.lantern-glow{position:absolute;right:3.8%;bottom:7%;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(255,158,55,.58),rgba(253,164,67,.26) 24%,rgba(245,151,62,.06) 55%,transparent 75%);mix-blend-mode:screen;animation:lanternPulse 3.5s ease-in-out infinite alternate}
.warm-light-wash{position:absolute;right:0;top:0;width:40%;height:100%;background:radial-gradient(ellipse at 66% 58%,rgba(255,162,64,.17),transparent 53%);animation:lanternPulse 5.5s ease-in-out infinite alternate-reverse}
@keyframes mistFlow{0%{transform:translateX(-9%) translateY(0) scaleY(1)}100%{transform:translateX(14%) translateY(-14px) scaleY(1.1)}}
@keyframes lanternPulse{from{opacity:.42;transform:scale(.86)}to{opacity:1;transform:scale(1.16)}}
.home-hero.scene-paused .hero-art img,.home-hero.scene-paused .living-hero-layers *{animation-play-state:paused!important}
.home-hero .hero-content{z-index:3}.home-hero .hero-copy>*{animation:stagedHero .7s cubic-bezier(.22,.68,0,1) both}
.home-hero .hero-copy>*:nth-child(1){animation-delay:.16s}.home-hero .hero-copy>*:nth-child(2){animation-delay:.30s}.home-hero .hero-copy>*:nth-child(3){animation-delay:.47s}.home-hero .hero-copy>*:nth-child(4){animation-delay:.63s}.home-hero .hero-copy>*:nth-child(5){animation-delay:.79s}
@keyframes stagedHero{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
/* section storytelling */
.story-ready:not(.story-seen){opacity:0;transform:translateY(32px)}.story-ready.story-seen{opacity:1;transform:none;transition:transform .7s cubic-bezier(.2,.75,.15,1) var(--reveal-delay,0ms),opacity .7s ease var(--reveal-delay,0ms)}
/* prominent cards: warm copper illumination */
.course-card{position:relative;transition:transform .28s cubic-bezier(.22,.68,0,1),box-shadow .28s,border-color .28s!important}
.course-thumb img{transition:transform .38s cubic-bezier(.22,.68,0,1),filter .38s!important}
@media(hover:hover){.course-card:hover,.course-card:focus-within{transform:translateY(-9px)!important;border-color:#f7a35c!important;box-shadow:0 0 0 1px rgba(247,163,92,.55),0 17px 50px rgba(0,0,0,.57),0 0 32px rgba(247,163,92,.24)!important;z-index:5}.course-card:hover .course-thumb img,.course-card:focus-within .course-thumb img{transform:scale(1.09)!important;filter:saturate(1.25) brightness(1.12)}}
.course-card:active{transform:translateY(-3px) scale(.983)!important;border-color:var(--accent)!important}

/* curriculum path: preserve original course cards and four groups */
.animated-learning-path{position:relative;--path-progress:0%;padding-left:22px}
.learning-rail{position:absolute;top:30px;bottom:26px;left:5px;width:4px;background:rgba(247,163,92,.15);border-radius:10px;pointer-events:none}
.learning-line{display:block;position:absolute;top:0;left:0;width:100%;height:var(--path-progress);max-height:100%;border-radius:10px;background:linear-gradient(#ffa95f,#f4c585,#da6a2e);box-shadow:0 0 16px #f7a35c,0 0 35px rgba(247,163,92,.35);transition:height .14s linear}
.path-node{position:relative;min-width:0;border-radius:5px;transition:box-shadow .24s}
.path-node .direction-course{height:auto}
.path-node.path-active{box-shadow:0 0 22px rgba(247,163,92,.25)}
.path-step-number{position:absolute;z-index:5;top:7px;left:9px;display:grid;place-items:center;width:38px;height:38px;border:2px solid #a45f35;border-radius:50%;color:#f9ddb9;background:#0d1c26;box-shadow:0 0 0 3px rgba(10,20,27,.7);font-size:13px;font-weight:bold;transform:scale(.9);transition:transform .3s,border-color .3s,box-shadow .3s}
.path-reached .path-step-number{transform:scale(1.12);border-color:#f8a35c;box-shadow:0 0 16px #cc814e,0 0 0 4px #0d1c26}
.path-expand{display:block;width:100%;text-align:left;padding:12px 17px;background:#20303a;color:#ffd4ad;border:1px solid #865c40;border-top:0;font-size:13px;font-weight:700;letter-spacing:.03em}
.path-expand:hover,.path-expand:focus-visible{background:#ac653c;color:white}
.path-details{background:#15242b;border:1px solid #865c40;border-top:none;padding:16px 17px 20px}
.path-details p{font-size:13px;color:#d4d3cf;line-height:1.55;margin-bottom:8px}.path-details .path-topic{color:#f7a35c;font-weight:700}
.path-details-link{display:inline-block;color:#f7a35c;text-decoration:underline;text-underline-offset:4px;margin-top:8px}
/* menu: existing position:fixed and z-order never inherited from a transformed ancestor */
.mobile-menu.is-open .mobile-menu-links a{animation:menuLinkIn .32s cubic-bezier(.2,.7,0,1) both;animation-delay:var(--menu-delay,0ms)}
@keyframes menuLinkIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.mobile-menu-links a:hover,.mobile-menu-links a:focus-visible{color:#f7a35c!important;background:rgba(247,163,92,.08)}
/* preview modal and sample reader */
.btn-demo,.btn-preview{margin-top:14px;color:#ffd5b0;border:1px solid #f7a35c;background:rgba(247,163,92,.16);box-shadow:0 0 22px rgba(247,163,92,.12);white-space:normal;text-align:left}
.btn-demo:hover,.btn-preview:hover{background:#d27e42;color:#101a22;box-shadow:0 0 30px rgba(247,163,92,.35)}
.btn-preview{display:inline-flex;margin-top:12px;font-size:13px}
.kry-dialog{background:#0d1921;color:#f3eee6;border:1px solid #cc8756;border-radius:9px;box-shadow:0 35px 140px rgba(0,0,0,.87),0 0 45px rgba(224,136,74,.16);max-width:min(900px,calc(100vw - 24px));max-height:90vh;overflow:auto;padding:24px 27px}
.kry-dialog::backdrop{background:rgba(2,7,13,.86);backdrop-filter:blur(5px)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:16px;border-bottom:1px solid #38434a}
.dialog-close{display:grid;place-items:center;background:#253540;border:1px solid #a87956;color:#f9d0ae;font-size:28px;width:43px;height:43px;border-radius:5px;flex-shrink:0}
.reader-layout{display:grid;grid-template-columns:35% 1fr;gap:26px;padding-top:22px}
.reader-side img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid #825637;box-shadow:0 12px 38px #000}
.reader-copy h2,.game-modal-title h2{font:normal clamp(26px,3vw,38px)/1.16 Georgia,serif;margin:6px 0 18px}
.reader-copy p,.reader-copy li{font-size:14px;line-height:1.6;color:#e0e0da}
.reader-copy h3{color:#f7a35c;font-size:14px;margin:17px 0 7px}
.reader-count{color:#f7a35c;font-weight:bold;letter-spacing:.12em}
.reader-disclaimer{font-size:12px!important;border-left:3px solid #b68052;padding-left:12px;margin-top:20px}
.reader-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:19px;flex-wrap:wrap}
.reader-controls button{padding:10px 15px;border:1px solid #bd7a4e;border-radius:4px;background:#1d2f39;color:#f8d9bd}.reader-controls button:disabled{opacity:.32;cursor:default}
.reader-dots{color:#f7a35c;letter-spacing:.25em}
/* mini-game: a functional experience nested in approved Free Guide content */
.game-dialog{width:min(850px,calc(100vw - 20px));padding:21px}
.game-modal-title{padding:18px 0 7px}.game-modal-title p{max-width:670px;color:#cdd0cf;margin-bottom:12px}
.game-hud{display:flex;gap:12px;align-items:center;justify-content:space-between;background:#1d3037;border:1px solid #76573e;padding:10px 12px;border-radius:5px;font-size:13px;font-weight:bold;color:#facb9b}
.game-hud #gameStatus{flex:1;text-align:center}.restart-demo{border:1px solid #a67a52;border-radius:3px;background:#253741;color:#f5d5b4;padding:6px 10px}
.game-area{height:270px;position:relative;overflow:hidden;border:2px solid #cb8a5c;border-radius:6px;background:linear-gradient(to top,#0d1821 0%,rgba(9,19,26,.2) 42%,rgba(17,30,45,.34) 100%),url('assets/images/mission-panorama.webp') center/cover}
.game-horizon{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,16,17,.46),transparent 60%);pointer-events:none}
.game-ground{position:absolute;bottom:24px;left:0;right:0;height:28px;background:linear-gradient(#796049,#48382b);border-top:4px solid #e2a46d;box-shadow:0 -15px 25px rgba(229,158,82,.16)}
.game-player{position:absolute;bottom:55px;left:7%;width:31px;height:60px;z-index:4;transition:left .02s linear;filter:drop-shadow(0 3px 5px #000)}
.game-player:before{content:'';position:absolute;left:8px;top:0;width:17px;height:17px;border-radius:50%;background:#f0ba86;border:3px solid #362c2a}
.game-player:after{content:'';position:absolute;left:1px;top:18px;width:32px;height:42px;background:linear-gradient(125deg,#1c2934 30%,#e9a15f 31%,#4e3d35 41%,#1d3440 62%,#202e3b 63%);clip-path:polygon(26% 0,79% 0,100% 100%,50% 72%,0 100%);border-radius:5px}
.game-player.won{filter:drop-shadow(0 0 10px #ffcc76)}
.game-marker{position:absolute;bottom:100px;width:23px;height:23px;transform:rotate(45deg);background:linear-gradient(45deg,#f7a35c,#fff2bc);border:2px solid #ffe3a2;box-shadow:0 0 13px #ffd08e,0 0 32px rgba(255,176,83,.6);animation:markerFloat 1.3s ease-in-out infinite alternate}
.game-marker:before{content:'';position:absolute;inset:5px;border:1px solid #fff8df}.game-marker.marker-one{left:27%}.game-marker.marker-two{left:48%}.game-marker.marker-three{left:68%}.game-marker.collected{display:none}
@keyframes markerFloat{to{translate:0 -10px}}
.game-gate{position:absolute;bottom:54px;right:6%;width:65px;height:109px;border:12px ridge #5d5551;border-bottom:none;border-radius:35px 35px 0 0;background:radial-gradient(ellipse at center,#733e29,#10151e 60%);box-shadow:0 0 15px #000;transition:background .4s,box-shadow .4s}
.game-gate span{position:absolute;left:0;right:0;top:-30px;font-size:11px;text-align:center;letter-spacing:.14em;color:#efb27b}.game-gate.open{background:radial-gradient(ellipse at center,#fff1bc,#f6af53 45%,#6b4939 85%);box-shadow:0 0 28px #ffbd79,0 0 90px rgba(255,160,58,.5)}
.game-mobile-controls{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-top:15px}.game-mobile-controls button{font-weight:bold;color:#08131a;background:#f7a35c;border:0;border-radius:5px;padding:13px 25px;touch-action:none;user-select:none}.game-mobile-controls p{font-size:12px;color:#bdc4c2;text-align:center;margin:0}
/* navigation curtain overlays page only during a real page change */
#pageCurtain{position:fixed;z-index:95;inset:0;pointer-events:none;background:#061015;color:#f5bf8e;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .33s}
#pageCurtain.show{opacity:1}.curtain-mark{font:bold 78px/1 Georgia,serif;text-shadow:0 0 40px rgba(247,163,92,.55)}.curtain-name{letter-spacing:.33em;margin-top:15px;font-size:13px}
.travel-cover{position:fixed;z-index:110;object-fit:cover;border:2px solid #f7a35c;border-radius:4px;box-shadow:0 0 55px rgba(247,163,92,.6);pointer-events:none;transition:top .55s cubic-bezier(.24,.7,0,1),left .55s cubic-bezier(.24,.7,0,1),width .55s,height .55s}
@media(max-width:850px){.reader-layout{grid-template-columns:30% 1fr}.game-area{height:220px}}
@media(max-width:600px){.hero-haze{opacity:.25}.lantern-glow{right:-8%;bottom:3%;width:135px;height:135px}.kry-dialog{padding:15px;max-height:93dvh}.reader-layout{display:block}.reader-side{display:none}.game-hud{flex-wrap:wrap}.game-hud #gameStatus{order:3;flex-basis:100%}.game-area{height:205px}.game-mobile-controls button{padding:12px 18px}.game-mobile-controls p{font-size:10px}.animated-learning-path{padding-left:13px}.learning-rail{left:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.living-hero-layers{display:none}.story-ready{opacity:1!important;transform:none!important}.travel-cover{display:none}.learning-line{transition:none}.mobile-menu-links a{transform:none!important}}