/* ============================================================
   MAGMA MOTION — shared luxury motion & UI layer
   Loaded on: index, ophir-creek, clear-creek, eagle-creek
   Depends on tokens defined in each page's :root
   ============================================================ */

/* ---------- safety: content becomes visible even if JS fails ---------- */
.mm-motion:not(.mm-js-ok) [data-reveal],
.mm-motion:not(.mm-js-ok) [data-reveal-group] > *,
.mm-motion:not(.mm-js-ok) [data-hero]{
  opacity:0;
  animation:mm-safety .01s linear 2.8s forwards;
}
.mm-motion:not(.mm-js-ok) .mm-line-in{
  animation:mm-safety .01s linear 2.8s forwards;
}
@keyframes mm-safety{to{opacity:1;transform:none;filter:none}}

/* ---------- hero masked lines ---------- */
.mm-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mm-line-in{display:block;will-change:transform}
.mm-motion .mm-line-in{transform:translateY(112%)}
.mm-motion.mm-hero-done .mm-line-in,
html:not(.mm-motion) .mm-line-in{transform:none}

/* ---------- film grain + vignette ---------- */
.mm-grain{position:fixed;inset:-100px;z-index:9990;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:mm-grain 9s steps(9) infinite}
@keyframes mm-grain{
  0%,100%{transform:translate(0,0)}11%{transform:translate(-24px,14px)}22%{transform:translate(18px,-30px)}
  33%{transform:translate(-40px,-8px)}44%{transform:translate(30px,24px)}55%{transform:translate(-14px,38px)}
  66%{transform:translate(38px,-14px)}77%{transform:translate(-30px,-28px)}88%{transform:translate(12px,20px)}}
.mm-vignette{position:fixed;inset:0;z-index:9989;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 58%,rgba(0,0,0,.32) 100%)}

/* ---------- nav behaviour ---------- */
nav{transition:transform .5s cubic-bezier(.22,1,.36,1),background .4s,border-color .4s}
nav.mm-nav-hidden{transform:translateY(-100%)}
nav.mm-nav-top{background:transparent;border-bottom-color:transparent;backdrop-filter:none}

/* ---------- hamburger ---------- */
.mm-burger{display:none;margin-left:8px;width:40px;height:40px;border:1px solid var(--line);
  background:transparent;cursor:pointer;position:relative;z-index:210;flex:0 0 auto}
.mm-burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s,background .3s}
.mm-burger span:nth-child(1){top:14px}
.mm-burger span:nth-child(2){top:20px}
.mm-burger span:nth-child(3){top:26px}
.mm-menu-open .mm-burger span{background:var(--head)}
.mm-menu-open .mm-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-menu-open .mm-burger span:nth-child(2){opacity:0}
.mm-menu-open .mm-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:680px){.mm-burger{display:block}}

/* ---------- mobile menu overlay ---------- */
.mm-menu{position:fixed;inset:0;z-index:200;background:rgba(5,5,6,.97);backdrop-filter:blur(14px);
  display:flex;flex-direction:column;justify-content:center;padding:0 34px;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.mm-menu-open .mm-menu{opacity:1;visibility:visible;transition:opacity .45s ease}
.mm-menu .mm-menu-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.mm-menu a.mm-menu-link{display:block;font-family:var(--serif);font-size:44px;line-height:1.25;
  color:var(--head);padding:6px 0;border-bottom:1px solid var(--line2)}
.mm-menu a.mm-menu-link em{color:var(--gold-l);font-style:italic}
.mm-menu .mm-menu-foot{margin-top:34px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--dim);text-transform:uppercase;line-height:2}
.mm-menu .mm-menu-foot a{color:var(--ink2s)}
.mm-menu-open .mm-menu a.mm-menu-link{animation:mm-menu-in .7s cubic-bezier(.22,1,.36,1) both}
.mm-menu-open .mm-menu a.mm-menu-link:nth-child(2){animation-delay:.06s}
.mm-menu-open .mm-menu a.mm-menu-link:nth-child(3){animation-delay:.12s}
.mm-menu-open .mm-menu a.mm-menu-link:nth-child(4){animation-delay:.18s}
.mm-menu-open .mm-menu a.mm-menu-link:nth-child(5){animation-delay:.24s}
@keyframes mm-menu-in{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.mm-menu-open{overflow:hidden}

/* ---------- buttons: sheen sweep ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:44%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);transition:left .6s cubic-bezier(.22,1,.36,1)}
.btn:hover::after{left:126%}
.nav-cta,.btn-ghost{position:relative}

/* ---------- link underline draw (nav) ---------- */
.nav-links a{position:relative;padding-bottom:3px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- card refinement ---------- */
.ccard{transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .5s}
.ccard .ph img{transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .6s}
.ccard:hover .ph img{transform:scale(1.06)}
.ccard .view{transition:color .3s}
.ccard .view::after{content:none}
.featured .img img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.featured .img:hover img{transform:scale(1.045)}

/* ---------- scroll progress hairline ---------- */
.mm-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9995;pointer-events:none}
.mm-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--gold-l));
  transform:scaleX(0);transform-origin:left}

