/* AlMaha — motion
   Scroll-driven reveals, View Transitions, slab→hero morph, hover micro-motion.
   All motion is wrapped in @supports / @media (prefers-reduced-motion) so the
   site reads correctly without any of it. */

/* Cross-document View Transitions — Chrome 126+, Safari 18+; Firefox no-op */
@view-transition { navigation: auto; }

/* Default morph timing for the slab→hero exchange */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(.6,0,.2,1);
}
::view-transition-group(*) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(.6,0,.2,1);
}

/* Hover micro-motion — declared once, reused */
.hover-lift  { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

.hover-tint { transition: color var(--dur-fast) var(--ease-out); }
.hover-tint:hover { color: var(--gold); }

/* Underline-grow link */
.link-grow {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-grow::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--dur) var(--ease-out);
}
.link-grow:hover::after { transform: scaleX(1); }

/* Scroll-driven reveal — element fades + lifts as it enters the viewport */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
  .reveal-slow {
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes reveal-fade {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Scroll-driven vein break — hairline strokes itself as it crosses the screen */
@supports (animation-timeline: view()) {
  .vein-line.reveal-stroke {
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--p,0%), transparent var(--p,0%));
    animation: vein-stroke linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
  @keyframes vein-stroke {
    from { --p: 0%; }
    to   { --p: 100%; }
  }
}

/* Hero-cine — three stacked pictures crossfade across the document scroll.
   At scroll=0 the first picture must be fully visible; the others stack
   under it and fade in via scroll progress. */
.hero-cine .hero-pic { opacity: 1; }
.hero-cine .hero-pic:nth-of-type(2),
.hero-cine .hero-pic:nth-of-type(3) { opacity: 0; }

@supports (animation-timeline: scroll()) {
  .hero-cine .hero-pic:nth-of-type(1) {
    animation: hero-fadeout linear both;
    animation-timeline: scroll(root);
    animation-range: 30vh 90vh;
  }
  .hero-cine .hero-pic:nth-of-type(2) {
    animation: hero-fadein-out linear both;
    animation-timeline: scroll(root);
    animation-range: 60vh 180vh;
  }
  .hero-cine .hero-pic:nth-of-type(3) {
    animation: hero-fadein linear both;
    animation-timeline: scroll(root);
    animation-range: 150vh 260vh;
  }
  @keyframes hero-fadeout {
    from { opacity: 1; transform: scale(1.0); }
    to   { opacity: 0; transform: scale(1.03); }
  }
  @keyframes hero-fadein {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1.0); }
  }
  @keyframes hero-fadein-out {
    0%   { opacity: 0; transform: scale(1.04); }
    40%  { opacity: 1; transform: scale(1.0); }
    60%  { opacity: 1; transform: scale(1.0); }
    100% { opacity: 0; transform: scale(0.98); }
  }
}

/* Hero ISO callouts — slow drift in */
@supports (animation-timeline: view()) {
  .callout-iso {
    opacity: 0;
    animation: callout-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
  @keyframes callout-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Subtle slow drift on a single static hero image (used when JS-free fallback wanted) */
@media (prefers-reduced-motion: no-preference) {
  .drift {
    animation: drift 28s var(--ease-io) infinite alternate;
  }
  @keyframes drift {
    from { transform: scale(1.0) translate3d(0, 0, 0); }
    to   { transform: scale(1.05) translate3d(-1%, -1%, 0); }
  }
}

/* Honour reduce-motion — tokens.css already nukes durations globally; here we
   also disable scroll-driven animations explicitly. */
@media (prefers-reduced-motion: reduce) {
  .hero-cine .hero-pic { animation: none !important; opacity: 1 !important; }
  .hero-cine .hero-pic:not(:first-of-type) { opacity: 0 !important; }
  .reveal, .reveal-slow, .callout-iso, .vein-line.reveal-stroke { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ThumbHash blur-up: the wrapper carries a ~150-byte data: URL placeholder
   computed server-side from the image's thumbHash field; the real <img>
   sits on top transparent and fades in once loaded. */
.blur-up { background-size: cover; background-position: center; background-repeat: no-repeat; }
.blur-up img { opacity: 0; transition: opacity .35s ease-out; }
.blur-up.loaded img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .blur-up img { transition: none; }
}