/* Maa Vero's Efie Shito – motion layer styles
   Only active when <html> has .has-motion (set in each page's <head>, skipped for reduced-motion users). */

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Cover the page before JS paints the preloader / curtain ---------- */
html.is-entering body::after,
html.is-preloading body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; background: var(--red-deep);
}

/* ---------- Scroll reveals (GSAP takes over from the CSS .reveal fallback) ---------- */
html.has-motion .reveal { opacity: 1; transform: none; transition: none; visibility: hidden; }
.mv-char, .mv-word { display: inline-block; will-change: transform, opacity; }
.mv-line { display: block; }

/* buttons: GSAP drives the magnetic motion */
html.has-motion .btn { transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
html.has-motion .btn:hover { transform: none; }
html.has-motion .seal, html.has-motion .seal .inner { animation: none; }

/* ---------- Header: transparent at the top, then tinted to match the section beneath ---------- */
html.has-motion .site-header { transition: background .5s ease, color .5s ease, border-color .5s ease; }
html.has-motion .site-header.t-dark { color: var(--cream); background: rgba(38,14,10,.55); border-color: rgba(247,224,166,.12); }
html.has-motion .site-header.t-light { color: var(--ink); background: rgba(255,250,240,.8); border-color: rgba(231,214,184,.7); }
html.has-motion .site-header:not(.scrolled) { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (min-width: 861px) {
  html.has-motion .site-header.t-dark .nav a[aria-current="page"] { color: var(--gold); }
  html.has-motion .site-header.t-light .nav a[aria-current="page"] { color: var(--red); }
  html.has-motion .site-header.t-dark .nav a.nav-order,
  html.has-motion .site-header.t-dark .nav a.nav-order[aria-current="page"] { background: var(--gold); color: var(--ink); }
  html.has-motion .site-header.t-light .nav a.nav-order,
  html.has-motion .site-header.t-light .nav a.nav-order[aria-current="page"] { background: var(--red); color: var(--cream); }
}
html.has-motion .site-header.menu-open { background: var(--paper); color: var(--ink); }

/* spinning text ring around the header logo */
.brand { position: relative; }
html.has-motion .brand { gap: 18px; }
.brand-ring { position: absolute; left: -9px; top: 50%; width: 66px; height: 66px; margin-top: -33px; pointer-events: none; }
.brand-ring.css-spin, .seal svg.css-spin { animation: mv-spin 24s linear infinite; }
@keyframes mv-spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  html.has-motion .site-header.t-dark, html.has-motion .site-header.t-light { backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.has-motion .site-header.t-dark { background: rgba(38,14,10,.96); }
  html.has-motion .site-header.t-light { background: rgba(255,250,240,.97); }
}
.brand-ring text { fill: currentColor; font: 500 9.6px var(--sans); letter-spacing: 2.6px; text-transform: uppercase; }

/* nav links: letters roll up on hover */
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; line-height: 1.2; }
.roll > span { display: block; white-space: nowrap; }
.roll .roll-b { position: absolute; left: 0; top: 100%; }
.roll > span > span { display: inline-block; transition: transform .55s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 16ms); }
a:hover > .roll > span > span, a:focus-visible > .roll > span > span { transform: translateY(-100%); }

/* ---------- Scroll progress (desktop) ---------- */
.mv-progress {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 45;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  mix-blend-mode: difference; color: #fff; font: 500 11px var(--sans); letter-spacing: .12em; pointer-events: none;
}
.mv-progress-track { width: 1.5px; height: 110px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.mv-progress-track i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; transform-origin: top; transform: scaleY(0); }
@media (max-width: 899px) { .mv-progress { display: none; } }

/* ---------- Preloader (home page) ---------- */
.mv-pre { position: fixed; inset: 0; z-index: 9999; color: var(--cream); pointer-events: all; }
.mv-pre-bg { position: absolute; inset: 0; background: var(--red-deep); }
.mv-pre-bg::before { content: ""; position: absolute; inset: 0; background: url("img/pattern-800.webp") center / 900px auto repeat; opacity: .045; }
.mv-pre-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mv-pre-outline path { fill: none; stroke: rgba(247,224,166,.28); stroke-width: 1; }
.mv-pre-frame { position: absolute; inset: 14px; border: 1px solid rgba(247,224,166,.16); border-radius: 18px; pointer-events: none; }
.mv-pre-content { position: absolute; inset: 0; display: grid; place-items: center; }
.mv-pre-logo { position: absolute; top: 34px; left: 50%; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%; background: var(--paper); padding: 3px; }
.mv-pre-word {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: -.55em; text-align: center;
  font-family: var(--serif); font-size: 36vw; line-height: 1.1; white-space: nowrap; color: var(--cream); opacity: 0; pointer-events: none;
}
.mv-pre-title { position: relative; text-align: center; font-family: var(--serif); line-height: .95; perspective: 800px; }
.mv-pre-title > span { display: block; }
.mv-pre-title .t1 { font-size: clamp(36px, 4.6vw, 68px); }
.mv-pre-title .t2 { font-size: clamp(22px, 2.6vw, 38px); color: var(--gold); margin-top: 8px; }
.mv-pre-side { position: absolute; top: 50%; margin-top: -.6em; font-size: 13px; letter-spacing: .6em; text-transform: uppercase; }
.mv-pre-side.l { left: 9vw; }
.mv-pre-side.r { right: 9vw; }
.mv-pre-bottom { position: absolute; bottom: 38px; left: 0; right: 0; text-align: center; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; }
.mv-pre-track { width: 1.5px; height: 56px; margin: 0 auto 14px; background: rgba(247,224,166,.2); overflow: hidden; }
.mv-pre-track i { display: block; width: 100%; height: 100%; background: var(--gold); transform: translateY(-100%); }
@media (max-width: 760px) {
  .mv-pre-side { display: none; }
  .mv-pre-word { font-size: 48vw; }
}

/* ---------- Page-transition curtain ---------- */
.mv-curtain { position: fixed; inset: 0; z-index: 9999; background: var(--red-deep); display: grid; place-items: center; pointer-events: all; }
.mv-curtain::before { content: ""; position: absolute; inset: 0; background: url("img/pattern-800.webp") center / 900px auto repeat; opacity: .045; }
.mv-curtain img { position: relative; width: 88px; height: 88px; border-radius: 50%; background: var(--paper); padding: 5px; }