/* Astorians Midnight Coast 3.0.5: CINEMATIC SPECTACLE.
   Compositor-first transforms, live neon trails, dynamic chapter reveals;
   only active while motion is enabled. All actual content is semantic HTML. */
:root{--cine-hot:#ff70db;--cine-ice:#70eeff;--cine-amber:#ffc1a1;--cine-night:#0b091c}
html{scroll-behavior:auto!important}
#hero{isolation:isolate}
#hero .hero-grid{z-index:5}
#hero>.as-cine-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.as-cine-atmosphere .as-aurora{position:absolute;border-radius:50%;filter:blur(32px);opacity:.38;mix-blend-mode:screen;will-change:transform}
.as-cine-atmosphere .as-aurora.a{width:46vw;height:29vw;min-height:310px;top:-12%;right:-11%;background:radial-gradient(ellipse,#ff48cf73 0%,#8e35ff32 42%,transparent 70%);animation:as-driftA 11s ease-in-out infinite alternate}
.as-cine-atmosphere .as-aurora.b{width:39vw;height:31vw;min-height:240px;bottom:-27%;left:11%;background:radial-gradient(ellipse,#46daf253 0%,#742be72b 45%,transparent 71%);animation:as-driftB 14s ease-in-out infinite alternate}
.as-cine-atmosphere .as-cine-beam{position:absolute;left:-28%;top:28%;width:155%;height:1px;transform:rotate(-13deg);background:linear-gradient(90deg,transparent 2%,#75e9ff15 20%,#ffb6e782 58%,#75e9ff34 70%,transparent 97%);box-shadow:0 0 14px 2px #ff80d65a;animation:as-sky-beam 9s ease-in-out infinite alternate;opacity:.55}
.as-cine-atmosphere .as-cine-beam.two{top:76%;transform:rotate(10deg);animation-delay:-4s;opacity:.26}
@keyframes as-driftA{from{transform:translate3d(-5%,-4%,0) scale(.92)}to{transform:translate3d(10%,13%,0) scale(1.13)}}
@keyframes as-driftB{from{transform:translate3d(6%,0,0) scale(.9)}to{transform:translate3d(-9%,-10%,0) scale(1.1)}}
@keyframes as-sky-beam{0%{translate:-16% 0;opacity:.03}40%{opacity:.65}100%{translate:14% 0;opacity:.18}}
/* A continuous, clearly visible luminous line with a traveling spark. */
.as-cine-hairline{position:absolute;bottom:0;left:0;right:0;height:4px;z-index:9;pointer-events:none;background:linear-gradient(90deg,transparent,#a84cff 15%,#ff80c7 49%,#7cf3ff 80%,transparent);box-shadow:0 0 24px #fd5cda99,0 0 52px #813cdb66;opacity:.94}
.as-cine-hairline::before{content:'';position:absolute;width:15%;top:-2px;bottom:-2px;left:-20%;background:linear-gradient(90deg,transparent,#fff6ff 50%,transparent);filter:drop-shadow(0 0 11px #fff);animation:as-light-travel 4.2s linear infinite}
@keyframes as-light-travel{to{left:118%}}
/* Strong, cinematic opening scene: each headline travels far and resolves with a flash. */
html.as-spectacle:not(.cine-reduced) #hero .hero-copy h1{perspective:950px}
html.as-spectacle:not(.cine-reduced) #hero .hero-copy h1>span{display:block;opacity:1;overflow:visible;transform-origin:left center;filter:none;animation:none;will-change:transform,opacity}
html.as-spectacle:not(.cine-reduced) #hero.as-cine-stage-on .hero-copy h1>span{animation:as-hero-type 1.08s cubic-bezier(.13,.95,.23,1) both!important;animation-delay:calc(.14s + var(--as-line,0)*.26s)!important}
@keyframes as-hero-type{0%{opacity:0;transform:translate3d(-95px,78px,0) skewX(-9deg) rotateX(28deg);filter:blur(13px);clip-path:inset(0 100% 0 0)}38%{opacity:.93;filter:blur(1.5px)}70%{clip-path:inset(0 0 0 0)}100%{opacity:1;transform:translate3d(0,0,0) skewX(0) rotateX(0);filter:blur(0);clip-path:inset(0 0 0 0)}}
html.as-spectacle:not(.cine-reduced) #hero.as-cine-stage-on .hero-copy>.eyebrow{animation:as-flash-in .8s ease-out both;animation-delay:.12s}
html.as-spectacle:not(.cine-reduced) #hero.as-cine-stage-on .hero-copy>.desc{animation:as-soft-arrive .95s cubic-bezier(.2,.85,.22,1) both!important;animation-delay:1.18s!important}
html.as-spectacle:not(.cine-reduced) #hero.as-cine-stage-on .hero-actions{animation:as-soft-arrive .95s cubic-bezier(.2,.85,.22,1) both;animation-delay:1.47s}
@keyframes as-flash-in{0%{opacity:0;letter-spacing:.55em;filter:blur(6px)}55%{opacity:1;text-shadow:0 0 28px #ffc4e7}100%{opacity:1;letter-spacing:inherit;filter:none}}
@keyframes as-soft-arrive{0%{opacity:0;transform:translate3d(0,43px,0);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
/* Separate neon lens flare on the responsive 3D showcase. Do not transform the model itself. */
#hero .hero-visual::after{content:'';position:absolute;inset:13% 1%;border-radius:50%;border:1px solid rgba(172,107,255,.5);box-shadow:0 0 30px #a747d435,inset 0 0 35px #f474ff23;transform:rotate(-12deg) scale(.9);pointer-events:none;z-index:1;animation:as-halo-breathe 6.6s ease-in-out infinite alternate}
@keyframes as-halo-breathe{0%{opacity:.25;transform:rotate(-12deg) scale(.9)}100%{opacity:.85;transform:rotate(7deg) scale(1.055)}}
#hero .hero-copy .grad,.final-section h2 .grad{background-size:220% auto!important;animation:as-gradient-shine 7s linear infinite;background-image:linear-gradient(105deg,#ffa3c6 0%,#ffcc95 23%,#dc89ff 40%,#76f2ff 52%,#ffd6a9 73%,#ff83d5 100%)!important}
@keyframes as-gradient-shine{to{background-position:220% 50%}}
/* User-triggered replay (never purely decorative): repeat the real CSS timeline on demand. */
.as-replay{display:inline-flex;align-items:center;gap:9px;margin-top:15px;padding:9px 14px;border:1px solid #ff86e96b;border-radius:100px;background:#2b133bd9;color:#fff3fb;font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer;box-shadow:inset 0 0 15px #f94dd622,0 0 18px #f04ec321;transition:border-color .2s,box-shadow .2s,transform .2s}
.as-replay:hover,.as-replay:focus-visible{border-color:#88f7ff;box-shadow:0 0 22px #f05aca89,0 0 46px #5742e155;transform:translateY(-2px)}
.as-replay .as-spin{display:inline-block;font-size:16px;color:#88efff}
/* Chapter-line electrification: deliberately persistent while a chapter is visible. */
.section{overflow:clip}
.section>.as-chapter-line{position:absolute;inset:0 0 auto;height:3px;z-index:12;pointer-events:none;background:linear-gradient(90deg,transparent 0%,#6bf2ff 20%,#dc74fe 45%,#ff98c5 70%,transparent 100%);opacity:.15;transition:opacity .6s ease}
.section.as-scene-on>.as-chapter-line{opacity:.85;box-shadow:0 0 22px #ca50fb55}
.section>.as-chapter-line::after{content:'';position:absolute;top:-3px;left:-15%;height:9px;width:11%;background:linear-gradient(90deg,transparent,#fff 55%,transparent);opacity:0;filter:drop-shadow(0 0 8px #fd64ea)}
.section.as-scene-on>.as-chapter-line::after{opacity:.95;animation:as-light-travel 5s linear infinite}
.section::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transform:translateX(-110%) skewX(-11deg);background:linear-gradient(90deg,transparent 22%,#764fe300 35%,#f570cd12 49%,#92eaff1c 50%,transparent 64%);mix-blend-mode:screen}
.section.as-scene-on::after{animation:as-chapter-wipe 1.6s cubic-bezier(.21,.82,.31,1) both}
@keyframes as-chapter-wipe{0%{opacity:0;transform:translateX(-110%) skewX(-11deg)}24%{opacity:1}90%{opacity:.8}100%{opacity:0;transform:translateX(110%) skewX(-11deg)}}
/* Each word of a visible chapter title enters on its own film-frame; old subtle reveal overridden. */
html.as-spectacle:not(.cine-reduced) .section.as-scene-on h2.cine-heading .cine-word,
html.as-spectacle:not(.cine-reduced) .section.as-scene-on h2.cine-heading .grad{
 animation:as-title-cut .82s cubic-bezier(.12,.86,.16,1) both!important;
 animation-delay:calc(min(var(--cine-index,0),8)*.085s)!important;
 opacity:1;filter:none;transform:none;
}
@keyframes as-title-cut{0%{opacity:0;transform:translate3d(0,76px,0) skewY(4deg);filter:blur(8px);clip-path:inset(75% 0 0 0)}42%{opacity:1}100%{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}}
/* Images: a large wipe followed by depth / Ken Burns movement. The text remains live HTML. */
.as-cine-image{isolation:isolate}
.as-cine-image>.as-image-wipe{position:absolute;inset:-1px;z-index:7;pointer-events:none;transform:translateX(-105%);background:linear-gradient(110deg,transparent 10%,#f663e36e 36%,#fff6 49%,#74eafe94 55%,transparent 80%);mix-blend-mode:screen;opacity:0}
.as-cine-image.as-image-active>.as-image-wipe{animation:as-image-flash 1.55s cubic-bezier(.12,.67,.18,1) both}
@keyframes as-image-flash{0%{opacity:.5;transform:translateX(-110%)}20%{opacity:1}90%{opacity:.65}100%{opacity:0;transform:translateX(110%)}}
.as-cine-image.as-image-active img{animation:as-photo-arrive 1.3s cubic-bezier(.13,.89,.26,1) both}
@keyframes as-photo-arrive{0%{transform:scale(1.16) translateX(3%);filter:saturate(.3) brightness(.65)}100%{transform:scale(1) translateX(0);filter:saturate(1) brightness(1)}}
/* Zoom toward genuine eLearning artwork on hover without the oversized CPU filters. */
@media(hover:hover) and (pointer:fine){
  .as-cine-image:hover img{transform:scale(1.045);transition:transform .7s cubic-bezier(.15,.7,.2,1)}
  .as-cine-image:hover{box-shadow:0 22px 78px #b02bf366,0 0 0 1px #fd93f988!important}
  .destination-card:hover:before{transform:scale(1.09) translateY(-7px)!important;transition:transform .75s ease}
  .button:hover{box-shadow:0 0 28px #f24de088,0 8px 34px #0d083dbb!important}
}
/* Section numbering/eyebrow: a moving underline, not an additional headline. */
.section .eyebrow{position:relative;display:table}
.section .eyebrow::after{content:'';display:block;width:100%;height:1px;margin-top:8px;background:linear-gradient(90deg,#6ceffe,#f976eb,transparent);transform:scaleX(.15);transform-origin:left;opacity:.24}
.section.as-scene-on .eyebrow::after{animation:as-underline-grow 1.1s ease-out both}
@keyframes as-underline-grow{0%{transform:scaleX(.1);opacity:.2}65%{opacity:1}100%{transform:scaleX(1);opacity:.9}}
/* Scroll-directed image depth: one rAF write per frame, no layout reads in frames. */
.as-parallax-source::before{transform:translate3d(0,var(--as-parallax,0px),0) scale(1.10);will-change:transform}
/* Mobile: same look and obvious motion, reduced ranges/times, no heavy blurs or large halos. */
@media(max-width:768px){
 .as-cine-atmosphere .as-aurora{filter:blur(14px);opacity:.25}
 .as-cine-atmosphere .as-cine-beam{opacity:.18}
 #hero .hero-visual::after{inset:17% 5%;opacity:.35}
 html.as-spectacle:not(.cine-reduced) #hero.as-cine-stage-on .hero-copy h1>span{animation-name:as-hero-mobile!important;animation-duration:.68s!important;animation-delay:calc(.10s + var(--as-line,0)*.17s)!important}
 @keyframes as-hero-mobile{from{opacity:0;transform:translate3d(-35px,29px,0);clip-path:inset(0 72% 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
 html.as-spectacle:not(.cine-reduced) .section.as-scene-on h2.cine-heading .cine-word,
 html.as-spectacle:not(.cine-reduced) .section.as-scene-on h2.cine-heading .grad{animation-duration:.52s!important}
 @keyframes as-title-cut{0%{opacity:0;transform:translate3d(0,24px,0);clip-path:inset(38% 0 0 0)}100%{opacity:1;transform:none;clip-path:inset(0)}}
 .section.as-scene-on::after{animation-duration:.92s}
 .as-cine-hairline{height:3px}
 .as-replay{font-size:11px;min-height:42px}
 .as-cine-image.as-image-active img{animation-duration:.72s}
}
/* No motion: all original content stays visible and navigation remains usable. */
@media(prefers-reduced-motion:reduce){
 html.as-spectacle #hero .hero-copy h1>span,html.as-spectacle .section h2.cine-heading .cine-word,
 html.as-spectacle .section h2.cine-heading .grad{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
 .as-cine-atmosphere,.as-cine-hairline::before,#hero .hero-visual::after,.section>.as-chapter-line::after,.section::after,.as-image-wipe{animation:none!important;display:none!important}
 .as-cine-image img{animation:none!important;transform:none!important}
}
body.motion-off #hero .hero-copy h1>span,body.motion-off .section h2.cine-heading .cine-word,body.motion-off .section h2.cine-heading .grad{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
body.motion-off .as-cine-atmosphere,body.motion-off #hero .hero-visual::after,body.motion-off .as-cine-hairline::before,body.motion-off .section>.as-chapter-line::after,body.motion-off .section::after,body.motion-off .as-image-wipe{animation:none!important;display:none!important}
body.motion-off .as-cine-image img{animation:none!important;transform:none!important}
@media(forced-colors:active){.as-cine-atmosphere,.as-cine-hairline,.as-chapter-line,.as-image-wipe{display:none!important}}
/* Low-power devices retain the dramatic entrance, without perpetual large blur work. */
@media(max-width:768px){
 .as-cine-atmosphere .as-aurora,.as-cine-atmosphere .as-cine-beam,#hero .hero-visual::after{animation:none!important;will-change:auto}
 .as-cine-hairline::before,.section.as-scene-on>.as-chapter-line::after{animation-duration:8s}
 .as-parallax-source::before{transform:none!important;will-change:auto}
}