/* WORLDTVMTL 3D look — shared by the customer site and the lock screen.
   Depth comes from layered shadows, light edges, a perspective "studio floor",
   the floating 3D logo and cards that tilt toward the pointer (see 3d.js). */

:root {
  --edge: rgba(255, 255, 255, .09);
  --edge-top: rgba(255, 255, 255, .18);
  --lift: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 14px 34px rgba(0, 0, 0, .5), 0 3px 8px rgba(0, 0, 0, .35);
  --lift-hi: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 26px 50px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .4);
}

/* ---------- background: glow + perspective studio floor ---------- */
body {
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(59, 130, 246, .28), transparent 60%),
    radial-gradient(800px 420px at -5% 5%, rgba(46, 230, 197, .16), transparent 60%),
    linear-gradient(180deg, #0b1020 0%, #080c19 100%) fixed;
}
body::before {
  content: ""; position: fixed; left: -50%; right: -50%; bottom: -12vh; height: 62vh; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(46, 230, 197, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 230, 197, .22) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 85%);
  animation: floor 9s linear infinite;
  opacity: .5;
}
@keyframes floor { to { background-position: 0 64px, 0 0; } }
.hero { background: none !important; }

/* ---------- 3D titles ---------- */
.hero h1, .card h1 {
  background: linear-gradient(180deg, #ffffff 0%, #c9d6ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #24305c) drop-shadow(0 2px 0 #1c2650) drop-shadow(0 3px 0 #151d42) drop-shadow(0 12px 18px rgba(0, 0, 0, .55));
}
section h2 { text-shadow: 0 2px 0 #121a38, 0 10px 24px rgba(0, 0, 0, .5); }
.logo { text-shadow: 0 2px 0 #121a38, 0 6px 16px rgba(0, 0, 0, .5); }

/* ---------- raised surfaces ---------- */
.qcard, .ccard, .steps0, details, form#ticketForm, .ipane, .hours, .status, .card, .tip, .iapp img {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012)) !important;
  border-color: var(--edge) !important;
  border-top-color: var(--edge-top) !important;
  box-shadow: var(--lift);
}
.iapp img { background: #fff !important; }
details[open] { box-shadow: var(--lift-hi); }

/* tilt cards (3d.js sets --rx/--ry and the glare position --mx/--my) */
[data-tilt] {
  position: relative; transform-style: preserve-3d; will-change: transform;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}
[data-tilt].tilting { transition: transform .06s linear, box-shadow .25s ease; box-shadow: var(--lift-hi); }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .13), transparent 45%);
}
[data-tilt].tilting::after { opacity: 1; }
[data-tilt] > * { transform: translateZ(18px); }
.qcard:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); }

/* 3D icon bubbles */
.qcard .ic {
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .35), rgba(46, 230, 197, .22) 40%, rgba(46, 230, 197, .08) 75%) !important;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .35), inset 0 2px 3px rgba(255, 255, 255, .25), 0 8px 18px rgba(0, 0, 0, .45);
  transform: translateZ(30px);
}

/* ---------- raised buttons that press down ---------- */
.btn.main, .card button[type=submit], .card #again, #joinBtn {
  background: linear-gradient(180deg, #6ff3dd 0%, #2ee6c5 45%, #1fc9aa 100%) !important;
  box-shadow: 0 5px 0 #11866f, 0 12px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
  transform: translateY(0); transition: transform .08s ease, box-shadow .08s ease;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn.main:active, .card button[type=submit]:active, .card #again:active, #joinBtn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #11866f, 0 5px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}
.btn.ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn.ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }

/* inputs sunk into the surface */
input, select, textarea {
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .05);
}

/* glossy 3D chat bubble */
.fab {
  background: radial-gradient(circle at 32% 28%, #b9fff3 0%, #2ee6c5 38%, #0f9f86 100%) !important;
  box-shadow: 0 10px 0 -2px #0b6e5d, 0 18px 34px rgba(0, 0, 0, .55), inset 0 -6px 10px rgba(0, 0, 0, .25) !important;
}
.fab:active { transform: translateY(4px); }

/* chat panel floats above everything */
.cw { box-shadow: 0 40px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06) inset !important; }

/* ---------- floating 3D logo ---------- */
.hero-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: center; }
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } .hero-grid .tv3d { order: -1; margin: 0 auto; } }

.tv3d { --s: 280px; width: var(--s); height: calc(var(--s) * 1.12); perspective: 900px; position: relative; justify-self: center; }
.tv3d.small { --s: 150px; margin: 4px auto 0; }
@media (max-width: 820px) { .tv3d:not(.small) { --s: 210px; } }
@media (max-width: 520px) { .tv3d:not(.small) { --s: 150px; } }
.tv3d .tv {
  position: absolute; inset: 0 0 18px; transform-style: preserve-3d;
  transform: rotateX(var(--trx, 6deg)) rotateY(var(--try, -14deg));
  animation: tvfloat 6s ease-in-out infinite;
}
@keyframes tvfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.tv3d .logo-float {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  /* stacked shadows give the cut-out logo depth, then a teal glow */
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .55)) drop-shadow(2px 2px 0 rgba(0, 0, 0, .45)) drop-shadow(3px 3px 0 rgba(0, 0, 0, .35))
          drop-shadow(0 18px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(46, 230, 197, .28));
  transform: translateZ(30px);
}
.tv3d .shadow { position: absolute; left: 18%; right: 18%; bottom: 0; height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(46, 230, 197, .4), transparent 70%); filter: blur(6px); animation: shadow 6s ease-in-out infinite; }
@keyframes shadow { 50% { transform: scale(.82); opacity: .55; } }

/* lock screen card */
.card { position: relative; }
.card .lock { box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .35), inset 0 2px 3px rgba(255, 255, 255, .25), 0 8px 18px rgba(0, 0, 0, .45); }

/* ---------- respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .tv3d .tv, .tv3d .shadow { animation: none !important; }
  [data-tilt] { transform: none !important; }
}