/* =========================================================
   PINEFORGE COLLECTIVE — Motion language
   One restrained system for brand, atmosphere, reveals and feedback.
   ========================================================= */

@property --motion-tone-a { syntax:"<color>"; inherits:true; initial-value:#315d3e; }
@property --motion-tone-b { syntax:"<color>"; inherits:true; initial-value:#8d684b; }

:root {
  --motion-fast:220ms;
  --motion-medium:480ms;
  --motion-slow:760ms;
  --motion-cinematic:1200ms;
  --motion-ease:cubic-bezier(.2,.78,.2,1);
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
  --motion-tone-a:#315d3e;
  --motion-tone-b:#8d684b;
  --motion-page-progress:0;
  transition:--motion-tone-a 900ms ease,--motion-tone-b 900ms ease;
}

/* 01 — section-aware atmospheric color field */
.motion-atmosphere {
  position:fixed; z-index:3; inset:0; overflow:hidden; pointer-events:none;
  opacity:.1; mix-blend-mode:normal; contain:strict;
  transition:opacity var(--motion-slow) ease;
}
:root[data-theme="light"] .motion-atmosphere { opacity:.11; mix-blend-mode:normal; }
.motion-atmosphere i { position:absolute; border-radius:50%; will-change:transform; }
.motion-atmosphere i:nth-child(1) {
  width:46vw; aspect-ratio:1; left:-20vw; top:10vh;
  background:radial-gradient(circle,var(--motion-tone-a) 0%,color-mix(in srgb,var(--motion-tone-a) 55%,transparent) 34%,transparent 72%);
  animation:none;
}
.motion-atmosphere i:nth-child(2) {
  width:42vw; aspect-ratio:1; right:-17vw; top:39vh;
  background:radial-gradient(circle,var(--motion-tone-b) 0%,color-mix(in srgb,var(--motion-tone-b) 52%,transparent) 36%,transparent 72%);
  animation:none;
}
.motion-atmosphere i:nth-child(3) {
  width:30vw; aspect-ratio:1; left:40vw; bottom:-18vh;
  background:radial-gradient(circle,color-mix(in srgb,var(--motion-tone-a) 58%,var(--motion-tone-b)) 0%,transparent 70%); opacity:.58;
  animation:none;
}

/* 02 — soft hand-off at every section boundary */
.motion-section { position:relative; }
.section-motion-wash {
  position:absolute; z-index:0; inset:-1px 0 auto; height:min(30vh,280px); pointer-events:none;
  background:
    radial-gradient(55% 100% at 18% 0,color-mix(in srgb,var(--motion-tone-a) 13%,transparent),transparent 72%),
    radial-gradient(48% 90% at 82% 0,color-mix(in srgb,var(--motion-tone-b) 11%,transparent),transparent 74%),
    linear-gradient(90deg,transparent,var(--border-soft),transparent) top/100% 1px no-repeat;
  opacity:.2; transform:translate3d(0,calc(var(--section-shift,0) * -14px),0);
  transition:opacity 900ms ease,transform 900ms var(--motion-ease);
}
.motion-section.is-motion-active > .section-motion-wash { opacity:.78; }
.motion-section > :not(.section-motion-wash) { z-index:1; }

/* 03–05 — logo signature, halo and subtle interactive depth */
.hero-mark-wrap {
  --logo-tilt-x:0deg; --logo-tilt-y:0deg; --logo-light-x:50%; --logo-light-y:35%;
  perspective:700px; transform-style:preserve-3d;
}
.hero-mark-wrap::before {
  content:""; position:absolute; inset:-26px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at var(--logo-light-x) var(--logo-light-y),rgba(213,236,203,.22),transparent 33%),radial-gradient(circle,var(--glow-primary),transparent 68%);
  opacity:.5; transform:scale(.82); animation:logoAura 4.8s ease-in-out infinite;
}
.hero-mark-wrap::after {
  content:""; position:absolute; inset:12px; border-radius:50%; pointer-events:none;
  border:1px solid transparent;
  background:conic-gradient(from 180deg,transparent 0 68%,color-mix(in srgb,var(--accent-soft) 54%,transparent),transparent 82%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask-composite:exclude; animation:logoOrbit 14s linear infinite reverse;
}
.hero-logo-tilt { width:100%; height:100%; display:grid; place-items:center; transform:rotateX(var(--logo-tilt-x)) rotateY(var(--logo-tilt-y)); transform-style:preserve-3d; transition:transform .55s var(--motion-ease-out); }
.hero-mark { transform-style:preserve-3d; transition:filter .55s ease; }
.motion-ready .hero-mark { animation:logoSignature .72s var(--motion-ease-out) both; }
.hero-mark-wrap:hover .hero-mark { filter:drop-shadow(0 24px 38px rgba(0,0,0,.36)) drop-shadow(0 0 18px var(--glow-primary)); }
@keyframes logoSignature { from { clip-path:inset(0 50% 100% 50% round 50%); opacity:0; } to { clip-path:inset(0 0 0 0 round 0); opacity:1; } }
@keyframes logoAura { 50% { opacity:.82; transform:scale(1.04); } }
@keyframes logoOrbit { to { transform:rotate(1turn); } }
.brand img,.footer-brand img,.contact-mark-wrap img { transition:transform .65s var(--motion-ease-out),filter .5s ease; }
.brand:hover img { transform:rotate(-7deg) scale(1.06); }
.footer-brand:hover img { transform:translateY(-3px) rotate(6deg); }

/* 06–08 — hero mesh, rays and editorial entrance */
.hero::after {
  content:""; position:absolute; z-index:-1; inset:-20%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--motion-tone-a) 18%,transparent),transparent 48%);
  transform:translate3d(0,0,0) scale(.9); animation:heroLightBreath 13s ease-in-out infinite alternate;
}
.hero-tree-lines { animation:heroRays 16s ease-in-out infinite alternate; transform-origin:50% 85%; }
@keyframes heroLightBreath { to { transform:translate3d(3vw,2vh,0) scale(1.08); opacity:.72; } }
@keyframes heroRays { to { transform:scaleX(1.045) translateY(-1.5%); opacity:.24; } }

