/* MTsN 1 Motion System v2.16.0
   Progressive enhancement: content is visible by default. Motion is applied
   only after JS marks an element as pending. */
:root{
  --motion-fast:180ms;
  --motion-base:360ms;
  --motion-slow:620ms;
  --motion-hero:760ms;
  --motion-ease:cubic-bezier(.22,.78,.22,1);
  --motion-ease-soft:cubic-bezier(.2,.65,.25,1);
  --motion-distance:16px;
  --motion-scale:.985;
}

@view-transition{navigation:auto}
::view-transition-old(root){animation:motion-page-out 150ms ease both}
::view-transition-new(root){animation:motion-page-in 360ms var(--motion-ease) both}
@keyframes motion-page-out{to{opacity:.82;transform:translateY(-3px)}}
@keyframes motion-page-in{from{opacity:.88;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Never hide content merely because a legacy reveal class exists. */
.reveal,[data-reveal],.js .content-card,.js .professional-staff-card,.js .external-news-card,.js .stat-card{
  opacity:1!important;
  transform:none;
  filter:none;
}

/* Motion controller states. */
.motion-ready [data-motion-item]{
  will-change:transform,opacity,filter;
  transition:
    opacity var(--motion-duration,var(--motion-base)) ease var(--motion-delay,0ms),
    transform var(--motion-duration,var(--motion-base)) var(--motion-ease) var(--motion-delay,0ms),
    filter var(--motion-duration,var(--motion-base)) ease var(--motion-delay,0ms);
}
.motion-ready [data-motion-item].is-motion-pending{opacity:0!important;filter:blur(1.5px)}
.motion-ready [data-motion-item][data-motion="fade-up"].is-motion-pending{transform:translate3d(0,var(--motion-distance),0)}
.motion-ready [data-motion-item][data-motion="fade-down"].is-motion-pending{transform:translate3d(0,-12px,0)}
.motion-ready [data-motion-item][data-motion="fade-left"].is-motion-pending{transform:translate3d(18px,0,0)}
.motion-ready [data-motion-item][data-motion="fade-right"].is-motion-pending{transform:translate3d(-18px,0,0)}
.motion-ready [data-motion-item][data-motion="scale"].is-motion-pending{transform:scale(var(--motion-scale))}
.motion-ready [data-motion-item].is-motion-visible{opacity:1!important;transform:none!important;filter:none!important}

/* Page/hero choreography. */
.motion-page-enter{animation:motion-shell-enter 420ms var(--motion-ease) both}
@keyframes motion-shell-enter{from{opacity:.92;transform:translateY(5px)}to{opacity:1;transform:none}}

.site-header,.portal-header,.tinta-site-header{
  transition:background-color 240ms ease,box-shadow 240ms ease,backdrop-filter 240ms ease,transform 240ms var(--motion-ease),border-color 240ms ease;
}
.site-header.is-scrolled,.portal-header.is-scrolled,.tinta-site-header.is-scrolled{
  backdrop-filter:saturate(135%) blur(16px);
  -webkit-backdrop-filter:saturate(135%) blur(16px);
}
.site-header.is-scrolled,.portal-header.is-scrolled{box-shadow:0 12px 34px rgba(13,54,50,.10)}

.portal-nav-group>div,.site-nav details>div,.dropdown-menu{
  transform-origin:top center;
  transition:opacity 190ms ease,transform 220ms var(--motion-ease),visibility 190ms ease!important;
}
.portal-nav-group:not([open])>div,.site-nav details:not([open])>div{transform:translateY(-7px) scale(.985)}

/* Professional interaction language. */
.button,button,.icon-button,.text-link,a.card-link{
  transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,opacity var(--motion-fast) ease;
}
.button.is-pressed,button.is-pressed,.icon-button.is-pressed{transform:translateY(1px) scale(.985)!important}
.button svg,.text-link svg,.icon-button svg{transition:transform 190ms var(--motion-ease)}
@media(hover:hover){
  .button:hover{transform:translateY(-2px)}
  .text-link:hover svg,.button:hover svg[data-icon="arrow-right"]{transform:translateX(3px)}
  .icon-button:hover svg{transform:scale(1.06)}
}

/* Card depth: restrained, consistent across public, portals and admin. */
.content-card,.professional-staff-card,.external-news-card,.stat-card,.module-action-card,
.student-metric-grid>article,.student-analytics-card,.student-directory-card,.student-name-card,
.principal-history-card,.mission-item,.gallery-card,.admin-card,.dashboard-card,.panel-card,
.home-today-card,.extracurricular-card,.service-card,.portal-intro-card{
  transition:transform 240ms var(--motion-ease),box-shadow 240ms ease,border-color 240ms ease,background-color 240ms ease;
}
@media(hover:hover){
  .content-card:hover,.professional-staff-card:hover,.external-news-card:hover,.module-action-card:hover,
  .student-metric-grid>article:hover,.student-name-card:hover,.principal-history-card:hover,.mission-item:hover,
  .gallery-card:hover,.dashboard-card:hover,.service-card:hover,.extracurricular-card:hover{
    transform:translateY(-4px);
  }
  .content-card:hover img,.external-news-card:hover img,.professional-staff-card:hover img,.gallery-card:hover img{
    transform:scale(1.035);
  }
}
.content-card img,.external-news-card img,.professional-staff-card img,.gallery-card img,
.home-slide img,.editorial-slide-media img{transition:transform 700ms var(--motion-ease-soft),opacity 320ms ease,filter 320ms ease}

/* Hero media should feel alive but never distracting. */
.ken-burns-active{animation:motion-ken-burns 13s ease-in-out both}
@keyframes motion-ken-burns{from{transform:scale(1.005)}to{transform:scale(1.055)}}

/* Image loading. */
.image-shell,.external-news-image,.staff-photo-wrap,.content-card-media,.gallery-media{position:relative;overflow:hidden}
.image-shell::after,.external-news-image::after,.staff-photo-wrap::after,.content-card-media::after,.gallery-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.46) 45%,transparent 70%);
  transform:translateX(-120%);opacity:.75;
  animation:motion-shimmer 1.35s ease-in-out infinite;
}
.image-shell.is-loaded::after,.external-news-image.is-loaded::after,.staff-photo-wrap.is-loaded::after,.content-card-media.is-loaded::after,.gallery-media.is-loaded::after{display:none}
@keyframes motion-shimmer{to{transform:translateX(120%)}}

