/* ══════════════════════════════════════════════
   ATHAR — 3D Enhancement Styles
══════════════════════════════════════════════ */

/* ── Hero: enable 3D perspective context ── */
.hero {
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.hero-content {
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-bg {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ── Hero Logo: 3D floating stage ── */
.hero-logo-img {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.08s ease-out;
}

.logo-3d-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform-style: preserve-3d;
  transform: translateY(var(--bob-y, 0px)) rotateZ(var(--bob-rot, 0deg));
  transition: transform 0.08s ease-out;
  filter: drop-shadow(0 8px 24px rgba(184,146,74,0.35))
          drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.logo-3d-stage img {
  width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  /* Subtle 3D depth via multi-drop-shadow */
  filter: drop-shadow(1px 2px 0px rgba(92,61,30,0.6))
          drop-shadow(2px 4px 0px rgba(46,26,14,0.4))
          drop-shadow(3px 6px 8px rgba(0,0,0,0.35))
          drop-shadow(0 0 24px rgba(184,146,74,0.3));
}

.logo-3d-halo {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(184,146,74,0.18) 0%,
    rgba(184,146,74,0.06) 40%,
    transparent 70%
  );
  z-index: 0;
  animation: haloPulse 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes haloPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.12); }
}

/* ── Hero tagline 3D text depth ── */
.hero-tagline {
  will-change: text-shadow, transform;
  transition: text-shadow 0.12s ease-out;
  /* Base 3D text effect */
  text-shadow:
    1px 1px 0px rgba(92,61,30,0.5),
    2px 2px 0px rgba(92,61,30,0.4),
    3px 3px 0px rgba(46,26,14,0.35),
    4px 4px 4px rgba(46,26,14,0.25),
    5px 5px 10px rgba(0,0,0,0.3),
    0 0 30px rgba(184,146,74,0.2);
}

/* ── Menu card 3D tilt system ── */
.menu-card.card-3d {
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  /* Override default hover — tilt JS handles it */
  transition: box-shadow 0.3s ease;
}

.menu-card.card-3d:hover {
  /* Let JS handle transform — just boost shadow */
  box-shadow:
    0 24px 60px rgba(92,61,30,0.22),
    0 8px 20px rgba(92,61,30,0.15),
    0 0 0 1px rgba(184,146,74,0.18),
    0 0 30px rgba(184,146,74,0.08);
}

/* Specular shine layer on each card */
.card-tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease;
  mix-blend-mode: screen;
}

/* ── Three.js canvas ── */
#three-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ── Featured section 3D depth ── */
.featured-section {
  perspective: 900px;
}

.fs-ring-logo {
  will-change: transform;
  filter:
    drop-shadow(0 0 6px rgba(184,146,74,0.5))
    drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* ── About logo 3D depth ── */
.about-logo-img {
  filter:
    drop-shadow(1px 2px 0 rgba(92,61,30,0.5))
    drop-shadow(2px 4px 0 rgba(46,26,14,0.4))
    drop-shadow(3px 6px 8px rgba(0,0,0,0.3));
  transition: filter 0.4s ease, transform 0.4s ease;
}
.about-logo-mark:hover .about-logo-img {
  transform: rotateY(8deg) rotateX(-4deg) scale(1.04);
  filter:
    drop-shadow(2px 4px 0 rgba(92,61,30,0.6))
    drop-shadow(4px 8px 0 rgba(46,26,14,0.4))
    drop-shadow(0 0 20px rgba(184,146,74,0.4));
}

/* ── Stat numbers 3D hover ── */
.stat-num {
  text-shadow:
    1px 1px 0 rgba(92,61,30,0.4),
    2px 2px 0 rgba(46,26,14,0.3),
    3px 3px 6px rgba(0,0,0,0.2);
  transition: text-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.stat:hover .stat-num {
  color: var(--gold);
  transform: scale(1.12) translateY(-2px);
  text-shadow:
    1px 1px 0 rgba(138,106,46,0.6),
    2px 2px 0 rgba(92,61,30,0.5),
    3px 3px 0 rgba(46,26,14,0.4),
    4px 4px 8px rgba(0,0,0,0.3),
    0 0 20px rgba(184,146,74,0.35);
}

/* ── Section headings 3D text depth ── */
.featured-inner h2 {
  text-shadow:
    1px 1px 0 rgba(20,10,3,0.7),
    2px 2px 0 rgba(20,10,3,0.5),
    3px 3px 6px rgba(0,0,0,0.4),
    0 0 20px rgba(184,146,74,0.15);
}

.about-content h2 {
  text-shadow:
    1px 1px 0 rgba(92,61,30,0.4),
    2px 2px 0 rgba(46,26,14,0.3),
    3px 3px 8px rgba(0,0,0,0.15);
}

/* ── Contact section logo 3D depth ── */
.contact-logo-img {
  filter:
    drop-shadow(1px 2px 0 rgba(20,10,3,0.6))
    drop-shadow(2px 4px 0 rgba(0,0,0,0.4))
    drop-shadow(3px 6px 10px rgba(0,0,0,0.5))
    drop-shadow(0 0 16px rgba(184,146,74,0.2));
  transition: filter 0.4s ease, transform 0.4s ease;
}
.contact-brand:hover .contact-logo-img {
  transform: rotateY(-6deg) scale(1.03);
  filter:
    drop-shadow(2px 4px 0 rgba(20,10,3,0.7))
    drop-shadow(4px 8px 0 rgba(0,0,0,0.5))
    drop-shadow(0 0 24px rgba(184,146,74,0.35));
}

/* ── Featured spotlight 3D depth on image ── */
.fs-img-wrap {
  transform-style: preserve-3d;
}

.fs-spotlight {
  transform-style: preserve-3d;
}

/* ── Tab hover 3D press ── */
.tab {
  transition: all 0.22s ease;
}
.tab:active {
  transform: translateY(1px) scale(0.97);
}

/* ── Back to top button 3D ── */
.back-top {
  box-shadow:
    0 4px 0 rgba(0,0,0,0.4),
    0 6px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.back-top:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 rgba(0,0,0,0.4),
    0 10px 20px rgba(0,0,0,0.3),
    0 0 12px rgba(184,146,74,0.2);
}
.back-top:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
}


/* ── Three.js canvas positioning fix ── */
#three-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* ── Ensure hero content is above everything ── */
.hero .hero-content,
.hero .hero-scroll {
  position: relative;
  z-index: 5 !important;
}

.hero .hero-bg {
  z-index: 0 !important;
}