/* =========================================================
   Alherin visual universe — the logo-derived field and the hero's 3D mark.
   Everything here is decoration: aria-hidden, pointer-events none, and removed or frozen on phones / reduced motion.
   Geometry comes from the logo: its facets run at ~39° and ~58°, its corners are cut (diamonds, never circles).
   ========================================================= */

/* ---------- generative field (canvas injected by scripts/brand-field.js) ---------- */
.brand-field{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
  -webkit-mask-image: radial-gradient(125% 115% at 78% 14%, #000 16%, rgba(0,0,0,.4) 54%, transparent 90%);
          mask-image: radial-gradient(125% 115% at 78% 14%, #000 16%, rgba(0,0,0,.4) 54%, transparent 90%);
  opacity: 0; transition: opacity 1.4s var(--ease-out);
}
.brand-field.is-ready{ opacity: 1; }
.cta-band .brand-field{
  -webkit-mask-image: radial-gradient(90% 120% at 50% 100%, #000 10%, rgba(0,0,0,.35) 60%, transparent 92%);
          mask-image: radial-gradient(90% 120% at 50% 100%, #000 10%, rgba(0,0,0,.35) 60%, transparent 92%);
}
/* the diagonal lattice replaces the old square grids (only once the canvas exists, so no-JS keeps them) */
.hero.has-brand-field .hero-grid{ background-image: none; }
.page-header.has-brand-field::before{ display:none; }
.cta-band.has-brand-field::before{ background: radial-gradient(60% 90% at 50% 110%, rgba(255,92,0,.32), transparent 70%); }
.page-header.has-brand-field > .container{ z-index: 1; }

/* ---------- hero 3D mark ---------- */
.hero-mark{ display:none; }
.hm-defs{ position:absolute; width:0; height:0; }
@media (min-width: 1100px) and (min-height: 600px){
  .hero-home .hero-content{ max-width: min(840px, 60%); margin-left: max(0px, calc((100vw - 1280px) / 2)); margin-right: auto; }
  .hero-mark{
    display:block; position:absolute; z-index:0; pointer-events:none;
    top: clamp(4rem, 8vw, 7rem);
    right: max(2.25rem, calc((100vw - 1280px) / 2 + 2.5rem));
    width: clamp(250px, 24vw, 370px); aspect-ratio: 141 / 118.24;
    --gap: 8px; --spread: calc(1 + var(--sp, 0) * 1.5);
  }
  .hm-scene{ position:absolute; inset:0; perspective: 1100px; animation: hm-float 9s var(--ease-in-out) 1.8s infinite alternate; }
  .hm-obj{
    position:absolute; inset:0; transform-style: preserve-3d; will-change: transform;
    transform:
      translate3d(0, calc(var(--sp, 0) * -36px), 0)
      rotateX(calc(var(--rx, 6deg) + var(--sp, 0) * 14deg))
      rotateY(calc(var(--ry, -22deg) - var(--sp, 0) * 40deg));
  }
  .hm-layer{
    position:absolute; inset:0; width:100%; height:100%; overflow: visible;
    transform: translateZ(calc(var(--i) * var(--gap) * var(--spread)));
    animation: hm-in 1.7s var(--ease-out) both;
    animation-delay: calc(.3s + (var(--i) + 7) * 60ms);
  }
  .hm-back path{
    fill: #7A2A00;
    fill: color-mix(in srgb, #F84503 calc(100% + var(--i) * 11%), #1A0C05);
    stroke: rgba(255,150,80,.28); stroke-width: .35;
  }
  .hm-face{ filter: drop-shadow(0 0 22px rgba(248,69,3,.35)); }
  .hm-leg{ filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
  .hm-plate{
    position:absolute; inset:-34%; transform: translateZ(-110px);
    background: radial-gradient(closest-side, rgba(255,92,0,.30), rgba(255,92,0,.08) 55%, transparent 72%);
    animation: hm-fade 2s var(--ease-out) .2s both;
  }
  .hm-node{
    position:absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4px 0 0 -4px;
    background: var(--orange-400); box-shadow: 0 0 14px rgba(255,92,0,.7);
    transform: translateZ(calc(var(--i) * var(--gap) * var(--spread) * 2.2)) rotate(45deg);
    animation: hm-fade 1.6s var(--ease-out) 1.2s both;
  }
  .hm-node.is-lg{ width: 14px; height: 14px; margin: -7px 0 0 -7px; background: transparent; border: 1px solid var(--orange-300); box-shadow: none; }
}
@keyframes hm-in{ from{ transform: translateZ(0) scale(.96); opacity: 0; } }
@keyframes hm-fade{ from{ opacity: 0; } }
@keyframes hm-float{ from{ transform: translateY(-6px); } to{ transform: translateY(8px); } }

/* ---------- Customer Linkage / shared helper: static facet pattern (no JS) ---------- */
.brand-facets{
  background-image:
    repeating-linear-gradient(129deg, transparent 0 119px, rgba(255,255,255,.05) 119px 120px),
    repeating-linear-gradient(32deg, transparent 0 119px, rgba(255,255,255,.03) 119px 120px);
}

/* ---------- reduced motion: freeze everything here ---------- */
@media (prefers-reduced-motion: reduce){
  .hm-scene, .hm-layer, .hm-plate, .hm-node{ animation: none !important; }
  .hm-obj{ transform: rotateX(6deg) rotateY(-22deg) !important; }
  .brand-field{ transition: none; }
}

.cta-band > .brand-field{ position:absolute; z-index:0; }

/* ---------- page-wide WebGL environment (scripts/brand-env.js) ---------- */
.brand-env{
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.6s var(--ease-out);
}
.brand-env.is-ready{ opacity: 1; }
/* once the environment runs, the sections become windows onto it: a light ink veil keeps every line of text readable */
html.home-env body{ background: transparent; }
html.home-env main, html.home-env .footer{ position: relative; z-index: 1; }
html.home-env .hero-grid{ background-image: none; }
html.home-env .tone-base{ background: rgba(11,11,13,.38); }
html.home-env .tone-raised{ background: rgba(17,17,20,.62); }
html.home-env .tone-ember{
  background: linear-gradient(180deg, rgba(23,14,9,.6) 0%, rgba(11,11,13,.5) 100%);
}
html.home-env .marquee{ background: rgba(11,11,13,.55); backdrop-filter: none; }
@media (prefers-reduced-motion: reduce){ .brand-env{ transition: none; } }

/* ---------- homepage continuity: hero object camera, sheen, seams ---------- */
@media (min-width: 1100px) and (min-height: 600px){
  /* the mark travels backward as the hero scrolls away (--sp 0..1), and follows the pointer by a few percent (--px/--py) */
  .hero-mark{
    transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sp, 0) * -28px), 0) scale(calc(1 - var(--sp, 0) * .22));
    opacity: calc(1 - var(--sp, 0) * .6);
  }
}
.hm-sheen{ mix-blend-mode: screen; pointer-events: none; }
@media (prefers-reduced-motion: reduce){ .hm-sheen{ display: none; } }

.seam{ position:absolute; left:0; top:-15px; width:100%; height:30px; z-index:2; pointer-events:none; overflow:visible; }
.seam path{ fill:none; stroke-linecap:square; stroke-dasharray:1; stroke-dashoffset:1; }
.seam-line{ stroke: var(--border-strong); stroke-width:1; transition: stroke-dashoffset 1.4s var(--ease-out); }
.seam-glow{ stroke: var(--orange-500); stroke-width:1.5; stroke-dasharray: .08 1; stroke-dashoffset:.08; opacity:0; }
.seam.is-drawn .seam-line{ stroke-dashoffset: 0; }
.seam.is-drawn .seam-glow{ opacity:.9; animation: seam-run 2.2s var(--ease-in-out) .35s 1 both; }
@keyframes seam-run{ from{ stroke-dashoffset:.08; opacity:0; } 15%{ opacity:.9; } to{ stroke-dashoffset:-1; opacity:0; } }
.seam-node{
  position:absolute; right:16px; top:-19px; width:8px; height:8px; z-index:3; pointer-events:none;
  background: var(--primary); transform: rotate(45deg) scale(0); opacity:0;
  transition: transform .7s var(--ease-out) 1.1s, opacity .5s ease 1.1s;
}
.seam-node.is-on{ transform: rotate(45deg) scale(1); opacity:1; }
@media (max-width: 899px){ .seam-node{ display:none; } .seam-glow{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .seam path{ stroke-dashoffset:0; transition:none; } .seam-glow{ display:none; }
  .seam-node{ transform: rotate(45deg) scale(1); opacity:1; transition:none; }
}

/* the route: one path down the right gutter from the hero mark to the closing button (scripts/brand-motion.js) */
main.has-route{ position: relative; }
.route{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition: opacity .8s var(--ease-out); }
.route.is-ready{ opacity:1; }
.route-svg{ position:absolute; left:0; top:0; overflow:visible; }
.route-svg path{ fill:none; stroke-linejoin:miter; }
.route-base{ stroke: rgba(255,255,255,.12); stroke-width:1; }
.route-lit{ stroke: url(#route-tail); stroke-width:1.5; }
.route-glow{ stroke: rgba(255,92,0,.10); stroke-width:6; }
.route-head{ stroke: #FFC49E; stroke-width:2; stroke-linecap:round; }
.route-node{ position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; }
.route-node i{ display:block; width:100%; height:100%; transform: rotate(45deg); background: var(--ink-950); border:1px solid rgba(255,255,255,.3); transition: background .35s, border-color .35s, transform .45s var(--ease-out), box-shadow .45s; }
.route-node b{ position:absolute; right:16px; top:50%; transform: translate(6px,-50%); white-space:nowrap; font: 500 11px/1 var(--font-body); letter-spacing:.05em; color: var(--text-muted); opacity:0; transition: opacity .35s, transform .45s var(--ease-out), color .35s; }
.route-node.is-on i{ background: var(--orange-600); border-color: var(--orange-500); }
.route-node.is-on b{ opacity:.75; transform: translate(0,-50%); }
.route-node.is-current i{ background: var(--orange-500); border-color: var(--orange-300); transform: rotate(45deg) scale(1.45); box-shadow: 0 0 14px rgba(255,92,0,.6); }
.route-node.is-current b{ opacity:1; color: var(--text-accent); }
.route-node.is-last{ display:none; } /* the button itself is the last stop */
.sheet-section .route-node b{ color: var(--sand-700); }
main.has-route .seam-node{ display:none; } /* the route's nodes replace them on desktop */
.btn.route-arrived{ box-shadow: 0 0 0 6px rgba(255,92,0,.16), 0 0 36px -4px rgba(255,92,0,.65); transition: box-shadow .8s var(--ease-out), background-color var(--dur-fast); }

/* closing convergence: the lattice draws toward the band's centre and the hero mark returns, small (--cv 0..1) */
.cta-band{ --cv: 0; }
.cta-band > .cv-lines{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.cv-lines path{ fill:none; stroke: rgba(255,255,255,.11); stroke-width:1; stroke-dasharray:1; stroke-dashoffset: calc(1 - clamp(0, (var(--cv) - var(--d)) / (1 - var(--d)), 1)); }
.cv-lines path.is-hot{ stroke: rgba(255,122,46,.5); }
.cta-band > .cv-mark{
  width: 64px; margin: var(--space-sm) auto var(--space-md); pointer-events:none;
  opacity: var(--cv); transform: translateY(calc((1 - var(--cv)) * -60px)) scale(calc(.55 + var(--cv) * .45)) rotate(calc((1 - var(--cv)) * -14deg));
  filter: drop-shadow(0 10px 24px rgba(255,92,0,calc(var(--cv) * .45)));
}
.cv-mark svg{ width:100%; height:auto; }
@media (max-width: 640px){ .cta-band > .cv-mark{ width: 48px; } }