/* Text travels with the whole content layer. Hints exist only while moving. */
.motion-layer{will-change:transform,opacity}
.sheet{animation:none}
.scrim{backdrop-filter:none}
.modal.is-closing .sheet,.modal.is-closing .scrim{pointer-events:none}
:root[data-motion="on"] button{transition:transform 200ms ease,background-color 240ms ease,color 240ms ease,border-color 240ms ease}
:root[data-motion="on"] button:active:not(:disabled){transform:scale(.975)}
:root[data-motion="on"] .icon-button:active:not(:disabled){transform:scale(.93)}
:root[data-motion="on"] .nav-item>span:first-child{transition:background-color 280ms ease,transform 240ms ease}
:root[data-motion="on"] .nav-item:active>span:first-child{transform:translateY(-2px)}
:root[data-motion="on"] body,:root[data-motion="on"] .bottom-nav,:root[data-motion="on"] .sheet{transition:background-color 320ms ease,color 320ms ease,border-color 320ms ease}
/* A pre-painted gradient layer moves; its text and background-position do not. */
:root[data-motion="on"][data-palette^="neon-"] :is(.hero,.day.active,.button-primary){position:relative;isolation:isolate;overflow:hidden}
:root[data-motion="on"][data-palette^="neon-"] :is(.hero,.day.active,.button-primary)::before{content:"";display:block;position:absolute;inset:-25%;z-index:-1;pointer-events:none;animation:neon-drift 18s ease-in-out infinite alternate;animation-delay:var(--motion-flow-delay,0ms)}
:root[data-motion="on"][data-palette^="neon-"] :is(.day.active,.button-primary)::before{background:linear-gradient(120deg,var(--buttonStart),var(--buttonMid) 48%,var(--buttonEnd))}
:root[data-motion="on"][data-palette^="neon-"] .hero::before{background:linear-gradient(130deg,var(--heroStart),var(--heroMid) 50%,var(--heroEnd))}
:root[data-motion="on"][data-palette^="neon-"] .hero .button-primary::before{background:linear-gradient(120deg,var(--limeStart),var(--limeMid) 48%,var(--limeEnd))}
@keyframes neon-drift{from{transform:translate3d(-9%,-3%,0)}to{transform:translate3d(9%,3%,0)}}
:root[data-motion-paused="true"] *,:root[data-motion-paused="true"] *::before{animation-play-state:paused!important}
.modal-open .app :is(.hero,.day.active,.button-primary)::before{animation-play-state:paused!important}
#content[data-motion-phase] :is(.hero,.day.active,.button-primary)::before{animation-play-state:paused!important}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.motion-setting{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
.motion-setting .reminder-title h3{font-size:14px}
.motion-setting-note{margin-top:9px;font-size:11px!important}
/* Selector buttons keep their layout; the independent highlight glides below. */
[data-slider]{position:relative;isolation:isolate}
.sub-tabs[data-slider]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:148px;flex-shrink:0}
[data-slider]>button{position:relative;z-index:1}
.selection-glider{position:absolute;left:0;top:0;z-index:0;pointer-events:none;transform-origin:0 0}
.sub-tabs>.selection-glider{background:var(--lime)}
.week-tabs>.selection-glider{background:var(--panel);box-shadow:0 2px 5px #1329360b}
.days>.selection-glider{background:var(--green)}
:root[data-palette^="neon-"] .sub-tabs>.selection-glider{background:linear-gradient(120deg,var(--limeStart),var(--limeMid) 48%,var(--limeEnd))}
:root[data-palette^="neon-"] .week-tabs>.selection-glider{background:linear-gradient(120deg,var(--accentStart),var(--accentMid) 48%,var(--accentEnd));box-shadow:0 0 14px var(--glowSoft)}
:root[data-palette^="neon-"] .days>.selection-glider{background:linear-gradient(120deg,var(--buttonStart),var(--buttonMid) 48%,var(--buttonEnd));box-shadow:0 0 18px var(--glow)}
:root [data-slider-ready]>button.active{background:transparent!important;box-shadow:none!important}
:root [data-slider-ready]>.day.active::before{content:none!important}
:root[data-motion="on"] [data-slider-ready]>button{transition:color 420ms ease,transform 200ms ease}
.timetable-results{display:flow-root}
.timetable-controls>.section-row{min-height:38px}

/* This boundary never translates. The gutter retains card shadows at rest. */
.timetable-viewport{position:relative;isolation:isolate;overflow:hidden;contain:paint;margin:0 -8px;padding:0 8px}
/* Opaque edge overlays avoid masked/composited WebView layers disappearing. */
.timetable-viewport[data-swipe-motion]::before,.timetable-viewport[data-swipe-motion]::after{content:"";position:absolute;top:0;bottom:0;width:8px;z-index:2;pointer-events:none}
.timetable-viewport[data-swipe-motion]::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.timetable-viewport[data-swipe-motion]::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}