/* The portal is the focal motion; reading content is visible at all times. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
html[data-motion=paused]{scroll-behavior:auto}
.hero-art .portal-scene{width:100%;height:604px;overflow:visible}
.course-art .portal-scene{width:100%;height:auto;overflow:visible}
.portal-scene{transform-origin:center bottom}
.page-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--orange);transform:scaleX(var(--read-progress,0));transform-origin:left;pointer-events:none}
.motion-controls{position:fixed;right:22px;bottom:20px;z-index:35;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.motion-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;border:1px solid #aac0c4;border-radius:24px;background:#fff;color:var(--ink);padding:9px 15px;font-size:12px;line-height:1.3;box-shadow:0 4px 18px #143b4312;cursor:pointer}
.back-to-top{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #aac0c4;border-radius:50%;background:white;color:var(--ink);box-shadow:0 4px 18px #143b4312}
.back-to-top[hidden]{display:none}
.back-to-top svg{width:18px;height:18px}
.back-to-top:hover{background:var(--water)}
[data-motion=on] .back-to-top:not([hidden]){animation:control-arrive 440ms var(--motion-ease)}
.motion-toggle svg{width:14px;height:14px;flex-shrink:0}
.motion-toggle:hover{background:var(--water)}
.motion-toggle[aria-pressed=true]{background:var(--water)}
.motion-toggle:disabled{cursor:default;box-shadow:none}
.motion-toggle .play-icon{display:none}
.motion-toggle[aria-pressed=true] .play-icon{display:block}
.motion-toggle[aria-pressed=true] .pause-icon{display:none}
.site-footer{padding-bottom:82px}

/* Feedback and continuity. */
.button{transition:background 360ms ease,color 360ms ease,transform 360ms var(--motion-ease)}
.button svg{transition:transform 440ms var(--motion-ease)}
.button:active{transform:translateY(1px)}
.pathway{isolation:isolate}
.pathway:before{content:'';position:absolute;inset:0 0 0 -14px;z-index:-1;background:var(--water);opacity:0;transition:opacity 400ms ease}
.pathway+.pathway:before{left:0}
.pathway strong,.pathway b{transition:transform 480ms var(--motion-ease)}
.pathway:focus-visible:before{opacity:1}
.field input,.field select,.field textarea{caret-color:var(--orange);transition:border-color 320ms ease,box-shadow 320ms ease}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#df9754;box-shadow:0 0 0 2px #ed7e2030}
summary:after{content:'+';transition:transform 440ms var(--motion-ease);transform-origin:center}
details[open]>summary:after{content:'+';transform:rotate(45deg)}
.menu-button .menu-line{transform-origin:12px 12px;transition:transform 480ms var(--motion-ease),opacity 280ms ease}
.menu-button[aria-expanded=true]{background:var(--water)}
.menu-button[aria-expanded=true] .menu-line:nth-child(1){transform:translateY(5px) rotate(45deg);transform-origin:12px 7px}
.menu-button[aria-expanded=true] .menu-line:nth-child(2){opacity:0;transform:scaleX(.3)}
.menu-button[aria-expanded=true] .menu-line:nth-child(3){transform:translateY(-5px) rotate(-45deg);transform-origin:12px 17px}