/* 09 — common, one-shot content choreography */
.motion-system .motion-reveal { transition:opacity var(--motion-slow) ease,transform var(--motion-slow) var(--motion-ease-out); transition-delay:calc(var(--motion-order,0) * 55ms); }
.motion-system .motion-reveal:not(.is-motion-visible) { opacity:0; transform:translate3d(0,24px,0) scale(.99); }
.motion-system .motion-reveal.is-motion-visible { opacity:1; transform:translate3d(0,0,0) scale(1); }

/* 10 — navigation settles instead of snapping */
.site-header { transform-origin:50% 0; }
.site-header.is-scrolled { animation:headerSettle .48s var(--motion-ease-out); }
@keyframes headerSettle { from { transform:translateY(-7px) scale(.992); } to { transform:none; } }

/* 11–13 — button light, link underline and scroll cue rhythm */
.button-primary,.button-secondary,.nav-cta,.contact-link,.studio-cta a { position:relative; overflow:hidden; }
.button-primary::after,.button-secondary::after {
  content:""; position:absolute; inset:-40% auto -40% -35%; width:28%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent); transform:skewX(-18deg) translateX(-240%); transition:transform .7s var(--motion-ease);
}
.button-primary:hover::after,.button-secondary:hover::after { transform:skewX(-18deg) translateX(620%); }
.contact-link::after,.studio-cta a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--motion-ease); }
.contact-link:hover::after,.studio-cta a:hover::after { transform:scaleX(1); transform-origin:left; }
.scroll-cue i::before { content:""; position:absolute; inset:0; background:var(--accent-soft); transform:scaleX(0); transform-origin:left; animation:scrollCueSweep 2.2s ease-in-out infinite; }
@keyframes scrollCueSweep { 55%,100% { transform:scaleX(1); transform-origin:right; } }

/* 14 — premium cards reveal their content in layers */
.project-card .project-card-art,.featured-visual,.capability-card { transition:transform var(--motion-medium) var(--motion-ease-out),box-shadow var(--motion-medium) ease,border-color var(--motion-medium) ease; }
.project-card h3,.project-card em,.capability-card h3,.capability-card > i { transition:transform var(--motion-medium) var(--motion-ease-out),color var(--motion-fast) ease; }
.project-card:hover h3 { transform:translateX(4px); }
.capability-card:hover h3 { transform:translateY(-3px); }
.capability-card:hover > i { transform:rotate(12deg) scale(1.08); }
.project-card:active,.featured-visual:active { transform:translateY(-1px) scale(.995); transition-duration:120ms; }

