/* ============================================================
   JDH Portraits — Animation helpers
   GSAP drives the actual timelines in js/main.js; these classes
   define the CSS end-states so content is never invisible
   without JS (progressive enhancement).
   ============================================================ */

[data-reveal-group]{ }

.js [data-reveal]{
  opacity: 0;
  transform: translateY(28px);
}
.js [data-reveal="left"]{ transform: translateX(-56px); }
.js [data-reveal="right"]{ transform: translateX(56px); }

.reduce-motion [data-reveal]{
  opacity: 1 !important;
  transform: none !important;
}

/* Loader / shutter-open page mask */
.shutter{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.shutter svg{ width: 64px; height: 64px; color: var(--rust); }
.shutter path{ transform-origin: 50% 50%; }

.cursor-dot{
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  pointer-events: none;
  z-index: 400;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .25s var(--ease), width .25s var(--ease), height .25s var(--ease);
  display: none;
}
@media (hover: hover) and (pointer: fine){
  .cursor-dot{ display: block; }
}
.cursor-dot.is-active{ opacity: 1; }
.cursor-dot.is-open{ width: 64px; height: 64px; }