/*
  Websy 3D UI System
  - Premium dark theme
  - Depth layers + subtle glow
  - Consistent motion + hover tilt
*/

:root{
  --bg: #000;
  --bg2: #05060a;
  --text: #f5f7ff;
  --muted: rgba(245,247,255,.72);
  --line: rgba(255,255,255,.10);

  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.035);
  --glass: rgba(10,12,18,.62);

  --accentA: #7c5cff;
  --accentB: #ff3bbd;
  --accentC: #2effc5;

  --shadowLg: 0 30px 80px rgba(0,0,0,.65);
  --shadowMd: 0 16px 44px rgba(0,0,0,.55);
  --shadowSm: 0 10px 26px rgba(0,0,0,.5);
  --glowA: 0 0 0 1px rgba(255,255,255,.06), 0 0 40px rgba(124,92,255,.18), 0 0 90px rgba(255,59,189,.10);

  --radiusXL: 28px;
  --radiusLG: 20px;
  --radiusMD: 16px;

  --easeOut: cubic-bezier(.16,1,.3,1);
  --easeSoft: cubic-bezier(.2,.9,.2,1);

  --perspective: 1100px;
  --liftZ: 18px;
  --tiltMax: 10;
}

html, body{
  background: var(--bg);
  color: var(--text);
}

/* keep your current fonts but unify rendering */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Ambient scene layers (subtle, minimal, premium) */
body::before{
  content:"";
  position: fixed;
  inset: -20vmax;
  z-index: -3;
  background:
    radial-gradient(60vmax 45vmax at 16% 12%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(55vmax 40vmax at 86% 22%, rgba(255,59,189,.16), transparent 58%),
    radial-gradient(60vmax 55vmax at 60% 92%, rgba(46,255,197,.10), transparent 60%),
    radial-gradient(90vmax 70vmax at 50% 50%, rgba(255,255,255,.05), transparent 65%);
  filter: blur(10px);
  transform: translate3d(0,0,0);
  pointer-events: none;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.95)),
    radial-gradient(circle at 40% 10%, rgba(255,255,255,.06), transparent 40%),
    radial-gradient(circle at 60% 90%, rgba(255,255,255,.04), transparent 40%);
  mix-blend-mode: normal;
}

/* 3D root */
.u3d-root{
  perspective: var(--perspective);
  perspective-origin: 50% 20%;
}

.u3d-layer{
  transform-style: preserve-3d;
}

/* Global focus/selection */
::selection{
  background: rgba(124,92,255,.35);
  color: var(--text);
}

:focus-visible{
  outline: 2px solid rgba(124,92,255,.55);
  outline-offset: 3px;
}

/* Make existing sections feel like floating panels without changing hierarchy */
.header,
.landing-page-3d,
.main-container,
.card-3d,
.name-modal-box,
.modal-msg{
  transform-style: preserve-3d;
}

/* Header: floating bar */
.header{
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Landing: reduce “flat gradient”, add depth */
.landing-page-3d{
  background: radial-gradient(1200px 600px at 30% 15%, rgba(124,92,255,.35), transparent 62%),
              radial-gradient(900px 560px at 78% 30%, rgba(255,59,189,.22), transparent 60%),
              radial-gradient(900px 520px at 20% 85%, rgba(46,255,197,.08), transparent 62%) !important;
  border: none;
  box-shadow: var(--shadowLg), 0 0 60px rgba(124,92,255,.16), 0 0 90px rgba(255,59,189,.10);
}

/* Soft inner vignette to avoid “hard” bands/lines */
.landing-page-3d::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,.10), rgba(0,0,0,.65) 62%, rgba(0,0,0,.82) 100%),
    radial-gradient(60% 70% at 10% 40%, rgba(255,255,255,.06), transparent 60%);
  mix-blend-mode: normal;
}

/* WB BG image: remove “U-shaped” edge by killing bright backing */
.wbbg-3d{
  background: transparent !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

/* Cards: premium glass + depth */
.card-3d{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  border: none;
  box-shadow: var(--shadowMd);
  will-change: transform;
}

.card-3d:hover{
  box-shadow: var(--shadowLg), 0 0 55px rgba(124,92,255,.18), 0 0 70px rgba(255,59,189,.10) !important;
}

/* Buttons: clean + glow */
.btn-3d,
.main-section-button-3d,
.name-modal-btn{
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  transform-style: preserve-3d;
}

.btn-3d:hover,
.main-section-button-3d:hover,
.name-modal-btn:hover{
  transform: translate3d(0,-2px,10px) scale(1.03);
}

/* Inputs: dark glass instead of bright fill (keeps behavior from existing CSS via override) */
.input-3d,
.name-modal-input,
.modal-input{
  background: rgba(0,0,0,.40) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.55) !important;
}

.input-3d::placeholder,
.name-modal-input::placeholder,
.modal-input::placeholder{
  color: rgba(245,247,255,.55);
}

.input-3d:focus,
.name-modal-input:focus,
.modal-input:focus{
  box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 0 2px rgba(124,92,255,.35) !important;
}

/* Typography: reduce heavy glow, keep premium contrast */
.gradient-text{
  text-shadow: none !important;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

.social-contact-text,
.mainspan-3d,
.mainspan{
  text-shadow: none !important;
  color: rgba(245,247,255,.88) !important;
}

/* Entrance animation (JS toggles .u3d-in) */
.u3d-entrance{
  opacity: 0;
  transform: translate3d(0,18px,-16px);
  filter: blur(6px);
  transition:
    opacity 700ms var(--easeOut),
    transform 900ms var(--easeOut),
    filter 900ms var(--easeOut);
}
.u3d-entrance.u3d-in{
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

/* Subtle float */
@keyframes u3dFloat{
  0%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-6px,0); }
  100%{ transform: translate3d(0,0,0); }
}
.u3d-float{
  animation: u3dFloat 7.5s var(--easeSoft) infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto !important; }
  *{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}