:root{
  --bg:#121110; --panel:#1b1a17; --ink:#f3ede0; --sub:#a39a86;
  --gold:#d4af37; --gold-light:#f1d989; --cream:#f3ede0; --border:rgba(243,237,224,.10);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth;}
*{box-sizing:inherit;margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px;}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.left{transform:translateX(-46px);}
.reveal.right{transform:translateX(46px);}
.reveal.scale{transform:translateY(20px) scale(.92);}
.reveal.is-visible{opacity:1; transform:translate(0,0) scale(1);}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .marquee-track, .ticker-track{animation:none !important;}
  header.hero h1 mark{animation:none; background-position:0 center;}
}

/* nav */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(18px + env(safe-area-inset-top,0px)) 32px 18px;
  background:transparent; border:none; box-shadow:none;
  transition:padding .25s ease, background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
nav.scrolled{
  padding-top:calc(12px + env(safe-area-inset-top,0px)); padding-bottom:12px;
  background:rgba(18,17,16,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1rem; letter-spacing:.02em;}
.brand img{width:34px; height:34px; border-radius:50%; object-fit:cover;}
.navlinks{display:flex; align-items:center; gap:28px; font-size:.85rem; font-weight:600; color:var(--sub); text-transform:uppercase; letter-spacing:.05em;}
.navlinks a:hover{color:var(--gold-light);}
.cta{background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:#141311; padding:10px 20px; border-radius:999px; font-weight:700; font-size:.8rem; white-space:nowrap; text-transform:none; letter-spacing:.02em;}
.cta:hover{filter:brightness(1.06);}
@media(max-width:720px){ nav{padding-left:20px; padding-right:20px;} .navlinks{gap:14px;} .navlinks a:not(.cta){display:none;} }

/* hero */
header.hero{
  padding:90px 20px 50px; text-align:center; position:relative;
  background:radial-gradient(560px circle at 50% -5%, rgba(212,175,55,.18), transparent 70%);
}
.hero-bg{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
header.hero > *{position:relative; z-index:1;}
header.hero > .hero-bg{position:absolute; z-index:0;}
.brandwrap{position:relative; width:clamp(190px,30vw,300px); margin:0 auto 24px;}
.brandwrap:before{
  content:""; position:absolute; inset:-22%; z-index:-1; filter:blur(14px);
  background:radial-gradient(closest-side, rgba(212,175,55,.3), transparent);
}
.brandmark-large{
  width:100%; display:block;
  -webkit-mask-image:radial-gradient(circle, #000 55%, transparent 78%);
  mask-image:radial-gradient(circle, #000 55%, transparent 78%);
}
.wordmark{display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 0;}
.wm-main{
  font-family:Georgia,'Times New Roman',serif; font-weight:700; letter-spacing:.14em;
  font-size:clamp(2rem,6vw,3rem); line-height:1;
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wm-sub{font-size:.74rem; letter-spacing:.42em; color:var(--sub); text-transform:uppercase; margin-left:.42em;}
header.hero h1{font-size:clamp(2rem,7vw,3.4rem); line-height:1.1; font-weight:800; max-width:760px; margin:0 auto 18px;}
header.hero h1 mark{
  background-image:linear-gradient(to right,
    #8a6a1c 0%, var(--gold) 15%, var(--gold-light) 35%, #fff8e6 50%,
    var(--gold-light) 65%, var(--gold) 85%, #8a6a1c 100%);
  background-size:220% auto; background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:shineSweep 5s linear infinite;
}
@keyframes shineSweep{ 0%{background-position:200% center;} 100%{background-position:-200% center;} }
header.hero p{color:var(--sub); max-width:480px; margin:0 auto 28px; font-size:1.05rem;}
.hero-cta{margin-bottom:6px;}

/* services ticker (replaces the static pill row) */
.ticker-outer{
  width:100vw; margin:68px calc(50% - 50vw) 10px; overflow:hidden;
  transform:rotate(-2.2deg); box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.ticker{
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 45%, var(--cream) 100%);
  padding:12px 0;
}
.ticker-track{display:flex; width:max-content; animation:tickerScroll 16s linear infinite;}
.ticker-track span{
  display:flex; align-items:center; white-space:nowrap; padding:0 24px;
  font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; color:#141311;
}
.ticker-track span:after{content:"✦"; margin-left:24px; opacity:.55; font-size:.8rem;}
@keyframes tickerScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* page header (portfolio page) */
.pagehead{padding:70px 20px 30px; text-align:center;}
.pagehead h1{font-size:clamp(1.8rem,5vw,2.6rem); font-weight:800; margin-bottom:10px;}
.pagehead p{color:var(--sub); max-width:480px; margin:0 auto;}

/* services + line */
.services{position:relative; padding:40px 0 20px;}
svg.pathsvg{position:absolute; left:0; top:0; overflow:visible;}
.service{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:36px;
  align-items:center; padding:70px 20px 70px 64px; max-width:1000px; margin:0 auto;
}
.dot{
  position:absolute; left:24px; width:13px; height:13px; border-radius:50%;
  background:var(--bg); border:2px solid var(--sub); transform:translate(-50%,-50%);
  top:50%; transition:background .25s, border-color .25s;
}
.dot.active{background:var(--gold); border-color:var(--gold);}
.tag{font-size:.75rem; font-weight:700; color:var(--sub); letter-spacing:.08em; margin-bottom:10px;}
.service h2{font-size:clamp(1.4rem,3.5vw,2rem); font-weight:800; line-height:1.15; margin-bottom:14px;}
.service h2 mark{background:none; color:var(--gold-light);}
.service h2 mark.cream{color:var(--cream);}
.service p{color:var(--sub); font-size:.95rem; max-width:340px;}
.mock{
  background:linear-gradient(160deg, var(--panel), rgba(212,175,55,.07));
  border:1px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:0 14px 34px rgba(0,0,0,.35);
  transition:transform .3s ease;
}
.service:hover .mock{transform:translateY(-4px);}
.mock-photo{padding:0; overflow:hidden; line-height:0;}
.mock-photo img{width:100%; height:auto; display:block;}
.mock .bar{height:8px; border-radius:4px; background:var(--border); margin-bottom:9px;}
.mock .bar.short{width:55%;}
.mock .bar.gold{background:var(--gold); width:70%;}
@media(max-width:720px){ .service{grid-template-columns:1fr; padding-left:56px;} .dot{left:20px;} svg.pathsvg{left:20px;} }

/* work grid (index preview + portfolio page) */
.work{padding:70px 20px; text-align:center;}
.work h3{font-size:1.7rem; font-weight:800; margin-bottom:8px;}
.work>p{color:var(--sub); margin-bottom:36px;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; max-width:900px; margin:0 auto;}
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:22px; text-align:left; transition:border-color .2s, transform .25s;}
.card:hover{border-color:var(--gold); transform:translateY(-5px);}
.card .sw{width:100%; height:130px; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--gold),var(--panel)); margin-bottom:14px;}
.card .sw img{width:100%; height:100%; object-fit:cover; display:block;}
.card h4{font-weight:800; margin-bottom:4px;}
.card p{color:var(--sub); font-size:.85rem; margin-bottom:10px;}
.card .visit{font-size:.8rem; font-weight:700; color:var(--gold-light);}
.more{margin-top:36px; display:inline-block; font-weight:700; color:var(--gold-light); border-bottom:1px solid var(--gold);}

/* footer */
footer{padding:80px 20px 60px; text-align:center;}
footer h3{font-size:clamp(1.6rem,5vw,2.4rem); font-weight:800; margin-bottom:18px;}
.btn{display:inline-block; background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:#141311; padding:14px 30px; border-radius:999px; font-weight:700; transition:transform .2s; border:none; cursor:pointer; font-size:1rem; font-family:inherit;}
.btn:hover{transform:translateY(-2px);}
.foot-note{margin-top:40px; color:var(--sub); font-size:.8rem;}

/* contact form */
.contact-form{
  max-width:420px; margin:0 auto 34px; display:flex; flex-direction:column; gap:16px;
  background:linear-gradient(160deg, var(--panel), rgba(212,175,55,.06));
  border:1px solid var(--border); border-radius:18px; padding:28px;
  box-shadow:0 14px 34px rgba(0,0,0,.35); text-align:left;
}
.contact-form .field{display:flex; flex-direction:column; gap:7px;}
.contact-form label{font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--sub); text-transform:uppercase;}
.contact-form input, .contact-form select{
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; font-size:.95rem; color:var(--ink); font-family:inherit; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.contact-form select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23a39a86' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; cursor:pointer;
}
.contact-form input:focus, .contact-form select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.18);}
.contact-form input:invalid:not(:placeholder-shown):not(:focus){border-color:#c0564f;}
.contact-form .field-other{margin-top:-7px;}
.contact-form .field-other[hidden]{display:none;}
.contact-form .btn{margin-top:4px; width:100%; text-align:center;}
.form-note{min-height:1.1em; font-size:.82rem; color:#d98c86; margin:0;}
.form-note.ok{color:var(--gold-light);}

:root[data-theme="light"]{
  --bg:#f3ede0; --panel:#faf6ec; --ink:#141311; --sub:#6b6558; --border:rgba(20,19,17,.10);
}

/* service mock visuals */
.mock .dots{display:flex; gap:5px; margin-bottom:12px;}
.mock .dots i{width:8px; height:8px; border-radius:50%; background:var(--border);}
.mock .dots i:first-child{background:var(--gold);}
.fake-btn{display:inline-block; margin-top:6px; padding:7px 16px; border-radius:999px; background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:#141311; font-size:.75rem; font-weight:800;}
.bubble{font-size:.75rem; padding:8px 12px; border-radius:12px; margin-bottom:8px; max-width:85%; line-height:1.35;}
.bubble.in{background:var(--border); color:var(--ink);}
.bubble.out{background:var(--gold); color:#141311; margin-left:auto;}
.mini-label{font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sub); margin-bottom:10px;}
.minichart{display:flex; align-items:flex-end; gap:5px; height:84px;}
.minichart i{flex:1; background:var(--border); border-radius:3px 3px 0 0; transform-origin:bottom; transform:scaleY(0); transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.minichart i.g{background:var(--gold);}
.mock.is-visible .minichart i{transform:scaleY(1);}
.minichart i:nth-child(2){transition-delay:.05s}.minichart i:nth-child(3){transition-delay:.1s}.minichart i:nth-child(4){transition-delay:.15s}.minichart i:nth-child(5){transition-delay:.2s}
.minichart i:nth-child(6){transition-delay:.25s}.minichart i:nth-child(7){transition-delay:.3s}.minichart i:nth-child(8){transition-delay:.35s}.minichart i:nth-child(9){transition-delay:.4s}.minichart i:nth-child(10){transition-delay:.45s}
.mini-metrics{display:flex; justify-content:space-between; margin-top:10px; font-size:.65rem; color:var(--sub); font-weight:700;}

/* numbers section */
.numbers{max-width:900px; margin:0 auto; padding:70px 20px 30px; text-align:center;}
.numbers h3{font-size:clamp(1.5rem,4.5vw,2.2rem); font-weight:800; margin-bottom:10px;}
.numbers .lead{color:var(--sub); max-width:520px; margin:0 auto 34px;}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:26px;}
.stat{background:linear-gradient(160deg,var(--panel),rgba(212,175,55,.07)); border:1px solid var(--border); border-radius:16px; padding:22px 14px;}
.stat .num{font-size:2.3rem; font-weight:800; color:var(--gold-light); line-height:1;}
.stat .lbl{margin-top:8px; font-size:.8rem; color:var(--sub);}
.chart{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:22px; text-align:left;}
.chart-title{font-weight:700; font-size:.9rem; margin-bottom:16px;}
.chart .row{display:grid; grid-template-columns:150px 1fr 56px; align-items:center; gap:12px; margin-bottom:12px; font-size:.8rem;}
.chart .name{color:var(--sub);}
.chart .track{height:14px; background:var(--border); border-radius:999px; overflow:hidden;}
.chart .fill{height:100%; width:0; border-radius:999px; background:var(--sub); transition:width 1.3s cubic-bezier(.2,.8,.2,1);}
.chart .fill.g{background:linear-gradient(90deg,var(--gold),var(--gold-light));}
.chart.is-visible .fill{width:var(--w);}
.chart .val{font-weight:800; text-align:right;}
.chart-note{margin-top:6px; color:var(--sub); font-size:.78rem;}
.source{margin-top:18px; color:var(--sub); font-size:.7rem; line-height:1.5;}
@media(max-width:560px){ .chart .row{grid-template-columns:1fr 50px; } .chart .name{grid-column:1 / -1;} }

/* work mini stats */
.mini-stats{display:flex; justify-content:center; gap:34px; flex-wrap:wrap; margin:-10px auto 34px;}
.mini-stats div{display:flex; flex-direction:column; align-items:center;}
.mini-stats b{font-size:1.6rem; color:var(--gold-light); font-weight:800;}
.mini-stats span{font-size:.75rem; color:var(--sub);}
@media (prefers-reduced-motion: reduce){ .minichart i{transform:none; transition:none;} .chart .fill{transition:none;} }

/* contact row */
.contact-row{display:flex; justify-content:center; gap:10px 22px; flex-wrap:wrap; margin-top:22px; font-size:.9rem; font-weight:600;}
.contact-row a{color:var(--gold-light); border-bottom:1px solid rgba(212,175,55,.5); padding-bottom:1px; word-break:break-all;}
.contact-row a:hover{color:var(--cream);}

/* small screens: keep the hero art from crowding the headline */
@media(max-width:560px){
  header.hero{padding-top:70px;}
  .brandwrap{width:clamp(150px,46vw,210px);}
}

/* hero 3D scene: layered depth, tilts with pointer / phone motion */
.hero-bg{perspective:900px; perspective-origin:60% 40%;}
.scene{
  position:absolute; top:50px; right:4%; width:min(430px,38%); aspect-ratio:602/672;
  transform-style:preserve-3d; will-change:transform;
  transform:translate3d(0,var(--sy,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.scene .glow{
  position:absolute; inset:-15%; transform:translateZ(-90px);
  background:radial-gradient(circle at 50% 45%, rgba(212,175,55,.32), rgba(212,175,55,.08) 45%, transparent 70%);
}
.scene .phoenix{
  position:absolute; inset:0; width:100%; height:100%; transform:translateZ(50px);
  opacity:.55; animation:phoenixFloat 7s ease-in-out infinite;
  filter:drop-shadow(0 0 22px rgba(212,175,55,.35));
}
@keyframes phoenixFloat{
  0%,100%{transform:translateZ(50px) translateY(0) scale(1);}
  50%{transform:translateZ(50px) translateY(-14px) scale(1.025);}
}
.embers{position:absolute; inset:0; pointer-events:none;}
.embers-back{transform:translateZ(-30px);}
.embers-front{transform:translateZ(130px);}
.embers i{
  position:absolute; bottom:6%; border-radius:50%; opacity:0;
  background:radial-gradient(circle,var(--gold-light),rgba(212,175,55,0) 70%);
  animation:emberRise linear infinite;
}
@keyframes emberRise{
  0%{transform:translate3d(0,0,0) scale(.6); opacity:0;}
  15%{opacity:.9;}
  100%{transform:translate3d(var(--dx,20px),-340px,0) scale(1); opacity:0;}
}
@media(max-width:720px){
  .scene{width:88%; right:-14%; top:30px;}
  .scene .phoenix{opacity:.3;}
}
@media (prefers-reduced-motion: reduce){
  .scene{transform:none;}
  .scene .phoenix{animation:none; transform:none;}
  .embers{display:none;}
}

/* ===== page-wide atmosphere: gradient + 3D shimmer (fades in as you leave the hero) ===== */
body{
  background-color:var(--bg);
  background-image:linear-gradient(180deg,
    #121110 0%, #1a140a 20%, #130f0b 38%, #211809 56%, #130f0b 74%, #1d1509 100%);
}
:root[data-theme="light"] body{background-image:linear-gradient(180deg,#f3ede0,#eee1c4 50%,#f3ede0);}
:root[data-theme="light"] .ambient{display:none;}
header.hero, .services, .numbers, .work, footer{position:relative; z-index:1;}

/* soft gold light pooled behind each section */
.services::before, .numbers::before, .work::before, footer::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; width:100vw; top:0; bottom:0; transform:translateX(-50%);
}
.services::before{background:
  radial-gradient(520px circle at 6% 30%, rgba(212,175,55,.13), transparent 70%),
  radial-gradient(480px circle at 96% 78%, rgba(196,120,30,.12), transparent 70%);}
.numbers::before{background:
  radial-gradient(640px circle at 50% 0%, rgba(212,175,55,.15), transparent 70%),
  radial-gradient(420px circle at 100% 85%, rgba(196,120,30,.10), transparent 70%);}
.work::before{background:
  radial-gradient(560px circle at 88% 35%, rgba(212,175,55,.13), transparent 70%),
  radial-gradient(500px circle at 6% 85%, rgba(196,120,30,.11), transparent 70%);}
footer::before{background:radial-gradient(760px ellipse at 50% 100%, rgba(212,175,55,.22), transparent 70%);}
/* hairline gold dividers between sections */
.numbers:after, .work:after, footer:after{
  content:""; position:absolute; top:0; left:50%; width:min(640px,80vw); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(241,217,137,.4),transparent);
}

/* fixed 3D layer */
.ambient{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  perspective:1000px; perspective-origin:50% 40%; opacity:var(--ao,1);
}
.amb-stage{
  position:absolute; inset:-8%; transform-style:preserve-3d; will-change:transform;
  transform:rotateX(var(--arx,0deg)) rotateY(var(--ary,0deg));
}
.orb{
  position:absolute; width:var(--sz); height:var(--sz); will-change:transform;
  transform:translate3d(calc(var(--vx,0) * var(--kx,0) * 1px), calc(var(--vy,0) * var(--ky,0) * 1px), var(--z,-150px));
}
.orb::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--g);
  animation:orbDrift var(--t,16s) ease-in-out infinite alternate;
}
@keyframes orbDrift{
  from{transform:translate3d(-3%,-2%,0) scale(.95); opacity:.7;}
  to{transform:translate3d(3%,3%,0) scale(1.07); opacity:1;}
}
.o1{--sz:70vmax; top:-8%; left:-18%; --z:-160px; --vx:var(--s1); --vy:var(--c1); --kx:120; --ky:160; --t:17s;
  --g:radial-gradient(closest-side, rgba(212,175,55,.26), rgba(212,175,55,.07) 55%, transparent);}
.o2{--sz:62vmax; top:30%; right:-24%; --z:-260px; --vx:var(--c2); --vy:var(--s2); --kx:-140; --ky:130; --t:21s;
  --g:radial-gradient(closest-side, rgba(204,124,32,.24), rgba(204,124,32,.06) 55%, transparent);}
.o3{--sz:66vmax; top:62%; left:-6%; --z:-200px; --vx:var(--s2); --vy:var(--c1); --kx:150; --ky:-120; --t:19s;
  --g:radial-gradient(closest-side, rgba(241,217,137,.20), rgba(212,175,55,.06) 55%, transparent);}
.o4{--sz:48vmax; top:8%; right:6%; --z:-90px; --vx:var(--c1); --vy:var(--c2); --kx:-90; --ky:90; --t:14s;
  --g:radial-gradient(closest-side, rgba(255,226,150,.14), transparent 70%);}

/* diagonal light sheen sweeping through the depth */
.amb-sheen{
  position:absolute; top:-20%; left:0; width:34vw; height:140%;
  background:linear-gradient(90deg, transparent, rgba(241,217,137,.07) 40%, rgba(255,248,230,.12) 50%, rgba(241,217,137,.07) 60%, transparent);
  transform:translate3d(-60vw,0,-60px) skewX(-18deg); animation:sheenSweep 15s ease-in-out infinite;
}
.amb-sheen.s2{width:18vw; animation-duration:19s; animation-delay:-8s; opacity:.8;}
@keyframes sheenSweep{
  0%{transform:translate3d(-60vw,0,-60px) skewX(-18deg);}
  55%,100%{transform:translate3d(190vw,0,-60px) skewX(-18deg);}
}

/* rising embers + twinkling sparkles at different depths */
.amb-embers, .amb-sparkles{position:absolute; inset:0;}
.amb-embers.back{transform:translateZ(-80px);}
.amb-embers.front{transform:translateZ(120px);}
.amb-sparkles{transform:translateZ(-30px);}
.amb-embers i{
  position:absolute; bottom:-4%; border-radius:50%; opacity:0;
  background:radial-gradient(circle,var(--gold-light),rgba(212,175,55,0) 70%);
  animation:ambRise linear infinite;
}
@keyframes ambRise{
  0%{transform:translate3d(0,0,0) scale(.6); opacity:0;}
  12%{opacity:.85;}
  100%{transform:translate3d(var(--dx,20px),-115vh,0) scale(1); opacity:0;}
}
.amb-sparkles i{
  position:absolute; width:2px; height:2px; border-radius:50%; opacity:0;
  background:var(--gold-light); box-shadow:0 0 6px 1px rgba(241,217,137,.7);
  animation:twinkle ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:0; transform:scale(.4);} 50%{opacity:.9; transform:scale(1.2);}}
@media(max-width:720px){ .o1,.o2,.o3{--sz:90vmax;} .amb-sheen{width:50vw;} }
@media (prefers-reduced-motion: reduce){
  .orb::before, .amb-sheen{animation:none;}
  .amb-sheen, .amb-embers, .amb-sparkles{display:none;}
}