/* One entrance per page; subsequent motion answers a user's action. */
.ui-icon{display:inline-block;flex-shrink:0;vertical-align:middle;width:24px;height:24px}
[data-experience] .proposal{flex-wrap:wrap;align-items:center}
.motion-toggle{font:inherit;line-height:1.4;color:inherit;background:transparent;border:1px solid currentColor;padding:4px 9px;border-radius:3px;cursor:pointer}
.motion-toggle:focus-visible{outline:3px solid #237aa0;outline-offset:4px}
.motion-toggle:disabled{cursor:default}
[data-experience] .button{display:inline-flex;align-items:center;gap:14px;transition:background-color .18s,transform .18s,box-shadow .18s}
[data-experience] .button .ui-icon{width:21px;height:21px}
[data-experience] h2>.ui-icon{display:block;width:34px;height:34px;margin-bottom:16px;color:var(--orange)}
[data-experience] .family-links a>.ui-icon{width:30px;height:30px;color:var(--orange);margin-bottom:6px}
[data-experience] .route-icon .ui-icon{width:28px;height:28px}
[data-experience] .routes>a{padding-right:56px}
[data-experience] .routes>a,[data-experience] .family-links>a{transition:transform .2s,background-color .2s,box-shadow .2s}
[data-experience] .routes strong{display:inline-block}
[data-experience] .routes>a::before{content:'';position:absolute;left:0;top:-3px;width:100%;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s}
[data-experience] .routes>a:hover::before,[data-experience] .routes>a:focus-visible::before{transform:scaleX(1)}
[data-experience] .hero-image img,[data-experience] .hero figure img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
[data-experience] .hero-image{overflow:hidden}
[data-experience=club] .hero-image{border-left:4px solid var(--orange);padding-left:12px}
[data-experience=story] .hero-image{border-radius:160px 0 0 0}
[data-experience] .button:active{transform:scale(.98)}
[data-experience] .routes>a:active,[data-experience] .family-links>a:active{transform:translateY(1px)}
[data-experience] .finder-copy h2>.ui-icon{display:block;width:32px;height:32px;margin-bottom:12px;color:#a64315}
[data-experience] .finder-box{position:relative}
[data-experience] .finder-box>label>.ui-icon{width:18px;height:18px;margin-right:7px}
[data-experience] .grade-tabs button,[data-experience] .alumni-tabs button,[data-experience] .journey-filters button,[data-experience] .finder-suggestions button{transition:background-color .16s,color .16s,transform .16s}
[data-experience] button:active{transform:scale(.98)}
@media(hover:hover){
  [data-experience] .button:hover{transform:translateY(-3px);box-shadow:0 5px 0 rgba(20,23,18,.12)}
  [data-experience] .routes>a:hover,[data-experience] .family-links>a:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(20,23,18,.07)}
  [data-experience] .hero-image:hover img,[data-experience] .hero figure:hover img{transform:scale(1.025)}
  [data-experience] .routes>a:hover .route-icon{color:var(--orange)}
}
@media(prefers-reduced-motion:no-preference){
  [data-experience=club] .hero-copy{animation:join-left .65s cubic-bezier(.2,.8,.2,1) both}
  [data-experience=club] .hero-image{animation:join-right .8s cubic-bezier(.2,.8,.2,1) both}
  [data-experience=story] .hero-copy{animation:welcome .7s .08s both}
  [data-experience=story] .hero-image{animation:welcome .9s both}
  [data-experience=path] .hero-copy{animation:join-left .65s both}
  [data-experience=path] .hero figure{animation:join-right .8s both}
  [data-experience=next] .hero-photo{animation:camera-arrive .95s cubic-bezier(.2,.8,.2,1) both}
  [data-experience=next] .hero-copy,[data-experience=roster] .r-hero h1{animation:welcome .7s .05s both}
}
@keyframes join-left{from{opacity:.35;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}
@keyframes join-right{from{opacity:.35;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
@keyframes welcome{from{opacity:.4;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes camera-arrive{from{transform:scale(1.035)}to{transform:scale(1)}}
@media(max-width:600px){[data-experience=story] .hero-image{border-radius:80px 0 0 0}[data-experience] .button{gap:10px}[data-experience] h2>.ui-icon{width:28px;height:28px;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){[data-experience] *,[data-experience] *::before,[data-experience] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}[data-experience] .button:hover,[data-experience] .routes>a:hover,[data-experience] .family-links>a:hover,[data-experience] .hero-image:hover img,[data-experience] .hero figure:hover img,[data-experience] button:active{transform:none!important}}
[data-motion=reduced]{scroll-behavior:auto!important}
[data-motion=reduced] [data-experience] *,[data-motion=reduced] [data-experience] *::before,[data-motion=reduced] [data-experience] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
[data-motion=reduced] [data-experience] .button:hover,[data-motion=reduced] [data-experience] .routes>a:hover,[data-motion=reduced] [data-experience] .family-links>a:hover,[data-motion=reduced] [data-experience] .hero-image:hover img,[data-motion=reduced] [data-experience] .hero figure:hover img,[data-motion=reduced] [data-experience] button:active{transform:none!important}