/* ---------- gallery lightbox ---------- */
.mm-lb{position:fixed;inset:0;z-index:400;background:rgba(4,4,5,.94);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility 0s .4s}
.mm-lb.open{opacity:1;visibility:visible;transition:opacity .4s ease}
.mm-lb img{max-width:88vw;max-height:82vh;object-fit:contain;border:1px solid var(--line);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9);transform:scale(.96);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.mm-lb.open img{transform:scale(1)}
.mm-lb .mm-lb-cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2s)}
.mm-lb button{position:absolute;background:none;border:1px solid var(--line);color:var(--ink);
  width:46px;height:46px;cursor:pointer;font-size:17px;font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;transition:border-color .3s,color .3s;border-radius:50%}
.mm-lb button:hover{border-color:var(--gold);color:var(--gold-l)}
.mm-lb .mm-lb-x{top:22px;right:26px}
.mm-lb .mm-lb-prev{left:26px;top:50%;margin-top:-23px}
.mm-lb .mm-lb-next{right:26px;top:50%;margin-top:-23px}
@media(max-width:680px){.mm-lb .mm-lb-prev{left:10px}.mm-lb .mm-lb-next{right:10px}}
.gal img{cursor:zoom-in}

/* ---------- sticky inquire bar (listing pages) ---------- */
.mm-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:rgba(8,8,10,.88);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(102%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.mm-bar.show{transform:none}
.mm-bar .mm-bar-in{max-width:1280px;margin:0 auto;padding:12px 32px;display:flex;align-items:center;gap:20px}
.mm-bar .mm-bar-name{font-family:var(--serif);font-size:19px;color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-bar .mm-bar-price{font-family:var(--serif);font-size:19px;color:var(--gold-l);margin-left:auto;white-space:nowrap}
.mm-bar .btn{padding:11px 22px;font-size:10px;flex:0 0 auto}
@media(max-width:680px){.mm-bar .mm-bar-in{padding:10px 16px;gap:12px}.mm-bar .mm-bar-name{font-size:15px}.mm-bar .mm-bar-price{font-size:15px}}

/* ---------- Magma Score gauge ---------- */
.mm-gauge{position:relative;width:64px;height:64px;flex:0 0 auto}
.mm-gauge svg{transform:rotate(-90deg);display:block}
.mm-gauge .bg{fill:none;stroke:var(--line);stroke-width:3}
.mm-gauge .fg{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(232,69,28,.5))}
.mm-gauge .mm-gauge-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:22px;color:var(--gold-l)}

/* ---------- luxury glow: main boxes breathe slowly ---------- */
.docsec .panel,
.featured,
.viewer-frame,
.upside,
.doc-room,
.rgrid .rcard,
.videofeat .player,
table.inv{
  animation:mm-panel-glow 6s ease-in-out infinite;
}
.docsec .panel + .panel{animation-delay:-3s}
.rgrid .rcard:nth-child(2){animation-delay:-2s}
.rgrid .rcard:nth-child(3){animation-delay:-4s}
table.inv{animation-delay:-1.5s}
.viewer-frame{animation-delay:-2.5s}
.upside{animation-delay:-1s}
.doc-room{animation-delay:-3.5s}
.videofeat .player{animation-delay:-2s}
@keyframes mm-panel-glow{
  0%,100%{box-shadow:0 0 16px -8px rgba(232,69,28,.10),0 0 40px -20px rgba(232,69,28,.07);
    border-color:rgba(232,69,28,.16)}
  50%{box-shadow:0 0 22px -6px rgba(232,69,28,.22),0 0 60px -18px rgba(232,69,28,.15);
    border-color:rgba(232,69,28,.30)}
}
/* available (non-sold) cards: quiet static halo, hover lift unchanged */
.grid .ccard:not(.sold):not(:hover){
  border-color:rgba(232,69,28,.15);
  box-shadow:0 0 18px -8px rgba(232,69,28,.10),0 0 44px -20px rgba(232,69,28,.07);
}
/* lighter load on small screens */
@media(max-width:680px){
  table.inv,.videofeat .player,.rgrid .rcard{animation:none}
}

/* ---------- hero atmosphere canvas ---------- */
.mm-embers{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen}

/* ---------- preloader ---------- */
.mm-loader{position:fixed;inset:0;z-index:9999;background:#050506;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;transition:opacity .6s ease,visibility 0s .6s}
.mm-loader.done{opacity:0;visibility:hidden}
.mm-loader .mm-loader-logo{font-family:var(--sans);font-weight:600;letter-spacing:.3em;font-size:15px;color:var(--head)}
.mm-loader .mm-loader-logo .m{color:var(--gold)}
.mm-loader .mm-loader-line{width:120px;height:1px;background:var(--line);position:relative;overflow:hidden}
.mm-loader .mm-loader-line i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.mm-loader .mm-loader-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
html:not(.mm-loading) .mm-loader{display:none}

/* ---------- cross-document view transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mm-vt-out .38s ease both}
::view-transition-new(root){animation:mm-vt-in .5s ease both}
@keyframes mm-vt-out{to{opacity:0}}
@keyframes mm-vt-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- reduced motion: kill everything ---------- */
@media(prefers-reduced-motion:reduce){
  .mm-grain{animation:none}
  .btn::after{display:none}
  .docsec .panel,.featured,.viewer-frame,.upside,.doc-room,.rgrid .rcard,
  .videofeat .player,table.inv{animation:none;box-shadow:0 0 18px -8px rgba(232,69,28,.12)}
  *{scroll-behavior:auto!important}
}

/* ---------- a11y ---------- */
a:focus-visible,button:focus-visible,.chip:focus-visible,.tab:focus-visible{
  outline:1.5px solid var(--gold);outline-offset:3px}