/* Magic layer over the hologram: lilac and gold sparks with a cyan core.
   Only transform and opacity animate. Every glow change is a static value swap. */

/* ── Stage and copy become the 3D frames for the spins. ── */
.nm-portrait-stage{perspective:1000px}

/* ── Shared effect container. Sits at the centre of its target and has no size. ── */
.nm-magic{position:absolute;width:0;height:0;pointer-events:none}
.nm-copy .nm-magic{left:var(--fx-x,45%);top:var(--fx-y,26%);z-index:4}
.nm-portrait-stage .nm-magic{left:50%;z-index:3}
.nm-magic[data-magic="circle"]{top:47%}
.nm-magic[data-magic="portrait"]{top:45%}
.nm-magic span{position:absolute;left:0;top:0}

/* ── Sparks: four-point stars, cyan core into gold into lilac. ── */
.nm-spark{--k:1}
.nm-spark i{position:absolute;left:0;top:0;width:calc(var(--s,12px) * var(--k));height:calc(var(--s,12px) * var(--k));
  margin:calc(var(--s,12px) * var(--k) / -2) 0 0 calc(var(--s,12px) * var(--k) / -2);opacity:0;
  background:radial-gradient(circle at 50% 50%,#e8fbff 0 10%,#bfefff 20%,#ffe6a8 44%,#d9c8ff 78%,#c4a9ff 100%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  filter:drop-shadow(0 0 4px #ffdf9edd) drop-shadow(0 0 11px #b28cffcc);
  transform:rotate(var(--a,0deg)) translateX(6px) scale(.2)}
.nm-spark i:nth-child(1){--a:-96deg;--d:152px;--s:17px;--t:0s}
.nm-spark i:nth-child(2){--a:-52deg;--d:118px;--s:13px;--t:.05s}
.nm-spark i:nth-child(3){--a:-19deg;--d:162px;--s:12px;--t:.02s}
.nm-spark i:nth-child(4){--a:13deg;--d:112px;--s:15px;--t:.09s}
.nm-spark i:nth-child(5){--a:47deg;--d:145px;--s:11px;--t:.04s}
.nm-spark i:nth-child(6){--a:79deg;--d:99px;--s:16px;--t:.12s}
.nm-spark i:nth-child(7){--a:112deg;--d:150px;--s:12px;--t:.01s}
.nm-spark i:nth-child(8){--a:146deg;--d:120px;--s:15px;--t:.08s}
.nm-spark i:nth-child(9){--a:171deg;--d:134px;--s:11px;--t:.15s}
.nm-spark i:nth-child(10){--a:-141deg;--d:107px;--s:14px;--t:.06s}
.nm-spark i:nth-child(11){--a:-119deg;--d:140px;--s:12px;--t:.17s}
.nm-spark i:nth-child(12){--a:-71deg;--d:94px;--s:16px;--t:.11s}
.nm-spark i:nth-child(13){--a:27deg;--d:78px;--s:11px;--t:.19s}
.nm-spark i:nth-child(14){--a:133deg;--d:86px;--s:13px;--t:.14s}
@keyframes nmSparkFly{
  0%{opacity:0;transform:rotate(var(--a,0deg)) translateX(6px) scale(.2)}
  12%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:rotate(var(--a,0deg)) translateX(calc(var(--d,120px) * var(--k))) scale(.5)}
}
.nm-magic.is-spinning .nm-spark i{animation:nmSparkFly 1.2s cubic-bezier(.15,.7,.3,1) var(--t,0s) both}

