/* ============================================================
   Salon Jannah — Motion layer (motion.css)
   Alle bewegingsstijlen. Actief onder .has-motion (gezet door
   een inline script), zodat zonder JS niets verborgen raakt.
   ============================================================ */
:root{ --ez: cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:250;
  background:linear-gradient(90deg, var(--brass,#9e7c4a), #c9a06a);
  pointer-events:none;
}

/* ---------- Smooth page transitions ---------- */
.page-fade{
  position:fixed; inset:0; z-index:400; background:#ffffff;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ez);
}
.page-fade.show{ opacity:1; pointer-events:all; }

/* ============================================================
   1 & 6 — HERO REVEAL + LUXE TYPOGRAFIE (CSS load-animatie)
   ============================================================ */
@keyframes sjRise{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }
@keyframes sjImg{ from{opacity:0; transform:scale(1.06);} to{opacity:1; transform:scale(1);} }
@keyframes sjLuxe{
  0%{ opacity:0; transform:translateY(20px); letter-spacing:.12em; filter:blur(6px); }
  60%{ opacity:1; filter:blur(0); }
  100%{ opacity:1; transform:none; letter-spacing:-0.03em; filter:blur(0); }
}

/* Homepage hero */
.has-motion .hero-img{ animation:sjImg 1.25s var(--ez) both; }
.has-motion .hero-inner .eyebrow,
.has-motion .hero-inner .lead,
.has-motion .hero-inner .hero-actions{ opacity:0; animation:sjRise .9s var(--ez) forwards; }
.has-motion .hero-inner .eyebrow{ animation-delay:.22s; }
.has-motion .hero-inner .lead{ animation-delay:.54s; }
.has-motion .hero-inner .hero-actions{ animation-delay:.68s; }
.has-motion .hero-inner h1{ opacity:0; animation:sjLuxe 1.1s var(--ez) .38s forwards; }

/* Subpagina page-hero */
.has-motion .page-hero .eyebrow,
.has-motion .page-hero .lead,
.has-motion .page-hero .hero-actions{ opacity:0; animation:sjRise .9s var(--ez) forwards; }
.has-motion .page-hero .eyebrow{ animation-delay:.15s; }
.has-motion .page-hero .lead{ animation-delay:.46s; }
.has-motion .page-hero .hero-actions{ animation-delay:.6s; }
.has-motion .page-hero h1{ opacity:0; animation:sjLuxe 1.1s var(--ez) .28s forwards; }

/* ============================================================
   2 — SCROLL STORYTELLING (media bands revealen op scroll)
   .mv-init wordt door JS gezet; zonder JS blijft alles zichtbaar.
   ============================================================ */
.has-motion .mv-init{ opacity:0; transform:translateY(30px);
  transition:opacity .85s var(--ez), transform .85s var(--ez); }
.has-motion .mv-init.in-view{ opacity:1; transform:none; }

/* ============================================================
   3 — MICRO-INTERACTIONS
   ============================================================ */
/* Knoppen: subtiele lift */
.has-motion .btn{ transition:transform .25s var(--ez), box-shadow .25s var(--ez),
  background .25s, color .25s, border-color .25s; }
.has-motion .btn:hover{ transform:translateY(-2px); }
.has-motion .btn-primary:hover{ box-shadow:0 10px 26px rgba(74,51,39,.24); }

/* Nav-links: onderlijn die inschuift */
.has-motion .nav-links a:not(.nav-cta){ position:relative; }
.has-motion .nav-links a:not(.nav-cta)::after{ content:""; position:absolute;
  left:11px; right:11px; bottom:4px; height:1px; background:var(--brass,#9e7c4a);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ez); }
.has-motion .nav-links a:not(.nav-cta):hover::after{ transform:scaleX(1); }

/* Kaarten: lift + zachte schaduw */
.has-motion .treat, .has-motion .feature-card, .has-motion .info-card,
.has-motion .booking-card{ transition:transform .3s var(--ez), box-shadow .3s var(--ez); }
.has-motion .treat:hover, .has-motion .feature-card:hover,
.has-motion .info-card:hover, .has-motion .booking-card:hover{
  transform:translateY(-4px); box-shadow:0 16px 42px rgba(29,29,31,.09); }

/* Prijsregels: accent bij hover */
.has-motion .acc-row{ transition:background .2s var(--ez), padding-left .2s var(--ez); border-radius:8px; }
.has-motion .acc-row:hover{ background:var(--bg-stone,#f5f5f7); padding-left:8px; }

/* ============================================================
   4 & 5 — 3D / PRODUCT TILT (op de foto's in de media-bands)
   ============================================================ */
.has-motion .media-split .ms-media{ perspective:1000px; }
.has-motion .media-split .ms-media img{
  transition:transform .3s var(--ez), box-shadow .3s var(--ez); will-change:transform; }
.has-motion .media-split .ms-media img:hover{ box-shadow:0 26px 64px rgba(29,29,31,.18); }

/* ============================================================
   Respecteer prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .has-motion .hero-img,
  .has-motion .hero-inner .eyebrow, .has-motion .hero-inner .lead,
  .has-motion .hero-inner .hero-actions, .has-motion .hero-inner h1,
  .has-motion .page-hero .eyebrow, .has-motion .page-hero .lead,
  .has-motion .page-hero .hero-actions, .has-motion .page-hero h1,
  .has-motion .mv-init{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
  .scroll-progress, .page-fade{ display:none !important; }
  .has-motion .btn:hover, .has-motion .treat:hover, .has-motion .feature-card:hover,
  .has-motion .info-card:hover, .has-motion .booking-card:hover,
  .has-motion .media-split .ms-media img{ transform:none !important; }
}