/* 15 — phone project changes gain depth without animating filters */
.phone-panel .game-shot { transition:opacity .5s ease,transform .7s var(--motion-ease-out),box-shadow .6s ease; transform-origin:50% 64%; }
.phone-panel:not(.is-active) .game-shot { opacity:.58; transform:scale(.965) translateY(7px); }
.phone-panel.is-active .game-shot { opacity:1; transform:scale(1) translateY(0); box-shadow:0 24px 58px rgba(0,0,0,.3); }
.phone-panel.is-active .game-shot img { animation:phoneImageSettle .7s var(--motion-ease-out); }
@keyframes phoneImageSettle { from { transform:scale(1.035); filter:saturate(.75); } to { transform:scale(1); filter:saturate(1); } }

/* 16 — the process grows down the page */
.process-stem path { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--process-progress,0)); transition:stroke-dashoffset .12s linear; }
.process-step > span { position:relative; }
.process-step.active > span::after { content:""; position:absolute; inset:-6px; border:1px solid var(--accent-primary); border-radius:50%; animation:processNode 1.2s var(--motion-ease-out) both; }
@keyframes processNode { from { opacity:.8; transform:scale(.65); } to { opacity:0; transform:scale(1.35); } }

/* 17 — marquee enters and pauses as a controllable material */
.craft-marquee { -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.craft-marquee:hover .craft-marquee-track { animation-play-state:paused; opacity:.78; }
.craft-marquee-track { transition:opacity .4s ease; }

/* 18–19 — modal materialization and directional gallery transition */
.project-dialog[open] { animation:dialogMaterialize .48s var(--motion-ease-out) both; }
.project-dialog[open]::backdrop { animation:dialogBackdrop .4s ease both; }
.project-dialog[open] .dialog-preview { animation:dialogPreviewReveal .7s .06s var(--motion-ease-out) both; }
@keyframes dialogMaterialize { from { opacity:0; transform:translateY(18px) scale(.975); } to { opacity:1; transform:none; } }
@keyframes dialogBackdrop { from { opacity:0; } to { opacity:1; } }
@keyframes dialogPreviewReveal { from { clip-path:inset(0 6% 0 0); opacity:.45; } to { clip-path:inset(0); opacity:1; } }
.dialog-gallery button.is-active::after { content:""; position:absolute; inset:0; border:1px solid var(--project-accent); border-radius:inherit; animation:gallerySelect .42s var(--motion-ease-out); pointer-events:none; }
@keyframes gallerySelect { from { opacity:0; transform:scale(.86); } to { opacity:1; transform:scale(1); } }

/* 20 — the back control doubles as quiet page progress */
.back-to-top { --back-progress:0deg; isolation:isolate; background:conic-gradient(var(--accent-primary) var(--back-progress),var(--surface-glass-strong) 0); }
.back-to-top::before { content:""; position:absolute; z-index:0; inset:3px; border-radius:50%; background:var(--surface-glass-strong); }
.back-to-top > * { position:relative; z-index:1; }
.back-to-top:hover span { animation:backArrow .6s var(--motion-ease-out); }
@keyframes backArrow { 50% { transform:translateY(-4px); } }

.motion-paused .motion-atmosphere *,
.motion-paused .hero::after,
.motion-paused .hero-tree-lines,
.motion-paused .hero-mark-wrap::before,
.motion-paused .hero-mark-wrap::after,
.motion-paused .scroll-cue i::before,
.motion-paused .craft-marquee-track,
.motion-document-hidden .motion-atmosphere * { animation-play-state:paused !important; }

@media (max-width:760px) {
  .motion-atmosphere { opacity:.08; }
  .section-motion-wash { height:160px; }
  .motion-system .motion-reveal:not(.is-motion-visible) { transform:translate3d(0,16px,0); }
}

@media (prefers-reduced-motion:reduce) {
  .motion-atmosphere { display:none; }
  .section-motion-wash { opacity:.35 !important; transform:none !important; transition:none !important; }
  .motion-reveal,.hero-logo-tilt,.hero-mark,.hero::after,.hero-tree-lines,.phone-panel .game-shot,.phone-panel .game-shot img,
  .project-dialog[open],.project-dialog[open]::backdrop,.project-dialog[open] .dialog-preview,.process-step > span::after {
    animation:none !important; transition:none !important; transform:none !important; filter:none !important; clip-path:none !important;
  }
  .process-stem path { stroke-dashoffset:0; }
}

.data-saver .motion-atmosphere { display:none; }
.data-saver .section-motion-wash { transform:none; }

/* Expensive live backdrop sampling is replaced by the existing opaque/glass
   color tokens. This keeps the material language without repainting the page
   behind every surface during scroll. */
.motion-system * {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.motion-system .site-header { background:color-mix(in srgb,var(--bg-secondary) 88%,transparent); }
.motion-system .hero-mark-wrap::before { animation:none; opacity:.62; transform:scale(1); }
.motion-system .hero-mark-wrap::after,
.motion-system .hero::after,
.motion-system .hero-tree-lines,
.motion-system .hero-trust i,
.motion-system .craft-marquee-track,
.motion-system .phone-stage.is-focused .phone-focus-status i,
.motion-system .phone-stage.is-focused .scroll-note i::after { animation:none; }
.motion-system .hero::after { transform:translate3d(0,0,0) scale(1); opacity:.64; }
.motion-system .scroll-cue i::before { animation:none; transform:scaleX(1); opacity:.45; }
.motion-system .craft-marquee-track { transform:none; }

/* Compact viewports prioritise input latency and scroll stability. */
.performance-lite .motion-atmosphere,
.performance-lite .section-motion-wash { display:none; }
.performance-lite * {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.performance-lite .site-header,
.performance-lite .mobile-nav { background:var(--bg-secondary); }
.performance-lite .phone,
.performance-lite .hero-mark-wrap,
.performance-lite .hero-mark,
.performance-lite .orbit-card { filter:none !important; }
.performance-lite .phone-ghost,
.performance-lite .phone-stage::after { display:none; }
.performance-lite .phone-screen-track { will-change:auto; }
.performance-lite .hero::after,
.performance-lite .hero-tree-lines,
.performance-lite .hero-mark-wrap::before,
.performance-lite .hero-mark-wrap::after,
.performance-lite .scroll-cue i::before,
.performance-lite .motion-toggle i,
.performance-lite .hero-trust i,
.performance-lite .craft-marquee-track,
.performance-lite .phone-panel .game-shot img { animation:none !important; }
.performance-lite .craft-marquee-track { transform:none; }
.performance-lite .motion-reveal { transition-duration:320ms; transition-delay:0ms; }
/* =========================================================
   PINEFORGE COLLECTIVE — Minimal forge emblem
   One calm focal point: restrained depth, slow light and subtle tilt.
   ========================================================= */

.hero-mark-wrap[data-forge-emblem] {
  --forge-emblem-image: url("../assets/brand/pineforge-forge-emblem-384.webp");
  --forge-tilt-x: 0deg;
  --forge-tilt-y: 0deg;
  --forge-shift-x: 0px;
  --forge-shift-y: 0px;
  --forge-light-x: 50%;
  --forge-light-y: 32%;
  width: clamp(154px, 13vw, 184px);
  height: clamp(176px, 15vw, 210px);
  margin-bottom: 8px;
  perspective: 1000px;
  isolation: isolate;
  cursor: default;
}

.hero-mark-wrap[data-forge-emblem]::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 10% 0 4%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--forge-light-x) var(--forge-light-y), rgba(244, 194, 123, .13), transparent 28%),
    radial-gradient(circle at 50% 57%, rgba(190, 91, 39, .12), transparent 57%);
  opacity: .6;
  transform: scale(.94);
  animation: forgeBreath 8s ease-in-out infinite;
}