/* A single, bounded entrance opens the protective space from outside in. */
[data-motion=on] .portal-band{stroke-dasharray:1;animation:portal-open 1900ms var(--motion-ease) both;animation-delay:calc(var(--layer)*130ms)}
[data-motion=on] .portal-center{animation:portal-breathe 12.8s ease-in-out infinite;animation-play-state:paused;transform-box:view-box;transform-origin:280px 355px}
[data-motion=on] .portal-scene.is-active .portal-center{animation-play-state:running}
[data-motion=on] .portal-breath{animation:portal-tide 16s ease-in-out infinite;animation-delay:calc(var(--layer)*-2.2s);animation-play-state:paused;transform-origin:280px 624px;transform-box:view-box}
.portal-trace{opacity:0;pointer-events:none}
[data-motion=on] .portal-trace{opacity:.55;stroke-dasharray:.065 .935;animation:portal-travel 18s linear infinite;animation-delay:var(--trace-delay,0s);animation-play-state:paused}
[data-motion=on] .portal-scene.is-active .portal-breath,[data-motion=on] .portal-scene.is-active .portal-trace{animation-play-state:running}
[data-motion=on] .portal-depth{transform:translate(calc(var(--pointer-x,0px)*var(--depth)),calc(var(--pointer-y,0px)*var(--depth)));transition:transform 1000ms var(--motion-ease)}
[data-motion=on] .portal-scene{transform:translateY(var(--scroll-lift,0px)) scale(var(--scroll-scale,1));transition:transform 900ms var(--motion-ease)}
[data-motion=on] .hero h1,[data-motion=on] .course-hero h1,[data-motion=on] .about-hero h1{animation:headline-open 1520ms var(--motion-ease) both}
[data-motion=on] .site-nav.is-open{animation:menu-open 480ms var(--motion-ease) both}
[data-motion=on] .timeline{position:relative}
[data-motion=on] .timeline:before{content:'';position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--orange);transform:scaleX(var(--timeline-progress,0));transform-origin:left;pointer-events:none}
[data-motion=paused] .portal-depth,[data-motion=paused] .portal-scene{transform:none}
[data-motion=on] .photo-window img{transform:scale(1.065) translateY(var(--photo-drift,0px));transition:transform 900ms var(--motion-ease)}
[data-motion=on] .hero-copy>p,[data-motion=on] .hero-copy>.actions{animation:hero-support 1240ms var(--motion-ease) both;animation-delay:360ms}
[data-motion=on] .hero-copy>.actions{animation-delay:600ms}

@keyframes portal-open{from{stroke-dashoffset:1;opacity:.25}to{stroke-dashoffset:0;opacity:1}}
@keyframes portal-breathe{0%,100%{transform:translateY(8px) scale(.98)}50%{transform:translateY(-16px) scale(1.04)}}
@keyframes portal-tide{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-7px) scaleX(1.012)}}
@keyframes portal-travel{from{stroke-dashoffset:1}to{stroke-dashoffset:-1}}
@keyframes hero-support{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes control-arrive{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes headline-open{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes menu-open{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

@media(hover:hover) and (pointer:fine){
  [data-motion=on] .button:hover svg{transform:translateX(5px)}
  .pathway:hover:before{opacity:1}
  [data-motion=on] .pathway:hover strong{transform:translateX(7px)}
  [data-motion=on] .pathway:hover b{transform:translate(3px,-3px)}
}
@media(min-width:1600px){.hero-art .portal-scene{height:660px}}
@media(max-width:1100px){.hero-art .portal-scene{height:550px}}
@media(max-width:900px){.hero-art .portal-scene{height:520px;width:115%;max-width:none}}
@media(max-width:640px){
  .hero-art .portal-scene{height:auto;width:100%}
  .hero-art{height:330px}
  .motion-toggle{right:14px;bottom:14px;min-height:40px;font-size:11px;padding:9px 12px}
  .pathway:before{inset:0 -8px}
  .pathway+.pathway:before{left:-8px}
  [data-motion=on] .timeline:before{top:0;left:-1px;width:2px;height:100%;transform:scaleY(var(--timeline-progress,0));transform-origin:top}
}
@media(prefers-reduced-motion:reduce){
  .portal-scene,.portal-depth,.portal-center,.portal-breath,.photo-window img{transform:none!important;animation:none!important;transition:none!important}
  .portal-trace{display:none!important}
  .portal-band{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
  .hero h1,.course-hero h1,.about-hero h1,.site-nav,.hero-copy>p,.hero-copy>.actions,.back-to-top{clip-path:none!important;animation:none!important;transform:none!important;opacity:1!important}
  .button,.button svg,.pathway strong,.pathway b,summary:after{transition:none!important}
}
@media print{.motion-toggle,.page-progress{display:none}.portal-scene,.portal-band,.portal-center{animation:none!important;transform:none!important}.hero h1,.course-hero h1,.about-hero h1{animation:none!important;clip-path:none!important}.site-footer{padding-bottom:20px}}