/* ============================================================
   FLAGSHIP motion + WebGL layer (loaded after styles.css)
   All effects degrade gracefully and respect reduced-motion.
   ============================================================ */

/* Smooth cross-page morphs (Chromium + Safari 18.2+; others just navigate) */
@view-transition { navigation: auto; }
header.nav { view-transition-name: site-nav; }
footer { view-transition-name: site-footer; }
::view-transition-old(root){ animation:vt-out .35s ease both; }
::view-transition-new(root){ animation:vt-in .45s ease both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(12px); } }

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;background:linear-gradient(90deg,var(--brass),var(--brass-light));z-index:200;pointer-events:none;box-shadow:0 0 12px rgba(220,180,106,.5)}

/* Fine film grain for an editorial finish */
body::after{content:"";position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- FLAGSHIP HERO (shader + particles) ---------- */
.hero{position:relative;isolation:isolate;background:radial-gradient(125% 120% at 72% 18%, #5a3c1a 0%, #341f10 38%, #16110c 100%);background-color:#16110c}
.hero .fx{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
.hero #fx-shader{z-index:0}
.hero #fx-particles{z-index:1}
.hero .hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,11,.55) 0%,rgba(20,16,11,.32) 38%,rgba(20,16,11,.86) 100%)}
.hero .hero-content{position:relative;z-index:3}

/* draw-on logo flourish in the hero */
.hero-flourish{display:inline-block;margin-bottom:1rem}
.hero-flourish svg{width:48px;height:48px;display:block}
.draw path,.draw circle{stroke-dasharray:170;stroke-dashoffset:170;animation:draw 1.8s ease .15s forwards}
.draw circle:nth-of-type(1){animation-delay:.15s}
.draw circle:nth-of-type(2){animation-delay:.3s}
@keyframes draw{to{stroke-dashoffset:0}}

/* animated gold sheen on the hero accent */
.hero h1 em.sheen{background:linear-gradient(100deg,var(--brass-light) 10%,#fff7e8 45%,var(--brass) 62%,var(--brass-light) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-220% 0}}

/* ---------- 3D TILT SERVICE CARDS ---------- */
.svc-grid{perspective:1100px}
.svc-card{transform-style:preserve-3d;will-change:transform;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.svc-card .ph{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.svc-card:hover .ph{transform:scale(1.06)}
.svc-card .bd,.svc-card h3{transform:translateZ(28px)}
.svc-card .price{transform:translateZ(40px)}

/* magnetic buttons get a smooth return */
.hero .btn{will-change:transform;transition:transform .25s cubic-bezier(.2,.7,.2,1),background .3s ease,border-color .3s ease}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
  .hero h1 em.sheen{animation:none;background-position:0 0}
  .draw path,.draw circle{animation:none;stroke-dashoffset:0}
  .scroll-progress{display:none}
  .svc-card,.svc-card .ph,.hero .btn{transition:none !important}
  body::after{display:none}
}