.hero-mark-wrap[data-forge-emblem]::after { display: none; }

.hero-mark-wrap[data-forge-emblem] .hero-logo-tilt {
  position: relative;
  z-index: 2;
  transform:
    translate3d(var(--forge-shift-x), var(--forge-shift-y), 0)
    rotateX(var(--forge-tilt-x))
    rotateY(var(--forge-tilt-y));
  transform-style: preserve-3d;
  transition: transform 820ms cubic-bezier(.16, 1, .3, 1);
}

.forge-emblem {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.forge-heat {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 13%;
  width: 56%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 37%, rgba(255, 181, 92, .28), rgba(190, 70, 29, .1) 39%, transparent 72%);
  filter: blur(14px);
  opacity: .42;
  transform: translate3d(-50%, 0, -24px) scale(.92);
  animation: forgeHeatCalm 7s ease-in-out infinite alternate;
}

.forge-cone-depth {
  position: relative;
  width: 76%;
  transform: translateZ(18px);
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 22px 22px rgba(5, 6, 4, .32))
    drop-shadow(0 0 8px rgba(215, 104, 45, .12));
}

.forge-cone-depth::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5% 3% 2%;
  background: #160d09;
  -webkit-mask: var(--forge-emblem-image) center / contain no-repeat;
  mask: var(--forge-emblem-image) center / contain no-repeat;
  transform: translate3d(4px, 4px, -14px) scale(.99);
  opacity: .46;
}