/* Draw attention to values only once, not continuously. */
[data-motion-count].is-counting{font-variant-numeric:tabular-nums}
[data-motion-count].is-counted{animation:motion-count-settle 300ms var(--motion-ease)}
@keyframes motion-count-settle{50%{transform:translateY(-2px) scale(1.025)}to{transform:none}}

/* Chart stage entrance. */
.student-chart-stage canvas{transition:opacity 260ms ease,transform 360ms var(--motion-ease)}
.student-analytics-card.is-chart-waiting .student-chart-stage canvas{opacity:.4;transform:scale(.99)}
.student-analytics-card.is-chart-active .student-chart-stage canvas{opacity:1;transform:none}
.student-chart-legend>span{transition:opacity 260ms ease,transform 260ms var(--motion-ease)}

/* Forms: focused states should move visually without layout jumps. */
input,select,textarea{
  transition:border-color 180ms ease,box-shadow 180ms ease,background-color 180ms ease,transform 180ms var(--motion-ease);
}
input:focus,select:focus,textarea:focus{transform:translateY(-1px)}

/* Tables: animate the shell, keep hundreds of rows stable. */
.table-responsive,table{transition:opacity 260ms ease,transform 260ms var(--motion-ease)}
tbody tr{transition:background-color 160ms ease,box-shadow 160ms ease}
@media(hover:hover){tbody tr:hover{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--brand,#0f8f87) 65%,transparent)}}

/* Disclosure/accordion motion without fixed heights. */
details>summary{transition:color 180ms ease,background-color 180ms ease}
details>summary .icon:last-child,details>summary svg:last-child{transition:transform 220ms var(--motion-ease)}
details[open]>summary .icon:last-child,details[open]>summary svg:last-child{transform:rotate(180deg)}

/* Existing modal/drawer/lightbox get one shared entrance language. */
.search-modal,.lightbox,.admin-sidebar-backdrop{transition:opacity 220ms ease,visibility 220ms ease}
.search-panel,.drawer-panel,.accessibility-panel,.admin-sidebar{
  transition:transform 280ms var(--motion-ease),opacity 220ms ease,box-shadow 220ms ease!important;
}
.search-modal.is-open .search-panel{animation:motion-dialog-in 280ms var(--motion-ease) both}
.lightbox{animation:motion-overlay-in 220ms ease both}
.lightbox img{animation:motion-dialog-in 300ms var(--motion-ease) both}
@keyframes motion-dialog-in{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}
@keyframes motion-overlay-in{from{opacity:0}to{opacity:1}}

/* Toast/alert language. */
.alert,.toast,[role="status"]{animation:motion-notice-in 320ms var(--motion-ease) both}
@keyframes motion-notice-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Admin: keep it precise and calm. */
.admin-sidebar{transition:width 260ms var(--motion-ease),transform 280ms var(--motion-ease),box-shadow 220ms ease!important}
.admin-main,.admin-content{transition:margin 260ms var(--motion-ease),padding 260ms var(--motion-ease)}
.admin-nav a,.admin-sidebar a{transition:background-color 180ms ease,color 180ms ease,transform 180ms var(--motion-ease)}
@media(hover:hover){.admin-nav a:hover,.admin-sidebar a:hover{transform:translateX(2px)}}

/* Large directories should remain fast on mid-range Android devices. */
.student-name-card{content-visibility:auto;contain-intrinsic-size:72px}

/* Motion intensity preferences already used by the app. */
.motion-subtle{--motion-distance:10px;--motion-scale:.992;--motion-base:300ms;--motion-slow:500ms}
.motion-expressive{--motion-distance:20px;--motion-scale:.978;--motion-base:420ms;--motion-slow:720ms}

@media(max-width:680px){
  :root{--motion-distance:11px;--motion-base:320ms;--motion-slow:520ms}
}
@media(max-width:680px) and (hover:hover){
  .content-card:hover,.student-name-card:hover,.professional-staff-card:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-motion-item]{opacity:1!important;transform:none!important;filter:none!important;will-change:auto!important}
  .ken-burns-active{animation:none!important}
}
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;
}
html.reduce-motion [data-motion-item]{opacity:1!important;transform:none!important;filter:none!important;will-change:auto!important}