/* hero-holo.css — holographic projector hero animation (home page).
   Extracted from the design into the shared assets/ structure.
   Markup: index.html .hero-visual · Behaviour: assets/js/hero-holo.js */

/* ===== Holographic projector hero visual ===== */
  .hero-visual { position: relative; aspect-ratio: 1 / 1; background: transparent; overflow: visible; }
  .holo { position: absolute; inset: 0; }

  /* ambient glow + faint grid */
  .holo-aura { position: absolute; left: 50%; top: 41%; width: 84%; height: 84%; transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(255,138,30,0.18), rgba(255,138,30,0.05) 46%, transparent 70%);
    filter: blur(8px); pointer-events: none; }
  .holo-grid { position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(66% 58% at 50% 41%, #000 18%, transparent 82%);
    mask-image: radial-gradient(66% 58% at 50% 41%, #000 18%, transparent 82%); }

  /* rise-in group + gentle hologram bob */
  .holo-proj { position: absolute; inset: 0; animation: holoRise 1.25s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes holoRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  .holo-float { position: absolute; inset: 0; animation: holoFloat 6.6s ease-in-out infinite; }
  @keyframes holoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  /* projection light cone — energy streaming up into the sphere */
  .holo-beamwrap { position: absolute; left: 50%; top: 40%; transform: translateX(-50%);
    width: 54%; height: 53%; z-index: 1; mix-blend-mode: screen; pointer-events: none; }
  .beam-cone { position: absolute; inset: 0; overflow: hidden;
    clip-path: polygon(39% 100%, 61% 100%, 93% 0, 7% 0);
    background: linear-gradient(to top, rgba(255,176,72,0.48), rgba(255,138,30,0.12) 46%, transparent 88%);
    filter: blur(3px); animation: beamFlicker 4.2s ease-in-out infinite; }
  .beam-core { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 34%; height: 100%;
    clip-path: polygon(40% 100%, 60% 100%, 70% 0, 30% 0);
    background: linear-gradient(to top, rgba(255,233,186,0.72), rgba(255,170,72,0.15) 52%, transparent 84%);
    filter: blur(2px); mix-blend-mode: screen; animation: beamFlicker 3.2s ease-in-out infinite; }
  .beam-stream { position: absolute; left: -22%; right: -22%; top: -32%; bottom: 0;
    background: repeating-linear-gradient(to top, transparent 0 13px, rgba(255,210,142,0.36) 15px, rgba(255,210,142,0) 24px);
    -webkit-mask-image: linear-gradient(to top, #000 6%, transparent 82%);
    mask-image: linear-gradient(to top, #000 6%, transparent 82%);
    animation: beamStream 2.3s linear infinite; }
  @keyframes beamStream { to { transform: translateY(-24px); } }
  .beam-motes { position: absolute; inset: 0; }
  .beam-motes span { position: absolute; top: 96%; left: calc(50% + var(--x)); width: 4px; height: 4px; margin-left: -2px;
    border-radius: 50%; background: rgba(255,228,180,0.95); box-shadow: 0 0 8px rgba(255,186,98,0.95);
    animation: moteRise var(--dur, 2.8s) linear infinite; animation-delay: var(--del, 0s); opacity: 0; }
  @keyframes moteRise { 0% { top: 96%; opacity: 0; transform: scale(1); } 12% { opacity: 1; } 84% { opacity: 1; } 100% { top: 1%; opacity: 0; transform: scale(0.35); } }
  .beam-flare { position: absolute; left: 50%; bottom: -3%; transform: translateX(-50%); width: 46%; height: 22%; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,226,170,0.95), rgba(255,150,52,0.42) 46%, transparent 72%);
    filter: blur(3px); animation: baseCoreGlow 4.2s ease-in-out infinite; }
  @keyframes beamFlicker { 0%,100% { opacity: .62; } 45% { opacity: .98; } 72% { opacity: .76; } }

  /* dashed data ring the badges sit on */
  .holo-ring { position: absolute; left: 50%; top: 42%; width: 74%; aspect-ratio: 1; transform: translate(-50%,-50%); z-index: 2; }
  .holo-ring svg { width: 100%; height: 100%; overflow: visible; }
  .holo-ring .r-main { fill: none; stroke: rgba(255,160,60,0.42); stroke-width: 0.5; stroke-dasharray: 1.4 2.6; stroke-linecap: round; animation: ringFlow 26s linear infinite; }
  .holo-ring .r-out  { fill: none; stroke: rgba(255,160,60,0.16); stroke-width: 0.35; stroke-dasharray: 0.7 4; stroke-linecap: round; animation: ringFlow 40s linear infinite reverse; }
  @keyframes ringFlow { to { stroke-dashoffset: -120; } }

  /* the sphere */
  .holo-sphere { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%);
    width: 55%; aspect-ratio: 1; border-radius: 50%; z-index: 3; overflow: hidden;
    background:
      radial-gradient(40% 38% at 36% 30%, rgba(255,214,158,0.34), transparent 62%),
      radial-gradient(circle at 50% 50%, rgba(255,138,30,0.12), rgba(255,138,30,0.05) 58%, rgba(8,11,17,0.18) 100%);
    box-shadow: inset 0 0 64px rgba(255,138,30,0.22), inset 0 0 16px rgba(255,214,158,0.16), 0 0 78px rgba(255,138,30,0.24); }
  .holo-sphere::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(255,182,92,0.6); box-shadow: inset 0 0 24px rgba(255,182,92,0.32); pointer-events: none; }
  .sphere-mesh { position: absolute; inset: -10%; border-radius: 50%; opacity: 0.55;
    background:
      repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,188,98,0.15) 23px 24px),
      repeating-linear-gradient(60deg, transparent 0 23px, rgba(255,188,98,0.12) 23px 24px),
      repeating-linear-gradient(-60deg, transparent 0 23px, rgba(255,188,98,0.12) 23px 24px);
    -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 90%);
    mask-image: radial-gradient(circle, #000 58%, transparent 90%);
    animation: meshSpin 48s linear infinite; }
  @keyframes meshSpin { to { transform: rotate(360deg); } }
  .sphere-lines { position: absolute; inset: 7%; z-index: 1; opacity: 0.5; }
  .sphere-lines svg { width: 100%; height: 100%; }
  .sphere-lines ellipse, .sphere-lines circle { fill: none; stroke: rgba(255,196,118,0.5); stroke-width: 0.5; }
  .sphere-lines .spin { animation: meridian 14s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
  @keyframes meridian { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(0.18); } }
  .sphere-scan { position: absolute; left: -4%; right: -4%; height: 16%; top: 80%; z-index: 2;
    background: linear-gradient(to top, transparent, rgba(255,206,138,0.55), transparent); filter: blur(2px);
    animation: scanRise 3.8s ease-in-out infinite; }
  @keyframes scanRise { 0% { top: 82%; opacity: 0; } 14% { opacity: .85; } 86% { opacity: .85; } 100% { top: -8%; opacity: 0; } }

  /* N365 core emblem */
  .sphere-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 62%; aspect-ratio: 120 / 134; z-index: 4; }
  .core-shield { position: absolute; inset: 0; width: 100%; height: 100%;
    filter: drop-shadow(0 0 9px rgba(255,138,30,0.7)); animation: coreGlow 3.4s ease-in-out infinite; }
  .core-shield path { fill: rgba(255,138,30,0.07); stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; }
  .core-text { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%);
    font-family: var(--mono); font-weight: 600; letter-spacing: 0.02em; font-size: clamp(15px, 4.4vw, 27px);
    color: #FFE7C9; text-shadow: 0 0 14px rgba(255,138,30,0.85), 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }
  @keyframes coreGlow { 0%,100% { filter: drop-shadow(0 0 7px rgba(255,138,30,0.55)); } 50% { filter: drop-shadow(0 0 16px rgba(255,138,30,0.9)); } }

  /* capability badges */
  .holo-node { position: absolute; transform: translate(-50%,-50%); z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 7px; }
  .holo-node .nf { display: flex; flex-direction: column; align-items: center; gap: 7px; animation: nodeFloat 6s ease-in-out infinite; }
  .holo-node .nb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--accent);
    background: radial-gradient(circle at 50% 32%, rgba(22,28,40,0.97), rgba(9,13,19,0.97));
    border: 1px solid rgba(255,176,76,0.5);
    box-shadow: 0 0 0 4px rgba(255,138,30,0.05), 0 0 18px rgba(255,138,30,0.26), inset 0 0 10px rgba(255,138,30,0.12);
    animation: nodeGlow 3.6s ease-in-out infinite; }
  .holo-node .nb svg { width: 22px; height: 22px; }
  .holo-node .nl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-soft); text-align: center; max-width: 84px; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
  @keyframes nodeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes nodeGlow {
    0%,100% { box-shadow: 0 0 0 4px rgba(255,138,30,0.04), 0 0 13px rgba(255,138,30,0.20), inset 0 0 10px rgba(255,138,30,0.12); }
    50%     { box-shadow: 0 0 0 5px rgba(255,138,30,0.09), 0 0 27px rgba(255,138,30,0.42), inset 0 0 12px rgba(255,138,30,0.22); }
  }

  /* projector base / podium */
  .holo-base { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); width: 62%; z-index: 2; }
  .base { position: relative; width: 100%; aspect-ratio: 3 / 1; }
  .base .layer { position: absolute; left: 0; right: 0; border-radius: 50%; }
  .base .b-shadow { top: 46%; height: 60%; background: rgba(0,0,0,0.55); filter: blur(14px); }
  .base .b-body { top: 30%; height: 70%; background: linear-gradient(180deg, #1b2433, #0b0f17); box-shadow: 0 18px 34px -12px rgba(0,0,0,0.7); }
  .base .b-top { top: 0; height: 72%; background: radial-gradient(74% 130% at 50% 0%, #2c374b, #161d2b 58%, #0d121c 100%); border: 1px solid rgba(255,182,92,0.2); }
  .base .b-rim { top: 9%; left: 9%; right: 9%; height: 54%; border: 1px solid rgba(255,182,92,0.42); box-shadow: inset 0 0 16px rgba(255,138,30,0.28); }
  .base .b-core { top: 19%; left: 31%; right: 31%; height: 38%;
    background: radial-gradient(circle, rgba(255,200,128,0.95), rgba(255,138,30,0.34) 54%, transparent 76%);
    filter: blur(1px); animation: baseCoreGlow 4.2s ease-in-out infinite; }
  @keyframes baseCoreGlow { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
  .base .dot { width: 6px; height: 6px; border-radius: 50%; background: #FFB45A; box-shadow: 0 0 9px var(--accent); transform: translate(-50%,-50%); animation: dotPulse 2.6s ease-in-out infinite; }
  @keyframes dotPulse { 0%,100% { opacity: .55; box-shadow: 0 0 6px var(--accent); } 50% { opacity: 1; box-shadow: 0 0 13px var(--accent); } }

  /* hover: emphasise hovered badge, dim the rest */
  .holo-node { transition: opacity .4s ease .45s, transform .55s cubic-bezier(.34,1.25,.5,1) .45s; }
  .holo-node .nf { transition: opacity .25s ease, filter .25s ease; }
  .holo-node .nb { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .holo-node:hover, .holo-node:focus-visible { z-index: 9; outline: none; cursor: pointer; }
  .holo-node:hover .nf, .holo-node:focus-visible .nf { animation-play-state: paused; }
  .holo-node:hover .nb, .holo-node:focus-visible .nb {
    animation: none; transform: scale(1.14);
    border-color: rgba(255,206,140,0.95);
    box-shadow: 0 0 0 5px rgba(255,138,30,0.12), 0 0 30px rgba(255,138,30,0.6), inset 0 0 14px rgba(255,138,30,0.32); }
  .holo-node:hover .nl, .holo-node:focus-visible .nl { color: var(--accent); }
  .holo-proj:has(.holo-node:hover) .holo-node:not(:hover) .nf { opacity: .36; filter: saturate(.5); }
  .holo-proj:has(.holo-node:hover) .holo-sphere { opacity: .72; transition: opacity .3s ease; }

  /* hovered-solution readout HUD */
  .holo-readout { position: absolute; left: 50%; bottom: 20%; transform: translate(-50%, 10px); z-index: 8;
    width: min(80%, 296px); display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 13px;
    background: linear-gradient(180deg, rgba(20,26,37,0.94), rgba(10,14,20,0.95)); backdrop-filter: blur(9px);
    border: 1px solid rgba(255,176,76,0.42);
    box-shadow: 0 20px 44px -18px rgba(0,0,0,0.85), 0 0 26px rgba(255,138,30,0.16), inset 0 0 14px rgba(255,138,30,0.06);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, transform .36s cubic-bezier(.2,.7,.2,1), visibility .28s; }
  .holo-readout.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .holo-readout .ro-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; color: var(--accent);
    background: radial-gradient(circle at 50% 32%, rgba(22,28,40,0.97), rgba(9,13,19,0.97)); border: 1px solid rgba(255,176,76,0.5); box-shadow: 0 0 16px rgba(255,138,30,0.3); }
  .holo-readout .ro-ic svg { width: 20px; height: 20px; }
  .holo-readout .ro-tx { min-width: 0; }
  .holo-readout .ro-name { display: block; font-size: 13px; font-weight: 600; color: #FFE7C9; letter-spacing: 0.01em; }
  .holo-readout .ro-name::after { content: ""; display: block; height: 2px; width: 0; margin-top: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), transparent); transition: width .42s ease .08s; }
  .holo-readout.show .ro-name::after { width: 40px; }
  .holo-readout .ro-desc { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--ink-soft);
    clip-path: inset(0 100% 0 0); transition: clip-path .52s cubic-bezier(.2,.7,.2,1) .12s; }
  .holo-readout.show .ro-desc { clip-path: inset(0 0 0 0); }
  /* ===== hologram power switch — small power node on the base ===== */
  .holo-switch { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); z-index: 11;
    width: 28px; height: 28px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: radial-gradient(circle at 50% 34%, rgba(32,40,55,0.98), rgba(9,13,19,0.98));
    border: 1px solid rgba(255,176,76,0.5); -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, border-color .3s ease; }
  .holo-switch:active { transform: translateX(-50%) scale(.9); }
  .holo-switch:focus-visible { outline: 2px solid rgba(255,176,76,0.75); outline-offset: 3px; }
  .holo-switch svg { width: 14px; height: 14px; transition: stroke .3s ease; }
  .holo-switch .pw { fill: none; stroke-width: 2; stroke-linecap: round; }
  /* ON — amber breathing glow */
  .holo-switch[aria-checked="true"] .pw { stroke: #FFB45A; }
  .holo-switch[aria-checked="true"] { animation: swOn 2.2s ease-in-out infinite; }
  @keyframes swOn {
    0%,100% { border-color: rgba(255,176,76,0.5); box-shadow: 0 5px 12px -6px rgba(0,0,0,0.8), 0 0 5px rgba(255,138,30,0.45), inset 0 0 4px rgba(255,138,30,0.25); }
    50%     { border-color: rgba(255,200,120,0.95); box-shadow: 0 5px 12px -6px rgba(0,0,0,0.8), 0 0 17px rgba(255,138,30,0.95), inset 0 0 8px rgba(255,184,96,0.6); }
  }
  /* OFF — red standby blink */
  .holo-switch[aria-checked="false"] .pw { stroke: #FF6A6A; }
  .holo-switch[aria-checked="false"] { animation: swOff 1.7s steps(1, end) infinite; }
  @keyframes swOff {
    0%, 55%  { border-color: rgba(255,90,90,0.78); box-shadow: 0 5px 12px -6px rgba(0,0,0,0.8), 0 0 11px rgba(255,80,80,0.78), inset 0 0 5px rgba(255,80,80,0.35); }
    56%,100% { border-color: rgba(255,90,90,0.22); box-shadow: 0 5px 12px -6px rgba(0,0,0,0.8), 0 0 1px rgba(255,80,80,0.1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .holo-switch[aria-checked="true"], .holo-switch[aria-checked="false"] { animation: none; }
    .holo-switch[aria-checked="true"] { box-shadow: 0 0 12px rgba(255,138,30,0.7); }
    .holo-switch[aria-checked="false"] { box-shadow: 0 0 9px rgba(255,80,80,0.6); }
  }

  /* ===== power on/off: ball rises from / sinks into the base ===== */
  .holo-sphere { transition: transform .85s cubic-bezier(.34,1.16,.42,1) .1s, opacity .6s ease .1s, box-shadow .6s ease; }
  .holo-ring { transition: opacity .55s ease .42s; }
  .holo-beamwrap { transition: opacity .5s ease 0s; }
  .holo-off .holo-sphere { transform: translate(-50%, 72%) scale(0.12); opacity: 0; transition-delay: .22s, .1s, 0s; }
  .holo-off .holo-ring { opacity: 0; transition-delay: 0s; }
  .holo-off .holo-beamwrap { opacity: 0; transition-delay: .36s; }
  .holo-off .holo-node { opacity: 0; transform: translate(-50%,-50%) scale(.6); pointer-events: none; transition-delay: 0s; }
  .holo-off .holo-float { animation-play-state: paused; }
  .holo-off .base .b-core { animation: none; opacity: .12; transition: opacity .5s ease; }
  .holo-off .base .dot { animation: none; opacity: .3; transition: opacity .5s ease; }
  .holo-off .holo-readout { opacity: 0 !important; visibility: hidden !important; }

  @media (prefers-reduced-motion: reduce) {
    .holo-node, .holo-node .nb { transition: none; }
    .holo-readout { transition: opacity .15s ease; }
    .holo-readout .ro-desc { clip-path: none; transition: none; }
    .holo-readout .ro-name::after { transition: none; }
  }