/* Foto Neon — inline 3D neon sign, scoped under .sign3d so it can live directly
   in the page (no iframe). Ported from the user's standalone 3D sign. */
.sign3d {
  --g: 1;
  --size: clamp(240px, 34vw, 400px);
  --pink: #ff2e9a;  --pink-deep: #ff1184;  --pink-lite: #ffe0f1;  --pink-glass: #45102b;
  --blue: #2f8bff;  --cyan: #36c8ff;       --blue-lite: #e2f0ff;  --blue-glass: #112742;
  --bolt: #ffae22;  --bolt-deep: #ff5e1a;  --bolt-lite: #fff0c8;  --bolt-glass: #3a2410;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 0 auto;
  font-family: "Fredoka", system-ui, sans-serif;
}

/* colored light bleeding onto the surroundings */
.sign3d .wall-glow {
  position: absolute; left: 50%; top: 50%; width: 165%; height: 165%;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0; opacity: 0.9;
  background:
    radial-gradient(28% 20% at 50% 33%, rgba(255,46,154,0.30), transparent 70%),
    radial-gradient(30% 22% at 50% 52%, rgba(47,139,255,0.28), transparent 72%),
    radial-gradient(22% 14% at 50% 70%, rgba(255,178,31,0.20), transparent 72%);
  filter: blur(28px);
  animation: s3wallhum 3.8s ease-in-out infinite;
}
.sign3d .scene:not(.do-hum) ~ .wall-glow { animation: none; }
@keyframes s3wallhum { 0%,100% { opacity: 0.78; } 50% { opacity: 1; } }

/* 3D scene */
.sign3d .scene { position: absolute; inset: 0; perspective: 1200px; z-index: 2; }
.sign3d .float { position: absolute; inset: 0; transform-style: preserve-3d; animation: s3floaty 9s ease-in-out infinite; }
.sign3d .scene:not(.do-float) .float { animation: none; }
@keyframes s3floaty { 0%,100% { transform: rotateY(-11deg) rotateX(6deg); } 50% { transform: rotateY(11deg) rotateX(-4deg); } }
.sign3d .sign { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform 0.2s var(--ease); cursor: pointer; }