.forge-cone-depth .hero-mark {
  display: block;
  width: 100%;
  aspect-ratio: 384 / 461;
  background: var(--forge-emblem-image) center / contain no-repeat;
  filter: saturate(.84) contrast(1.02);
  transform: translateZ(1px);
  transition: filter 700ms ease;
}

.forge-specular {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--forge-light-x) var(--forge-light-y), rgba(255, 241, 205, .38), transparent 34%);
  -webkit-mask: var(--forge-emblem-image) center / contain no-repeat;
  mask: var(--forge-emblem-image) center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: .24;
  transform: translateZ(5px);
  transition: opacity 650ms ease;
}

.hero-mark-wrap.is-forge-active .hero-logo-tilt { transition-duration: 180ms; }
.hero-mark-wrap.is-forge-active .forge-cone-depth .hero-mark { filter: saturate(.92) contrast(1.02) brightness(1.015); }
.hero-mark-wrap.is-forge-active .forge-specular { opacity: .42; }

.hero-mark-wrap[data-forge-emblem] .hero-ring {
  inset: 9% 2% 7%;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 12%, transparent);
  box-shadow: none;
  transform: translateZ(-12px);
  opacity: .72;
}

.hero-mark-wrap[data-forge-emblem] .hero-ring::after { display: none; }

@keyframes forgeBreath {
  50% { opacity: .76; transform: scale(1); }
}

@keyframes forgeHeatCalm {
  to { opacity: .52; transform: translate3d(-50%, -2px, -24px) scale(.97); }
}

:root[data-theme="light"] .hero-mark-wrap[data-forge-emblem]::before { opacity: .38; }
:root[data-theme="light"] .forge-cone-depth .hero-mark {
  filter: saturate(.78) contrast(1.04) drop-shadow(0 17px 18px rgba(57, 38, 24, .14));
}
:root[data-theme="light"] .hero-mark-wrap[data-forge-emblem] .hero-ring {
  border-color: rgba(66, 87, 64, .13);
  opacity: .8;
}

.motion-paused .forge-heat,
.motion-paused .hero-mark-wrap[data-forge-emblem]::before,
.motion-document-hidden .forge-heat,
.motion-document-hidden .hero-mark-wrap[data-forge-emblem]::before {
  animation-play-state: paused !important;
}

@media (max-width: 760px) {
  .hero-mark-wrap[data-forge-emblem] {
    width: 112px;
    height: 128px;
    margin-top: 4px;
    margin-bottom: 8px;
  }
  .forge-cone-depth {
    width: 78%;
    filter: drop-shadow(0 14px 14px rgba(5, 6, 4, .25));
  }
  .forge-heat { filter: blur(9px); }
}

@media (max-height: 800px) and (min-width: 761px) {
  .hero-mark-wrap[data-forge-emblem] {
    width: 118px;
    height: 136px;
    margin-bottom: 5px;
  }
}

