/* AssignmentToppers: progressive 3D motion, September 2026.
   All content remains visible without JavaScript. No scroll interception. */
.depth-motion-control {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 98;
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  padding: .55rem .85rem; border: 1px solid rgba(229,169,60,.48); border-radius: 999px;
  background: #0b192c; color: #fff; box-shadow: 0 5px 18px rgba(11,25,44,.18);
  font: 600 .75rem/1.3 var(--font-body, sans-serif); cursor: pointer;
}
.depth-motion-control svg { width: 16px; height: 16px; color: #f1c777; flex: none; }
.depth-motion-control:focus-visible { outline: 3px solid #e5a93c; outline-offset: 3px; }
.depth-motion-control:disabled { cursor: default; }
.nav-open .depth-motion-control { visibility: hidden; }
.depth-page-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 1100; pointer-events: none; }
.depth-page-progress span { display: block; height: 100%; background: #e5a93c; transform: scaleX(0); transform-origin: left; }

/* Photo, figures and process panel occupy separate planes; the form does not. */
html[data-at-motion="full"] .depth-hero .hero-video-container {
  transform: translate3d(0,var(--hero-back-y,0px),0) scale(1.07); transform-origin: center;
}
html[data-at-motion="full"] .depth-hero .hero-figures { perspective: 1200px; transform-style: preserve-3d; }
html[data-at-motion="full"] .depth-hero .hero-figure--student {
  animation: none;
  transform: translate3d(var(--hero-pointer-x,0px),var(--hero-front-y,0px),32px) rotateY(var(--hero-ry,0deg));
}
html[data-at-motion="full"] .depth-hero .hero-figure--advisor {
  animation: none;
  transform: translate3d(calc(var(--hero-pointer-x,0px) * -.55),var(--hero-mid-y,0px),-45px) rotateY(calc(var(--hero-ry,0deg) * -.6));
}
html[data-at-motion="full"] .depth-hero .hero-pipeline {
  transform: perspective(1300px) rotateX(var(--hero-panel-rx,0deg)) rotateY(-3deg);
  transform-origin: 50% 0; box-shadow: 0 20px 45px -25px #000;
}

/* Scroll-scrubbed showcase. Ordinary stacked flow on touch and short screens. */
.depth-stage-pin { position: relative; }
.depth-stage-meter { display: none; }
@media (min-width: 1200px) and (min-height: 640px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-at-motion="full"] .order-stage-section.depth-stage {
    min-height: 155vh; padding: 0; overflow: clip;
    background: radial-gradient(ellipse at 50% 55%,rgba(229,169,60,.11),transparent 65%),linear-gradient(180deg,#0b192c,#12283e 65%,#0b192c);
  }
  html[data-at-motion="full"] .depth-stage-pin {
    position: sticky; top: 78px; min-height: calc(100vh - 78px); padding: 1.8rem 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  html[data-at-motion="full"] .depth-stage .order-stage-head { margin-bottom: 1.8rem; }
  html[data-at-motion="full"] .depth-stage .order-stage-head h2 { color: #fff; }
  html[data-at-motion="full"] .depth-stage .order-stage-head p { color: #c4d2df; }
  html[data-at-motion="full"] .depth-stage .order-stage-eyebrow { color: #f1c777; }
  html[data-at-motion="full"] .depth-stage .stage-cards {
    width: min(1060px,calc(100% - 360px),calc((100vh - 395px) * 2.4)); perspective: 1600px; perspective-origin: 50% 42%; transform-style: preserve-3d;
  }
  html[data-at-motion="full"] .depth-stage .stage-card {
    transform: translate3d(var(--stage-x,0px),var(--stage-y,0px),var(--stage-z,0px)) rotateY(var(--stage-ry,0deg)) rotateX(var(--stage-rx,0deg)) rotateZ(var(--stage-rz,0deg));
    box-shadow: 0 28px 50px -24px rgba(0,0,0,.7),0 0 0 1px rgba(229,169,60,.1);
    transition: box-shadow .25s; will-change: auto;
  }
  html[data-at-motion="full"] .depth-stage .stage-card--anchor { z-index: 2; border-color: rgba(229,169,60,.7); }
  html[data-at-motion="full"] .depth-stage .stage-card--anchor:hover { box-shadow: 0 30px 55px -22px rgba(0,0,0,.8),0 0 0 2px #e5a93c; }
  html[data-at-motion="full"] .depth-stage-meter {
    display: flex; align-items: center; justify-content: center; gap: .85rem;
    margin: 1.6rem auto 0; color: #c4d2df; font-size: .75rem; letter-spacing: .025em;
  }
  .depth-stage-meter i { width: 95px; height: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
  .depth-stage-meter i::after { content: ''; display: block; height: 100%; background: #e5a93c; transform: scaleX(var(--stage-progress,0)); transform-origin: left; }
}

/* Lifting cards toward the reader gives each service a distinct, useful target. */
html[data-at-motion="full"] .depth-card {
  --enter-y: 0px; --enter-z: 0px; --enter-rx: 0deg; --pointer-rx: 0deg; --pointer-ry: 0deg; --lift-y: 0px;
  position: relative;
  transform: perspective(1100px) translate3d(0,calc(var(--enter-y) + var(--lift-y)),var(--enter-z)) rotateX(calc(var(--enter-rx) + var(--pointer-rx))) rotateY(var(--pointer-ry));
  transform-origin: 50% 50%; transform-style: preserve-3d;
  transition: box-shadow .24s, border-color .24s; will-change: auto;
}
html[data-at-motion="full"] .depth-card.is-depth-active { will-change: transform; }
html[data-at-motion="full"] .depth-card[data-depth-hover="true"] {
  border-color: #cf952b; box-shadow: 0 24px 44px -25px rgba(11,25,44,.36),0 2px 0 rgba(229,169,60,.45);
}
html[data-at-motion="full"] .depth-card > .service-box-icon,
html[data-at-motion="full"] .depth-card > .step-icon-wrap { transform: translateZ(22px); }
html[data-at-motion="full"] .depth-card > .service-box-title,
html[data-at-motion="full"] .depth-card > .service-box-link { transform: translateZ(12px); }
html[data-at-motion="full"] .depth-card:focus-within { transform: none; outline-offset: 4px; }
.depth-card .depth-sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--shine-x,50%) var(--shine-y,40%),rgba(229,169,60,.11),transparent 62%);
  opacity: 0; transition: opacity .25s;
}
.depth-card[data-depth-hover="true"] .depth-sheen { opacity: 1; }

/* The existing example report opens like a document, without changing its data. */
html[data-at-motion="full"] .depth-report .turnitin-preview-doc {
  transform-origin: left center;
  transform: perspective(1000px) rotateY(var(--report-ry,0deg)) translateZ(12px);
  box-shadow: 8px 14px 24px -20px rgba(11,25,44,.3);
}
html[data-at-motion="full"] .depth-report .turnitin-scores-col { transform: translateZ(26px); }

@media (max-width: 1100px), (hover: none), (pointer: coarse) {
  html[data-at-motion="full"] .depth-card { transform: perspective(1000px) translate3d(0,var(--enter-y),0) rotateX(var(--enter-rx)); transform-style: flat; }
  html[data-at-motion="full"] .depth-card > .service-box-icon,
  html[data-at-motion="full"] .depth-card > .step-icon-wrap,
  html[data-at-motion="full"] .depth-card > .service-box-title,
  html[data-at-motion="full"] .depth-card > .service-box-link { transform: none; }
  html[data-at-motion="full"] .depth-hero .hero-video-container,
  html[data-at-motion="full"] .depth-hero .hero-pipeline { transform: none; }
}
@media (max-width: 600px) {
  .depth-motion-control { left: .65rem; bottom: max(.65rem,env(safe-area-inset-bottom)); padding: .5rem .65rem; }
}

/* Preference applies to both new motion and the site's legacy effects. */
html[data-at-motion="reduced"] { scroll-behavior: auto !important; }
html[data-at-motion="reduced"] *,html[data-at-motion="reduced"] *::before,html[data-at-motion="reduced"] *::after { animation: none !important; transition: none !important; }
html[data-at-motion="reduced"] .depth-card,html[data-at-motion="reduced"] .depth-report .turnitin-preview-doc { transform: none !important; }
html[data-at-motion="reduced"] .depth-sheen,
html[data-at-motion="reduced"] #heroMotionCanvas,
html[data-at-motion="reduced"] .academic-band-canvas,
html[data-at-motion="reduced"] .ambient-particle-canvas,
html[data-at-motion="reduced"] video[aria-hidden="true"] { display: none !important; }
html[data-at-motion="reduced"] .stage-card { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .depth-card,.depth-report .turnitin-preview-doc,.depth-hero .hero-pipeline { transform: none !important; }
  .depth-sheen { display: none; }
}
@media print {
  .depth-motion-control,.depth-page-progress,.depth-stage-meter { display: none !important; }
  .depth-card,.stage-card,.depth-hero *,.depth-report * { transform: none !important; }
  .order-stage-section.depth-stage { min-height: 0 !important; }
  .depth-stage-pin { position: static !important; min-height: 0 !important; }
}

/* Keep the original decorative band subordinate to reading and card depth. */
.academic-band-canvas { opacity: .24; }
.academic-band-grid { opacity: .35; }

/* The floating motion toggle is retired; belt and braces in case an older
   cached script still injects it. */
.depth-motion-control { display: none !important; }

/* Shorter desktop viewports (a laptop at 100% zoom): the pinned stage still
   runs, with tighter vertical rhythm so the three cards fit above the fold. */
@media (min-width: 1200px) and (min-height: 640px) and (max-height: 799px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-at-motion="full"] .depth-stage-pin { padding: 1rem 0; }
  html[data-at-motion="full"] .depth-stage .order-stage-head { margin-bottom: 1rem; }
  html[data-at-motion="full"] .depth-stage .order-stage-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .4rem; }
  html[data-at-motion="full"] .depth-stage .order-stage-head p { font-size: .95rem; }
  html[data-at-motion="full"] .depth-stage .stage-cards {
    width: min(1060px, calc(100% - 360px), calc((100vh - 300px) * 2.4));
  }
  html[data-at-motion="full"] .depth-stage-meter { margin-top: .9rem; }
}