.sign3d .contact { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.7), transparent 72%); filter: blur(26px); transform: translateZ(-60px) scale(1.06); }
.sign3d .plate-back { position: absolute; inset: 1%; border-radius: 50%; background: radial-gradient(60% 60% at 50% 45%, #0b0e18, #05060c); transform: translateZ(-30px); box-shadow: 0 0 0 2px #15192a, 0 30px 50px rgba(0,0,0,0.6); }
.sign3d .rim { position: absolute; inset: 1%; border-radius: 50%; background: conic-gradient(from 0deg, #1a1f33, #0a0d18, #20263d, #0a0d18, #1a1f33, #0b0e1a, #20263d, #0a0d18, #1a1f33); transform: translateZ(-15px) scale(1.005); }
.sign3d .plate { position: absolute; inset: 1%; border-radius: 50%; background: radial-gradient(58% 58% at 50% 42%, #161b2e 0%, #0c1020 60%, #080b16 100%); box-shadow: inset 0 0 0 2px rgba(120,140,190,0.18), inset 0 0 0 6px rgba(8,11,22,0.9), inset 0 8px 30px rgba(0,0,0,0.6); overflow: hidden; }
.sign3d .plate::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(rgba(255,255,255,0.05), transparent); pointer-events: none; }
.sign3d .board-bleed { position: absolute; inset: 1%; border-radius: 50%; transform: translateZ(6px); pointer-events: none; background: radial-gradient(34% 16% at 50% 34%, rgba(255,46,154,0.55), transparent 70%), radial-gradient(36% 18% at 50% 55%, rgba(54,140,255,0.5), transparent 72%), radial-gradient(24% 12% at 50% 73%, rgba(255,178,31,0.42), transparent 72%); filter: blur(11px); }

.sign3d .stud { position: absolute; width: calc(var(--size) * 0.028); height: calc(var(--size) * 0.028); border-radius: 50%; background: radial-gradient(40% 40% at 38% 32%, #cfd6e6, #767d92 42%, #2a3042 78%, #11141f); box-shadow: 0 1px 2px rgba(0,0,0,0.7), inset 0 0 2px rgba(0,0,0,0.6); transform: translateZ(8px); }
.sign3d .stud.t { left: 50%; top: 7%;  margin-left: calc(var(--size) * -0.014); }
.sign3d .stud.b { left: 50%; bottom: 7%; margin-left: calc(var(--size) * -0.014); }
.sign3d .stud.l { top: 50%; left: 7%;  margin-top: calc(var(--size) * -0.014); }
.sign3d .stud.r { top: 50%; right: 7%; margin-top: calc(var(--size) * -0.014); }

.sign3d .ring-unlit, .sign3d .ring-lit { position: absolute; inset: calc(var(--size) * 0.05); border-radius: 50%; }
.sign3d .ring-unlit { border: calc(var(--size) * 0.009) solid #123040; transform: translateZ(16px); }
.sign3d .ring-lit { border: calc(var(--size) * 0.007) solid var(--cyan); transform: translateZ(18px); box-shadow: 0 0 calc(6px * var(--g)) var(--cyan), 0 0 calc(16px * var(--g)) rgba(54,200,255,0.85), inset 0 0 calc(10px * var(--g)) rgba(54,200,255,0.65); }

.sign3d .art { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--size) * 0.006); transform-style: preserve-3d; }
.sign3d .word { position: relative; transform-style: preserve-3d; font-weight: 600; line-height: 0.92; letter-spacing: 0.03em; text-transform: uppercase; font-size: calc(var(--size) * 0.225); }
.sign3d .word .glass, .sign3d .word .lit { display: block; }
.sign3d .word .lit { position: absolute; inset: 0; transform: translateZ(13px); }
.sign3d .pink .glass { color: var(--pink-glass); -webkit-text-stroke: 1px rgba(255,120,190,0.18); }
.sign3d .blue .glass { color: var(--blue-glass); -webkit-text-stroke: 1px rgba(120,190,255,0.18); }
.sign3d .pink .lit { color: var(--pink-lite); text-shadow: 0 0 calc(2px * var(--g)) #fff, 0 0 calc(7px * var(--g)) var(--pink), 0 0 calc(15px * var(--g)) var(--pink), 0 0 calc(30px * var(--g)) var(--pink-deep), 0 0 calc(54px * var(--g)) rgba(255,46,154,0.6); }
.sign3d .blue .lit { color: var(--blue-lite); text-shadow: 0 0 calc(2px * var(--g)) #fff, 0 0 calc(7px * var(--g)) var(--cyan), 0 0 calc(15px * var(--g)) var(--blue), 0 0 calc(30px * var(--g)) var(--blue), 0 0 calc(54px * var(--g)) rgba(47,139,255,0.55); }

.sign3d .bolt { position: absolute; left: 53%; top: 49%; width: calc(var(--size) * 0.17); transform: translate(-50%, -50%) translateZ(22px); transform-style: preserve-3d; z-index: 5; }
.sign3d .bolt svg { display: block; width: 100%; height: auto; overflow: visible; }
.sign3d .bolt .b-glass { transform: translateZ(0); }
.sign3d .bolt .b-glass path { fill: var(--bolt-glass); stroke: rgba(255,170,60,0.2); stroke-width: 2.5; }
.sign3d .bolt .b-lit { position: absolute; inset: 0; transform: translateZ(6px); filter: drop-shadow(0 0 calc(4px * var(--g)) var(--bolt)) drop-shadow(0 0 calc(13px * var(--g)) var(--bolt-deep)) drop-shadow(0 0 calc(28px * var(--g)) rgba(255,94,26,0.7)); }
.sign3d .bolt .b-lit path { fill: url(#boltGrad); stroke: rgba(255,240,200,0.55); stroke-width: 1.5; stroke-linejoin: round; }

/* hum */
.sign3d .lit, .sign3d .ring-lit, .sign3d .b-lit, .sign3d .board-bleed { animation: s3hum 3.8s ease-in-out infinite; }
.sign3d .scene:not(.do-hum) .lit, .sign3d .scene:not(.do-hum) .ring-lit, .sign3d .scene:not(.do-hum) .b-lit, .sign3d .scene:not(.do-hum) .board-bleed { animation: none; }
@keyframes s3hum { 0%,100% { filter: brightness(0.97); } 50% { filter: brightness(1.08); } }
.sign3d .b-lit { animation: none; }

/* power-on ignition */
.sign3d .sign.play .pink .lit  { animation: s3ignite 1.5s var(--ease) 0.10s both; }
.sign3d .sign.play .blue .lit  { animation: s3ignite 1.5s var(--ease) 0.55s both; }
.sign3d .sign.play .b-lit      { animation: s3ignite 1.4s var(--ease) 1.0s both; }
.sign3d .sign.play .ring-lit   { animation: s3igniteRing 1.7s var(--ease) both; }
.sign3d .sign.play .board-bleed{ animation: s3igniteSoft 1.7s var(--ease) both; }
@keyframes s3ignite { 0%{opacity:0;}6%{opacity:.85;}9%{opacity:.08;}14%{opacity:.9;}18%{opacity:.2;}24%{opacity:1;}28%{opacity:.35;}33%{opacity:1;}100%{opacity:1;} }
@keyframes s3igniteRing { 0%{opacity:0;}42%{opacity:.15;}56%{opacity:1;}63%{opacity:.25;}100%{opacity:1;} }
@keyframes s3igniteSoft { 0%{opacity:0;}60%{opacity:.2;}100%{opacity:1;} }

/* ambient flicker + bolt flash while idle */
.sign3d .scene.do-flicker .sign:not(.play) .pink .lit { animation: s3hum 3.8s ease-in-out infinite, s3flickA 9s linear 2s infinite; }
.sign3d .scene.do-flicker .sign:not(.play) .blue .lit { animation: s3hum 3.8s ease-in-out infinite, s3flickB 12s linear 5s infinite; }
@keyframes s3flickA { 0%,40%,42%,91%,93%,100%{opacity:1;}41%{opacity:.25;}92%{opacity:.5;}92.4%{opacity:1;} }
@keyframes s3flickB { 0%,66%,69%,100%{opacity:1;}67%{opacity:.2;}67.5%{opacity:1;}68.2%{opacity:.45;} }
.sign3d .scene.do-bolt .sign:not(.play) .b-lit { animation: s3boltFlash 5.5s ease-in-out 1.5s infinite; }
@keyframes s3boltFlash {
  0%,87%,100% { filter: drop-shadow(0 0 calc(4px * var(--g)) var(--bolt)) drop-shadow(0 0 calc(12px * var(--g)) var(--bolt-deep)) drop-shadow(0 0 calc(26px * var(--g)) rgba(255,171,18,0.65)); }
  90% { filter: drop-shadow(0 0 calc(8px * var(--g)) #fff) drop-shadow(0 0 calc(24px * var(--g)) var(--bolt)) drop-shadow(0 0 calc(48px * var(--g)) var(--bolt-deep)); }
  92% { filter: brightness(1.5) drop-shadow(0 0 calc(5px * var(--g)) var(--bolt)); }
}

@media (prefers-reduced-motion: reduce) {
  .sign3d .float, .sign3d .wall-glow, .sign3d .lit, .sign3d .ring-lit, .sign3d .b-lit, .sign3d .board-bleed,
  .sign3d .scene.do-flicker .sign .lit, .sign3d .scene.do-bolt .sign .b-lit { animation: none !important; opacity: 1 !important; }
}