@media (max-height: 660px) and (min-width: 761px) {
  .hero-mark-wrap[data-forge-emblem] {
    width: 92px;
    height: 104px;
    margin-bottom: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark-wrap[data-forge-emblem] .hero-logo-tilt,
  .forge-cone-depth,
  .forge-heat,
  .hero-mark-wrap[data-forge-emblem]::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.performance-lite .hero-mark-wrap[data-forge-emblem] { filter: none !important; }
.performance-lite .hero-mark-wrap[data-forge-emblem]::before {
  filter: none;
  opacity: .32;
  animation: none;
}
.performance-lite .forge-cone-depth {
  filter: drop-shadow(0 12px 12px rgba(5, 6, 4, .24)) !important;
}
.performance-lite .forge-specular { display: none; }
.performance-lite .forge-heat {
  filter: blur(8px);
  animation: none;
  opacity: .34;
}

/* Pausing motion holds continuous loops only. One-shot entrance animations
   would otherwise stay frozen on their first, often transparent, keyframe
   (an invisible project dialog, a half-drawn emblem). */
:root.motion-paused .hero-mark,
:root.motion-paused .site-header.is-scrolled,
:root.motion-paused .phone-panel.is-active .game-shot img,
:root.motion-paused .project-dialog[open],
:root.motion-paused .project-dialog[open] .dialog-preview,
:root.motion-paused .dialog-gallery button.is-active::after,
:root.motion-paused .back-to-top:hover span { animation:none !important; }
:root.motion-paused .process-step.active > span::after { animation:none !important; opacity:0; }

/* =========================================================
   Opening — the emblem appears alone, flares once and settles into its
   place in the hero while the page fades in behind it. Driven by
   js/ui.js; shown only while <html> carries .intro-pending.
   ========================================================= */
.brand-intro { display:none; }
.intro-pending .brand-intro {
  --intro-size:clamp(150px,22vmin,230px);
  position:fixed;
  inset:0;
  z-index:400;
  display:block;
  overflow:hidden;
  cursor:pointer;
}
.intro-leaving .brand-intro { pointer-events:none; }
.brand-intro > i { position:absolute; display:block; }
.brand-intro-veil {
  inset:0;
  background:
    radial-gradient(42rem 34rem at 50% 46%,color-mix(in srgb,var(--forge-copper,#c48b5e) 13%,transparent),transparent 68%),
    var(--bg-primary,#07110c);
  transition:opacity .62s ease;
}
.intro-leaving .brand-intro-veil { opacity:0; }
.brand-intro-emblem,
.brand-intro-glow,
.brand-intro-ring {
  left:50%;
  top:46%;
  width:var(--intro-size);
  aspect-ratio:384 / 461;
  margin:calc(var(--intro-size) * -.6) 0 0 calc(var(--intro-size) * -.5);
}
.brand-intro-emblem {
  background:url("../assets/brand/pineforge-forge-emblem-384.webp") center / contain no-repeat;
  filter:saturate(.84) contrast(1.02) drop-shadow(0 22px 22px rgba(5,6,4,.32));
  opacity:0;
  will-change:transform,opacity;
}
.brand-intro-glow {
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(255,181,92,.5),rgba(190,70,29,.2) 38%,transparent 70%);
  filter:blur(22px);
  opacity:0;
  transform:scale(.6);
}
.brand-intro-ring {
  aspect-ratio:1;
  margin-top:calc(var(--intro-size) * -.5);
  border:1px solid color-mix(in srgb,var(--forge-copper,#c48b5e) 70%,transparent);
  border-radius:50%;
  opacity:0;
}
.intro-running .brand-intro-glow { animation:introFlare 1.1s .22s cubic-bezier(.2,.8,.2,1) both; }
.intro-running .brand-intro-ring { animation:introRing .95s .34s cubic-bezier(.2,.8,.2,1) both; }
.intro-leaving .brand-intro-glow,
.intro-leaving .brand-intro-ring { animation:none; opacity:0; transition:opacity .3s ease; }
@keyframes introFlare {
  0% { opacity:0; transform:scale(.6); }
  45% { opacity:1; transform:scale(1.5); }
  100% { opacity:.42; transform:scale(1.2); }
}
@keyframes introRing {
  0% { opacity:.9; transform:scale(.7); }
  100% { opacity:0; transform:scale(2.3); }
}

/* The real emblem stays out of sight until the travelling one lands on it;
   the rest of the hero follows in a short stagger. */
.intro-pending .forge-cone-depth { visibility:hidden; }
.intro-pending:not(.intro-leaving) .hero > :is(.eyebrow,h1,.hero-copy,.hero-kinetic,.hero-actions,.hero-trust,.scroll-cue) {
  opacity:0;
  translate:0 16px;
}
:is(.intro-leaving,.intro-settling) .hero > :is(.eyebrow,h1,.hero-copy,.hero-kinetic,.hero-actions,.hero-trust,.scroll-cue) {
  transition:opacity .6s ease,translate .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--intro-order,0) * 70ms + 160ms);
}
.hero > h1 { --intro-order:1; }
.hero > .hero-copy { --intro-order:2; }
.hero > .hero-kinetic { --intro-order:3; }
.hero > .hero-actions { --intro-order:4; }
.hero > :is(.hero-trust,.scroll-cue) { --intro-order:5; }

@media (prefers-reduced-motion:reduce) {
  .brand-intro { display:none !important; }
  .intro-pending .forge-cone-depth { visibility:visible; }
}
@media (forced-colors:active) {
  .brand-intro-veil { background:Canvas; }
}
@media print {
  .brand-intro { display:none !important; }
}