/* ── Pulse ring: one thin lilac circle opens out of the target. ── */
.nm-ring{width:220px;height:220px;margin:-110px 0 0 -110px;border:1px solid #ded2ff;border-radius:50%;opacity:0;transform:scale(.3);box-shadow:0 0 16px #b9a6ffaa,inset 0 0 20px #b9a6ff4d}
@keyframes nmRingOut{0%{opacity:0;transform:scale(.3)}18%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.nm-magic.is-spinning .nm-ring{animation:nmRingOut 1s cubic-bezier(.2,.7,.2,1) both}

/* ── Charge: light points gather inward before the turn. ── */
.nm-charge i{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#ffffff 0 28%,#ffe6a8 58%,#c9b3ff00 100%);box-shadow:0 0 9px #ffe6a8aa,0 0 18px #c9b3ff88;
  transform:rotate(var(--a,0deg)) translateX(var(--cd,90px))}
.nm-charge i:nth-child(1){--a:-84deg;--cd:96px}
.nm-charge i:nth-child(2){--a:-26deg;--cd:80px}
.nm-charge i:nth-child(3){--a:38deg;--cd:104px}
.nm-charge i:nth-child(4){--a:96deg;--cd:86px}
.nm-charge i:nth-child(5){--a:158deg;--cd:100px}
.nm-charge i:nth-child(6){--a:-146deg;--cd:88px}
@keyframes nmChargeIn{
  0%{opacity:0;transform:rotate(var(--a,0deg)) translateX(var(--cd,90px)) scale(.5)}
  35%{opacity:1}
  100%{opacity:0;transform:rotate(var(--a,0deg)) translateX(8px) scale(1.15)}
}
.nm-magic.is-casting .nm-charge i{animation:nmChargeIn .4s ease-in both}

/* ── Title: each glyph turns on the horizontal axis, a wave down the line. ── */
.nm-word{display:inline-block;white-space:nowrap}
/* transition is a one-time settle when the phase class drops (never a constant animation). */
.nm-letter{display:inline-block;white-space:pre;transition:text-shadow 1s ease-out}
.nm-hero .nm-copy h1 .nm-word,.nm-hero .nm-copy h1 .nm-letter{color:inherit;text-shadow:inherit}
@keyframes nmLetterFlip{from{transform:perspective(950px) rotateX(0)}to{transform:perspective(950px) rotateX(360deg)}}
.nm-copy[data-cast="title"].is-spinning .nm-letter{animation:nmLetterFlip 1s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 26ms) both;
  text-shadow:0 0 4px #ffffffcc,0 0 18px #d5ecff,0 0 40px #b9a6ffaa,0 0 72px #ffd98a55}

/* ── Circle: the disc turns on the vertical axis and catches light edge-on. ── */
@keyframes nmCircleFlip{from{transform:translate(-50%,-50%) rotateY(0)}to{transform:translate(-50%,-50%) rotateY(360deg)}}
.nm-portrait-stage[data-cast="circle"].is-spinning .nm-circle{animation:nmCircleFlip 1.4s cubic-bezier(.2,.7,.2,1) both}
/* transition only (the base filter value stays in new-model-countdown.css / -display.css untouched);
   this is what lets the drop-shadow ease back out instead of vanishing the instant the phase ends. */
.nm-circle{transition:filter 1s ease-out}
.nm-portrait-stage[data-cast="circle"].is-casting .nm-circle,
.nm-portrait-stage[data-cast="circle"].is-spinning .nm-circle,
.nm-portrait-stage[data-cast="circle"].is-afterglow .nm-circle{filter:drop-shadow(0 0 5px #b7d4ffcc) drop-shadow(0 0 16px #a08cff8c)}
.nm-flash{width:16px;height:560px;margin:-280px 0 0 -8px;opacity:0;filter:blur(5px);
  background:linear-gradient(180deg,transparent,#cfe4ff88 12%,#eaf6ff 34%,#ffffff 50%,#eaf6ff 66%,#cfe4ff88 88%,transparent)}
@keyframes nmEdgeFlash{0%,15%{opacity:0}25%{opacity:.9}36%,64%{opacity:0}75%{opacity:.72}86%,100%{opacity:0}}
.nm-magic.is-spinning .nm-flash{animation:nmEdgeFlash 1.4s linear both}

/* ── Silhouette: the frame turns on the vertical axis and thins out edge-on. ── */
@keyframes nmPortraitFlip{0%{transform:rotateY(0);opacity:1}25%{opacity:.38}50%{transform:rotateY(180deg);opacity:1}75%{opacity:.38}100%{transform:rotateY(360deg);opacity:1}}
.nm-portrait-stage[data-cast="portrait"].is-spinning .nm-portrait-frame{animation:nmPortraitFlip 1.4s cubic-bezier(.2,.7,.2,1) both}

/* ── Silhouette's extra halo while it casts: a layer of our own (not .nm-portrait-light,
   which already runs the constant nmBreath animation in new-model-countdown.css — an
   animation always wins over a transition on the same property, so that element's
   opacity could never be eased). This one only ever fades in and out via transition. ── */
.nm-portrait-stage::after{content:"";position:absolute;inset:5% -14% 3%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,#ffe9c25c 0%,#c9b3ff42 32%,transparent 68%);
  filter:blur(22px);opacity:0;transition:opacity 1s ease-out}
.nm-portrait-stage[data-cast="portrait"].is-casting::after,
.nm-portrait-stage[data-cast="portrait"].is-spinning::after,
.nm-portrait-stage[data-cast="portrait"].is-afterglow::after{opacity:1}

/* ── Quiet magic that is always there: slow rising stars around the silhouette. ── */
.nm-aura{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.nm-aura i{position:absolute;width:9px;height:9px;opacity:0;
  background:radial-gradient(circle,#f7ecff 0 16%,#ffe6a8 46%,#c9b3ff 82%,#c9b3ff 100%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  filter:drop-shadow(0 0 5px #cbb8ffaa);
  animation:nmAuraDrift 15s ease-in-out infinite}
.nm-aura i:nth-child(1){left:18%;top:62%;animation-duration:14s;animation-delay:-2s}
.nm-aura i:nth-child(2){left:76%;top:38%;animation-duration:17s;animation-delay:-9s;width:7px;height:7px}
.nm-aura i:nth-child(3){left:34%;top:26%;animation-duration:12s;animation-delay:-5s;width:11px;height:11px}
.nm-aura i:nth-child(4){left:83%;top:72%;animation-duration:18s;animation-delay:-13s}
.nm-aura i:nth-child(5){left:12%;top:34%;animation-duration:16s;animation-delay:-7s;width:7px;height:7px}
.nm-aura i:nth-child(6){left:62%;top:83%;animation-duration:13s;animation-delay:-11s;width:10px;height:10px}
@keyframes nmAuraDrift{
  0%{opacity:0;transform:translate3d(0,20px,0) scale(.6)}
  14%{opacity:.62}
  52%{opacity:.7}
  74%{opacity:.32}
  100%{opacity:0;transform:translate3d(7px,-74px,0) scale(.95)}
}

/* ── Phones: fewer sparks, a shorter edge flash, the same turns. ── */
@media(max-width:800px){
  .nm-spark{--k:.72}
  .nm-spark i:nth-child(n+9){display:none}
  .nm-ring{width:170px;height:170px;margin:-85px 0 0 -85px}
  .nm-flash{height:430px;margin-top:-215px}
  .nm-aura i{width:7px;height:7px}
  .nm-portrait-stage::after{inset:0 -15% 0}
  .nm-charge i:nth-child(1){--cd:74px}.nm-charge i:nth-child(2){--cd:62px}.nm-charge i:nth-child(3){--cd:80px}
  .nm-charge i:nth-child(4){--cd:66px}.nm-charge i:nth-child(5){--cd:78px}.nm-charge i:nth-child(6){--cd:68px}
}

/* ── Reduced motion: the sequencer never starts; the quiet stars simply rest. ── */
@media(prefers-reduced-motion:reduce){
  .nm-aura i{opacity:.45;animation:none!important;transform:none}
  .nm-magic{display:none}
}