/* /windows: "What is in every window" anatomy. MTO Windows & Doors, 2026-10-22.
   One drawing, eight numbered hotspots, one callout card at a time. Phone first: the card sits
   right under the drawing. Loops are transform / opacity. Reduced motion goes static. */

.anat { display: grid; gap: 14px; margin-top: 10px; }
.anat-stage { position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 400 / 480; container-type: size; -webkit-tap-highlight-color: transparent; }
.anat-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anat-3d { position: absolute; inset: 0; perspective: 170cqw; perspective-origin: 50% 42%; pointer-events: none; }
.sashL3 { position: absolute; transform-origin: 50% 100%; will-change: transform; transition: transform 520ms cubic-bezier(.4, 0, .2, 1); }
.sashL3 svg { width: 100%; height: 100%; overflow: visible; display: block; }
.anat.is-latch .sashL3 { transform: rotateX(-36deg); transition: transform 820ms cubic-bezier(.34, 1.56, .64, 1) 380ms; }

/* Hotspots: 44px targets, numbered, pulse until one is picked */
.hs-list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.hs {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent; border-radius: 50%;
}
.hs-n {
  width: 30px; height: 30px; border-radius: 50%; background: var(--royal, #1D4FA3); color: #FFFFFF; border: 2.5px solid var(--ink);
  font-family: var(--head); font-weight: 700; font-size: 0.95rem; line-height: 1; display: grid; place-items: center;
  transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), background-color 200ms ease, color 200ms ease;
  box-shadow: 0 2px 6px rgba(15, 42, 92, 0.2);
}
.hs::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid var(--royal, #1D4FA3); opacity: 0; pointer-events: none; }
html.js .anat:not(.picked) .hs::before { animation: hsring 2.2s cubic-bezier(.2, .6, .3, 1) infinite; animation-delay: calc(var(--i, 0) * 140ms); }
@keyframes hsring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.hs:hover .hs-n { transform: scale(1.12); }
.hs[aria-expanded="true"] .hs-n { background: var(--ink); color: #FFFFFF; transform: scale(1.18); box-shadow: 0 0 0 3px var(--sky, #A7D3F5), 0 2px 6px rgba(15, 42, 92, 0.2); }
.hs:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cards: stacked in one grid cell so the box never jumps when the card swaps */
.anat-side { display: grid; gap: 10px; align-content: start; }
.anat-hint { margin: 0; }
.anat-cards { display: grid; }
.anat-card { grid-area: 1 / 1; visibility: hidden; pointer-events: none; background: var(--ice, #EEF5FC); border-radius: 18px; padding: 16px 18px; border-left: 6px solid var(--royal, #1D4FA3); }
.anat-card > * { opacity: 0; transform: translateX(18px); transition: opacity 300ms ease, transform 520ms cubic-bezier(.2, .8, .2, 1); }
.anat-card > :nth-child(2) { transition-delay: 60ms; }
.anat-card > :nth-child(3) { transition-delay: 120ms; }
.anat-card.on { visibility: visible; pointer-events: auto; }
.anat-card.on > * { opacity: 1; transform: none; }
.anat-card .n { font-family: var(--head); font-weight: 600; color: var(--royal, #1D4FA3); margin: 0 0 2px; font-size: 0.9rem; }
.anat-card h3 { margin-bottom: 6px; }
.anat-card p:last-child { margin: 0; color: var(--muted); }
.anat-link { margin: 6px 0 0; }
.anat-link .btn { width: 100%; }
.rest-h { margin-top: 34px; }
.spec-rest { gap: 8px; }

/* No JS: every card shows, stacked, nothing hidden */
html:not(.js) .anat-card { visibility: visible; pointer-events: auto; grid-area: auto; }
html:not(.js) .anat-card > * { opacity: 1; transform: none; }
html:not(.js) .anat-cards { gap: 10px; }
html:not(.js) .anat-hint { display: none; }

.anat.off .anat-stage * { animation-play-state: paused !important; }

/* ---------- The drawing demonstrates each part ---------- */
.a-sun, .mol, .weld, .ray, .flash, .cold, .spacer-ring, .hl, .screen-slide, .latch, .lock, .sdrop, .weep, .hsheen { transform-box: fill-box; transform-origin: center; }
.sdrop, .weep { transform-origin: 0 0; }
@keyframes asun { from { transform: scale(1); } to { transform: scale(1.05); } }
html.js .a-sun { animation: asun 7s ease-in-out infinite alternate; }
.hsheen { transform: translateX(-130%) skewX(-18deg); }
@keyframes asheen { 0%, 70% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(290%) skewX(-18deg); } }
html.js .hsheen { animation: asheen 7s cubic-bezier(.4, 0, .2, 1) 1200ms infinite; }
html.js .sashL3 .hsheen { animation-delay: 1600ms; }

.hl { transition: opacity 240ms ease; }
.hl-frame { opacity: 0; }
@keyframes apulse { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
.anat.is-frame .hl-frame { opacity: .55; animation: apulse 1.6s ease-in-out infinite; }
.weld { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
@keyframes adraw { from { stroke-dashoffset: 100; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
.anat.is-frame .weld { animation: adraw 320ms ease-out both; }
.anat.is-frame .w1 { animation-delay: 200ms; } .anat.is-frame .w2 { animation-delay: 420ms; }
.anat.is-frame .w3 { animation-delay: 640ms; } .anat.is-frame .w4 { animation-delay: 860ms; }

.anat.is-glass .hl-glass, .anat.is-argon .hl-glass, .anat.is-spacer .hl-glass { opacity: .9; }
.ray { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
@keyframes aray { 0% { stroke-dasharray: 22 100; stroke-dashoffset: 144; opacity: 1; } 55% { stroke-dasharray: 22 100; stroke-dashoffset: 14; opacity: 1; } 56%, 100% { stroke-dasharray: 22 100; stroke-dashoffset: 14; opacity: 0; } }
.anat.is-glass .ray { animation: aray 2.4s cubic-bezier(.4, 0, .5, 1) 200ms infinite; }
.flash { transform: scale(0); }
@keyframes aflash { 0%, 22% { transform: scale(0); } 28% { transform: scale(1.4); } 36%, 100% { transform: scale(0); } }
.anat.is-glass .flash { animation: aflash 2.4s ease-out 200ms infinite; }

.mol { opacity: 0; transition: opacity 300ms ease; }
.anat.is-argon .mol { opacity: .9; }
@keyframes amol { 0% { transform: translate(0, 0); } 33% { transform: translate(7px, -9px); } 66% { transform: translate(-6px, 8px); } 100% { transform: translate(0, 0); } }
html.js .anat.is-argon .mol { animation: amol var(--d, 7s) ease-in-out infinite; animation-delay: var(--o, 0s); }

/* Spacer: the cold edge glows, then quits; the warm-edge ring stays */
@keyframes acold { 0% { opacity: 0; } 15% { opacity: .85; } 45% { opacity: .35; } 65% { opacity: .85; } 100% { opacity: 0; } }
.anat.is-spacer .cold { animation: acold 2.6s ease-in-out 100ms both; }
.anat.is-spacer .spacer-ring { opacity: 1; transition: opacity 400ms ease 2300ms; }

/* Lock: the cam turns, holds, turns back */
@keyframes alock { 0%, 10% { transform: rotate(0deg); } 30%, 70% { transform: rotate(90deg); } 90%, 100% { transform: rotate(0deg); } }
.anat.is-lock .lock { animation: alock 3s cubic-bezier(.34, 1.56, .64, 1) infinite; }

/* Sill: a drop runs down the glass, lands, and leaves by the weep hole */
.sdrop { opacity: 0; }
@keyframes adrop { 0% { transform: translateY(0) scale(1, 1.4); opacity: 0; } 8% { opacity: 1; } 55% { transform: translateY(142px) scale(1); opacity: 1; } 64%, 100% { transform: translateY(150px) scale(1.3, .7); opacity: 0; } }
.anat.is-sill .sdrop { animation: adrop 3s cubic-bezier(.5, 0, .8, .6) infinite; }
.weep { opacity: 0; }
@keyframes aweep { 0%, 60% { transform: scale(.2) translateY(0); opacity: 0; } 68% { transform: scale(1) translateY(0); opacity: 1; } 88% { transform: scale(.9, 1.3) translateY(26px); opacity: 1; } 94%, 100% { transform: scale(.9, 1.3) translateY(34px); opacity: 0; } }
.anat.is-sill .weep { animation: aweep 3s linear infinite; animation-delay: var(--o, 0s); }
.anat.is-sill .hl-sill { opacity: .7; }

/* Screen: the mesh slides down into its track */
.screen-slide { transform: translateY(-150px); opacity: 0; transition: transform 520ms cubic-bezier(.4, 0, .2, 1), opacity 200ms ease; }
.anat.is-screen .screen-slide { transform: translateY(0); opacity: 1; transition: transform 760ms cubic-bezier(.34, 1.56, .64, 1), opacity 200ms ease; }

/* Tilt latches slide to the middle, then the sash tilts in */
.latch { transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1); }
.anat.is-latch .l1 { transform: translateX(14px); }
.anat.is-latch .l2 { transform: translateX(-14px); }
/* Top sash: hidden copy sits over the drawn one, slides down and tilts in after the bottom sash */
.sashU3 { position: absolute; transform-origin: 50% 100%; opacity: 0; will-change: transform; transition: transform 520ms cubic-bezier(.4, 0, .2, 1), opacity 160ms ease 300ms; }
.sashU3 svg { width: 100%; height: 100%; overflow: visible; display: block; }
.anat.is-latch .sashU { opacity: 0; transition: opacity 120ms ease 1150ms; }
.anat.is-latch .sashU3 { opacity: 1; transform: translateY(16%) rotateX(-30deg); transition: opacity 120ms ease 1150ms, transform 900ms cubic-bezier(.34, 1.56, .64, 1) 1300ms; }
.anat.is-latch .lu1 { transform: translateX(14px); transition-delay: 1150ms; }
.anat.is-latch .lu2 { transform: translateX(-14px); transition-delay: 1150ms; }

@media (min-width: 640px) {
  .anat-link .btn { width: auto; }
}
@media (min-width: 960px) {
  .anat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: center; margin-top: 18px; }
  .anat-stage { max-width: 520px; margin: 0; }
  .anat-side { position: sticky; top: calc(var(--nav-h) + 24px); }
  .anat-cards { min-height: 11em; }
  .anat-card { padding: 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .anat *, .anat-card > *, .sashL3, .sashU3, .hs-n, .hs::before { animation: none !important; transition: none !important; }
  .anat.is-latch .sashL3, .sashU3 { transform: rotateX(-36deg); }
  .anat.is-argon .mol { opacity: .9; }
  .anat.is-spacer .spacer-ring { opacity: 1; }
  .anat.is-glass .ray { opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; }
  .anat.is-lock .lock { transform: rotate(90deg); }
  .hsheen { transform: translateX(40%) skewX(-18deg); opacity: .35; }
}