/* Private visual study. All styling is scoped to the existing navy enrollment. */
#enroll { overflow: clip; }
#enroll .enroll-card { position: relative; }
#enroll .enroll-visual {
  position: absolute; top: 8px; right: 0; width: 360px; height: 220px;
  margin: 0; isolation: isolate;
}
#enroll .enroll-light-lines {
  position: absolute; width: 154%; max-width: none; height: 220px;
  left: -27%; top: 0; pointer-events: none; overflow: visible;
}
#enroll .enroll-line-field { stroke-width: 1; }
#enroll .enroll-line-glint { opacity: 0; pointer-events: none; }
#enroll .enroll-line-glint path { stroke-dasharray: 10 90; stroke-dashoffset: 12; }
#enroll .enroll-visual[data-motion="playing"] .enroll-line-glint { animation: enroll-glint-opacity 4.2s ease-in-out both; }
#enroll .enroll-visual[data-motion="playing"] .enroll-line-glint path { animation: enroll-glint-travel 4.2s linear both; }
#enroll .enroll-artwork-spread { position: relative; width: 300px; height: 175px; margin: 0 auto; }
#enroll .enroll-artwork {
  position: absolute; display: block; width: 242px; height: auto; aspect-ratio: 16 / 9;
  object-fit: contain; border: 1px solid #c6ae8f66; border-radius: 1px;
  box-shadow: 0 9px 22px #00000040; transform-origin: 50% 80%;
}
#enroll .enroll-artwork-last { left: 48px; top: 1px; transform: rotate(8deg); }
#enroll .enroll-artwork-middle { left: 6px; top: 11px; transform: rotate(-7deg); }
#enroll .enroll-artwork-first { left: 27px; top: 33px; transform: rotate(-1deg); }
#enroll .enroll-visual figcaption {
  color: #c2cbd0; font: 400 11px/1.5 var(--sans); letter-spacing: .02em;
  text-align: center; margin: 14px 0 0;
}
#enroll .enroll-visual figcaption span { padding-inline: 5px; color: #c6ae8f; }
@keyframes enroll-glint-travel { from { stroke-dashoffset: 12; } to { stroke-dashoffset: -100; } }
@keyframes enroll-glint-opacity { 0%,100% { opacity: 0; } 12%,72% { opacity: .75; } }
@media (min-width: 861px) and (max-width: 1100px) {
  #enroll .enroll-visual { width: 300px; top: 14px; }
  #enroll .enroll-light-lines { width: 100%; left: 0; }
  #enroll .enroll-artwork-spread { transform: scale(.9); transform-origin: top center; }
  #enroll .enroll-visual figcaption { margin-top: 0; }
}
@media (max-width: 860px) {
  #enroll .enroll-visual { position: relative; top: auto; right: auto; width: 100%; max-width: 480px; height: 196px; margin: 24px auto 12px; }
  #enroll .enroll-light-lines { width: 124%; left: -12%; top: -2px; height: 180px; }
  #enroll .enroll-artwork-spread { width: 290px; height: 166px; }
  #enroll .enroll-artwork { width: 236px; }
  #enroll .enroll-artwork-last { left: 43px; }
  #enroll .enroll-artwork-middle { left: 3px; }
  #enroll .enroll-artwork-first { left: 25px; }
  #enroll .enroll-visual figcaption { margin-top: 10px; }
  #enroll .enroll-list { margin-top: 18px; }
}
@media (max-width: 360px) {
  #enroll .enroll-artwork-spread { width: 250px; height: 149px; }
  #enroll .enroll-artwork { width: 205px; }
  #enroll .enroll-artwork-last { left: 39px; }
  #enroll .enroll-artwork-first { left: 20px; top: 29px; }
  #enroll .enroll-visual { height: 178px; }
  #enroll .enroll-light-lines { top: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  #enroll .enroll-line-glint, #enroll .enroll-line-glint path { animation: none !important; }
  #enroll .enroll-line-glint { opacity: 0 !important; }
}