/* ── 3dViewer.css ── */

:root {
    --gradientColor1: rgba(236, 72, 153, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #1a1a1a;
  overflow: hidden;
}

canvas {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
}

canvas.blurred {
  filter: blur(8px);
}

.prans3d
{
    transition: 1s linear(0, 0.0071, 0.0269, 0.0571, 0.0958, 0.141, 0.1912, 0.2448, 0.3007, 0.3577, 0.4148, 0.4712, 0.5263, 0.5794, 0.6303, 0.6784, 0.7236, 0.7656, 0.8045, 0.84, 0.8724, 0.9015, 0.9275, 0.9505, 0.9706, 0.9881, 1.003, 1.0156, 1.0261, 1.0346, 1.0413, 1.0464, 1.05, 1.0524, 1.0537, 1.0541, 1.0537, 1.0526, 1.0509, 1.0488, 1.0463, 1.0436, 1.0407, 1.0376, 1.0345, 1.0314, 1.0284, 1.0254, 1.0226, 1.0198, 1.0172, 1.0148, 1.0125, 1.0104, 1.0085, 1.0068, 1.0052, 1.0038, 1.0026, 1.0015, 1.0006, 0.9998, 0.9991, 0.9986, 0.9981, 0.9977, 0.9975, 0.9973, 0.9972, 0.9971, 0.9971, 0.9971, 0.9972, 0.9973, 0.9974, 0.9975, 0.9977, 0.9978, 0.998, 0.9981, 0.9983, 0.9985, 0.9986, 0.9988, 0.9989, 0.9991, 0.9992, 0.9993, 0.9994, 0.9995, 0.9996, 0.9997, 0.9998, 0.9999, 0.9999, 1, 1, 1.0001, 1.0001, 1.0001, 1);
}

.transmooth
{
  transition: 0.4s linear(0, 0.067, 0.1294, 0.1877, 0.2421, 0.2929, 0.3402, 0.3844, 0.4257, 0.4641, 0.5, 0.5335, 0.5647, 0.5939, 0.6211, 0.6464, 0.6701, 0.6922, 0.7128, 0.7321, 0.75, 0.7667, 0.7824, 0.7969, 0.8105, 0.8232, 0.8351, 0.8461, 0.8564, 0.866, 0.875, 0.8834, 0.8912, 0.8985, 0.9053, 0.9116, 0.9175, 0.9231, 0.9282, 0.933, 0.9375, 0.9417, 0.9456, 0.9492, 0.9526, 0.9558, 0.9588, 0.9615, 0.9641, 0.9665, 0.9688, 0.9708, 0.9728, 0.9746, 0.9763, 0.9779, 0.9794, 0.9808, 0.9821, 0.9833, 0.9844, 0.9854, 0.9864, 0.9873, 0.9882, 0.989, 0.9897, 0.9904, 0.991, 0.9916, 0.9922, 0.9927, 0.9932, 0.9937, 0.9941, 0.9945, 0.9948, 0.9952, 0.9955, 0.9958, 0.9961, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9976, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 0.999, 1);
}

/* ── Loading overlay ── */
#loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: rgba(0, 0, 0, 0.35);
  transition: opacity 0.4s ease;
}

#loading h3 {
  color: #fff;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 20px;
  font-weight: 500;
}

/* FPS hint overlay */
#fps-hint {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}
#fps-hint span {
  background: rgba(11,18,32,0.75);
  color: rgba(56,189,248,0.9);
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 0.95rem;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid rgba(56,189,248,0.25);
  backdrop-filter: blur(6px);
}

/* Mobile joystick */
#joy-wrap {
  position: fixed;
  bottom: 48px;
  left: 8px;
  z-index: 20;
  touch-action: none;
}
#joy-base {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(11,18,32,0.5);
  border: 2px solid rgba(56,189,248,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#joy-knob {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(56,189,248,0.45);
  border: 1px solid rgba(56,189,248,0.7);
  pointer-events: none;
  transition: transform 0.05s;
}


#callButton {
    width: 60%;
    max-width: 280px;
    padding: 1rem 0;
    border-radius: 16px;

    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    z-index: 20;

    background-color: rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ── iOS-style light control widget ── */
#light-panel {
    bottom: 128px;
    width: 100%;

    position: fixed;

    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    z-index: 20;
}

#light-label {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#light-pad {
  width: 120px;
  height: 120px;
  inset: 0;
  border-radius: 50%;
  position: fixed;
  cursor: grab;
  touch-action: none;

  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);

  transition: box-shadow 0.2s ease;
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
}

#light-pad:active {
  cursor: grabbing;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#light-pad::before,
#light-pad::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 1px;
  pointer-events: none;
}

#light-pad::before {
  width: 1px;
  height: 60%;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}

#light-pad::after {
  height: 1px;
  width: 60%;
  left: 20%;
  top: 50%;
  transform: translateY(-50%);
}

#sun-knob {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;

  background: radial-gradient(circle at 40% 35%, #fff9c4, #ffd54f 55%, #ff8f00);
  box-shadow:
    0 0 0 3px rgba(255, 213, 79, 0.25),
    0 0 12px 4px rgba(255, 200, 50, 0.5),
    0 0 28px 8px rgba(255, 160, 0, 0.3);

  transition: box-shadow 0.15s ease;
}

/* ── Header sits above canvas ── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  /* let it inherit siteBuilder.css styles — just ensure it layers above canvas */
}

/* ── Footer sits above canvas ── */
.footerHolder {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
}

/* ── Overlay ── */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

@media (max-width: 1000px)
{
    #callButton
    {
        left: revert;
        transform: none;
        right: 1rem;
    }
}