/* Tilt-aside menu. Rewritten from the Da Maria Webflow template (IX2 a-204 "Menu [IN]", a-206 "Menu [OUT]", the tablet
   and phone variants a-207 / a-208 / a-209, and the link hovers a-199 / a-202 / a-200 / a-201; clone + numbers:
   ~/Dev/damaria-recreate/PARTS.md).

   <div class="tam">                                  frame: clips the swung page, locks to one screen while open
     <nav class="tam-menu"> ... <button class="tam-close"> ...
       <div class="tam-links">
         <a class="tam-link"><span class="tam-mark">*</span><span class="tam-text">Home</span><span class="tam-veil"></span></a> ...
     </nav>
     <div class="tam-page"> ... <button class="tam-open"> ... <div class="tam-shade"></div></div>
   </div>

   The menu is a card lying UNDER the page. Opening it pushes the whole page aside like a sheet of paper on a desk:
   18rem right and turned 5deg, 500ms on cubic-bezier(.56,.47,0,1.21) (slow start, a 21% overshoot past the end, then
   back), while a grey wash (#3c3c3c at 20%) fades over the page (500ms ease). The pivot sits 200rem BELOW the page
   (transform-origin 50% 200rem), so the 5deg turn also slides the top edge another ~280px right and lifts the page
   along an arc: the top of the menu card is uncovered far more than its bottom. Closing is plainer: 400ms ease back,
   wash out over 500ms, then the menu is hidden.
   Desktop links rest a step to the left with their ornament turned -60deg and clipped away; pointing at the list lays
   a thin paper veil (#f9f8f2 at 30%) over every link (250ms ease) except the one under the pointer, whose ornament
   swings in (x -2rem -> 0 over 400ms ease, -60deg -> 0 over 300ms ease-out) while its word steps 1rem right 80ms later
   on an overshooting curve (400ms, cubic-bezier(0,.007,.333,1.375)). Out: back over 300ms. Below 992px no hovers. */
.tam {
  --tam-shift: 18rem;                                  /* how far the page moves right (source: 18rem desktop) */
  --tam-tilt: 5deg;                                    /* page rotation when open */
  --tam-origin: 50% 200rem;                            /* pivot far below the page = an arc */
  --tam-open: 500ms;
  --tam-open-ease: cubic-bezier(.56, .47, 0, 1.21);
  --tam-close: 400ms;
  --tam-close-ease: ease;
  --tam-shade: rgba(60, 60, 60, .2);                   /* wash over the page while open */
  --tam-shade-dur: 500ms;
  position: relative;
  overflow: hidden;                                    /* the swung page is clipped by the frame */
}
@media (max-width: 991px) { .tam { --tam-shift: 40vw; } }
@media (max-width: 767px) { .tam { --tam-shift: 50vw; } }
@media (max-width: 479px) { .tam { --tam-shift: 35vw; } }
.tam.is-locked { height: 100svh; }                     /* source: .main height 100svh while open */

.tam-menu { position: absolute; z-index: 1; top: 0; left: 0; display: none; }
.tam.is-menu-shown .tam-menu { display: block; }

.tam-page {
  position: relative; z-index: 2;
  transform-origin: var(--tam-origin);
  transition: translate var(--tam-close) var(--tam-close-ease), rotate var(--tam-close) var(--tam-close-ease);
}
.tam.is-open .tam-page {
  translate: var(--tam-shift) 0; rotate: var(--tam-tilt);
  transition: translate var(--tam-open) var(--tam-open-ease), rotate var(--tam-open) var(--tam-open-ease);
}
.tam-shade {
  position: absolute; inset: 0; z-index: 500; background: var(--tam-shade);
  opacity: 0; display: none; transition: opacity var(--tam-shade-dur) ease;
}
.tam.is-menu-shown .tam-shade { display: block; }
.tam.is-open .tam-shade { opacity: 1; cursor: pointer; }

/* links */
.tam-links { display: flex; flex-direction: column; align-items: flex-start; }
.tam-link {
  --tam-veil: rgba(249, 248, 242, .3);
  --tam-step: -1rem;          /* word rests this far left */
  --tam-mark-x: -2rem;        /* ornament rests this far left (clipped) */
  --tam-mark-turn: -60deg;
  position: relative; display: inline-flex; align-items: center; gap: .5rem; overflow: hidden;
  color: inherit; text-decoration: none;
}
.tam-mark { flex: none; width: 1.25rem; display: grid; place-items: center; }
.tam-veil { position: absolute; inset: 0; z-index: 5; background: var(--tam-veil); pointer-events: none; opacity: 0; transition: opacity 250ms ease; }
@media (min-width: 992px) {
  .tam-text { display: inline-block; translate: var(--tam-step) 0; transition: translate 300ms cubic-bezier(0, 0, .58, 1); }
  .tam-mark { translate: var(--tam-mark-x) 0; rotate: var(--tam-mark-turn); transition: translate 300ms ease, rotate 300ms cubic-bezier(0, 0, .58, 1); }
  .tam-links:hover .tam-veil, .tam-links.is-pointing .tam-veil { opacity: 1; }
  .tam-links .tam-link:hover .tam-veil, .tam-links .tam-link.is-on .tam-veil { opacity: 0; }
  .tam-link:hover .tam-text, .tam-link.is-on .tam-text { translate: none; transition: translate 400ms cubic-bezier(0, .007, .333, 1.375) 80ms; }
  .tam-link:hover .tam-mark, .tam-link.is-on .tam-mark { translate: none; rotate: none; transition: translate 400ms ease, rotate 300ms cubic-bezier(0, 0, .58, 1); }
}
@media (max-width: 991px) { .tam-mark { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .tam-page, .tam.is-open .tam-page, .tam-shade, .tam-text, .tam-mark, .tam-veil { transition-duration: 0s !important; transition-delay: 0s !important; }
}