/* ============================================================
   BERTHÉ — SHARED SCROLL ANIMATIONS
   Restrained, institutional motion: elements settle into place
   as they enter the viewport, groups cascade gently.
   Linked AFTER each design's own CSS so these rules win.
   Driven by main.js (adds `.in`, sets --rd delay, data-anim).
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .7s cubic-bezier(.16, .84, .44, 1),
    transform .85s cubic-bezier(.16, .84, .44, 1),
    clip-path .9s cubic-bezier(.16, .84, .44, 1),
    filter .8s ease;
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}

.reveal[data-anim="up"]      { transform: translateY(34px); }
.reveal[data-anim="down"]    { transform: translateY(-34px); }
.reveal[data-anim="left"]    { transform: translateX(-46px); }
.reveal[data-anim="right"]   { transform: translateX(46px); }
.reveal[data-anim="zoom"]    { transform: scale(.9); }
.reveal[data-anim="zoom-up"] { transform: translateY(34px) scale(.95); }
.reveal[data-anim="blur"]    { transform: translateY(20px); filter: blur(12px); }
.reveal[data-anim="pop"]     { transform: scale(.86); transition: opacity .45s ease, transform .6s cubic-bezier(.34,1.4,.64,1); transition-delay: var(--rd, 0ms); }

/* clip-path wipes — used for headlines and photography */
.reveal[data-anim="clip-up"]    { clip-path: inset(100% 0 0 0); transform: translateY(16px); }
.reveal[data-anim="clip-right"] { clip-path: inset(0 100% 0 0); }
.reveal[data-anim^="clip"].in   { clip-path: inset(0 0 0 0); }

.reveal.in { opacity: 1; transform: none; filter: none; }

/* soft sheen sweeping across primary buttons */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -120%;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg);
  pointer-events: none; z-index: 1;
  animation: berthe-sheen 6.5s ease-in-out infinite;
}
@keyframes berthe-sheen {
  0%   { left: -120%; }
  55%  { left: 135%; }
  100% { left: 135%; }
}

/* ---- accessibility: honour reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 0 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: opacity .5s ease !important;
    transition-delay: var(--rd, 0ms) !important;
  }
  .reveal.in { opacity: 1 !important; }
  .btn--primary::after { animation: none !important; display: none; }
  html { scroll-behavior: auto !important; }
}