/* ==========================================================================
   UTKAL INSTITUTE OF HOTEL MANAGEMENT & TOURISM (UIHMT) — JAJPUR, ODISHA
   File: assets/css/components-3d.css
   Theme: Royal Sapphire Blue • Milky White Porcelain • Warm Ivory Pearl (3D)
   Purpose: Real-Time Top Progress Bar, Luxury Orbital Preloader, Ultra-Rich
            3D Porcelain & Sapphire Icons (.icon-3d), Extruded 3D Cards,
            CSS 3D Visual Scenes, Tactile 3D Buttons & Social 3D Keycaps.
   Rule: 100% Design-System CSS Custom Properties (Zero hardcoded colors).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REAL-TIME TOP VIEWPORT PROGRESS BAR (#top-load-progress)
   -------------------------------------------------------------------------- */
#top-load-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: var(--z-top-progress);
  background: var(--color-white-12);
  pointer-events: none;
  overflow: hidden;
}

#top-load-progress-bar {
  position: relative;
  width: 0%;
  height: 100%;
  background: var(--gradient-royal-tech);
  box-shadow: var(--shadow-glow-gold);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  transition: width 0.12s linear;
  will-change: width;
}

#top-load-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 100%;
  background: var(--gradient-button-shine);
  filter: blur(2px);
}

/* --------------------------------------------------------------------------
   2. ADVANCED LUXURY ORBITAL PRELOADER (#page-preloader)
      Sculpted in Royal Sapphire Blue, Milky White & Warm Ivory Pearl
   -------------------------------------------------------------------------- */
#page-preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--gradient-hero-mesh);
  color: var(--color-text-on-dark);
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.25s var(--ease-curtain),
    opacity 0.22s var(--ease-out-expo),
    transform 0.25s var(--ease-curtain);
  will-change: clip-path, opacity, transform;
}

#page-preloader.preloader-exit {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: scale(1.035);
  pointer-events: none;
}

.preloader-orbital-stage {
  position: relative;
  width: 156px;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
  perspective: 850px;
}

.preloader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid var(--color-white-18);
  border-top-color: var(--color-ivory-pure);
  animation: orbitSpin 2.4s linear infinite;
}

.preloader-ring.ring-inner {
  inset: 14px;
  border-color: var(--color-gold-22);
  border-bottom-color: var(--color-brand-secondary-light);
  animation: orbitSpinReverse 1.8s linear infinite;
}

.preloader-crest-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  padding: 6px;
  background: var(--gradient-ivory-card);
  border: var(--border-ivory-3d);
  box-shadow: var(--shadow-3d-icon-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-crest-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preloader-metrics {
  text-align: center;
  max-width: 360px;
  padding: 0 1.25rem;
}

.preloader-percent {
  font-family: var(--font-mono);
  font-size: 2.45rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.45rem;
  color: var(--color-ivory-pure);
  text-shadow: 0 4px 16px var(--color-slate-40);
}

.preloader-bar-track {
  width: 240px;
  height: 7px;
  margin: 0.65rem auto;
  border-radius: var(--radius-pill);
  background: var(--color-white-18);
  overflow: hidden;
}

.preloader-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-ivory-button-3d);
  border-radius: var(--radius-pill);
  transition: width 0.12s linear;
}

.preloader-status {
  font-size: 0.86rem;
  color: var(--color-text-subtle-dark);
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.preloader-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--color-white-12);
  border: var(--border-glass-bright);
  color: var(--color-ivory-pure);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

/* --------------------------------------------------------------------------
   3. RICH PREMIUM QUALITY 3D SCULPTED ICON SYSTEM (.icon-3d)
      Multi-layered 3D Ceramic Ivory & Royal Sapphire Jewel Plinths
   -------------------------------------------------------------------------- */
.icon-3d {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.72rem;
  color: var(--color-text-on-dark);
  background: var(--gradient-3d-icon-gold);
  border: 1px solid var(--color-white-45);
  box-shadow: var(--shadow-3d-icon);
  transform-style: preserve-3d;
  transition:
    transform 0.45s var(--ease-spring),
    box-shadow 0.45s var(--ease-out-expo);
  flex-shrink: 0;
}

/* Inner Milky-White Top-Left 3D Dome Specular Highlight */
.icon-3d::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 1.02rem;
  background: linear-gradient(
    145deg,
    var(--color-white-45) 0%,
    var(--color-white-08) 42%,
    var(--color-transparent) 68%
  );
  border-top: 1px solid var(--color-white-70);
  pointer-events: none;
}

/* Sculpted 3D Outer Pedestal Halo Ring */
.icon-3d::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 1.5rem;
  border: 1.5px solid var(--color-blue-soft-border);
  background: radial-gradient(circle, var(--color-gold-08) 0%, var(--color-transparent) 70%);
  opacity: 0.8;
  transition: transform 0.45s var(--ease-spring), opacity 0.35s ease, border-color 0.35s ease;
  pointer-events: none;
}

.section-dark .icon-3d::after,
.hero-section .icon-3d::after,
.card-3d-glass .icon-3d::after {
  border-color: var(--color-white-25);
}

.icon-3d > i,
.icon-3d > svg,
.icon-3d > span {
  position: relative;
  z-index: 2;
  transform: translateZ(22px);
  filter: drop-shadow(0 4px 6px var(--color-slate-40));
  transition: transform 0.45s var(--ease-spring);
}

/* 5 Signature Royal Blue, Glacier & Ivory Ceramic 3D Finishes */
.icon-3d-gold {
  background: var(--gradient-3d-icon-gold);
  color: var(--color-ivory-pure);
  box-shadow: var(--shadow-3d-icon);
}

.icon-3d-indigo {
  background: var(--gradient-3d-icon-indigo);
  color: var(--color-ivory-pure);
  box-shadow: var(--shadow-3d-icon);
}

.icon-3d-teal {
  background: var(--gradient-3d-icon-teal);
  color: var(--color-text-dark-ink);
  box-shadow: var(--shadow-3d-icon);
}

/* Warm Ivory & Milky White 3D Ceramic Block with Royal Sapphire Glyph */
.icon-3d-rose {
  background: var(--gradient-3d-icon-rose);
  color: var(--color-brand-primary);
  border-color: var(--color-bg-surface);
  box-shadow: var(--shadow-3d-icon-ivory);
}

.icon-3d-rose > i,
.icon-3d-rose > span {
  filter: drop-shadow(0 3px 4px var(--color-slate-16));
}

.icon-3d-emerald {
  background: var(--gradient-3d-icon-emerald);
  color: var(--color-ivory-pure);
  box-shadow: var(--shadow-3d-icon);
}

.icon-3d-sm {
  width: 50px;
  height: 50px;
  font-size: 1.28rem;
  border-radius: 0.95rem;
}

.icon-3d-sm::before {
  border-radius: 0.78rem;
}

.icon-3d-sm::after {
  inset: -4px;
  border-radius: 1.15rem;
}

.icon-3d-lg {
  width: 82px;
  height: 82px;
  font-size: 2.15rem;
  border-radius: 1.45rem;
}

/* Dramatic 3D Z-Axis Levitation & Rotation on Card Hover */
.card-3d-glass:hover .icon-3d,
.card-3d-light:hover .icon-3d,
[data-tilt-3d]:hover .icon-3d,
.icon-3d:hover {
  transform: translateY(-7px) translateZ(30px) rotateX(10deg) rotateY(-10deg) scale(1.06);
}

.card-3d-glass:hover .icon-3d > i,
.card-3d-light:hover .icon-3d > i,
[data-tilt-3d]:hover .icon-3d > i {
  transform: translateZ(28px) scale(1.08);
}

.card-3d-glass:hover .icon-3d::after,
.card-3d-light:hover .icon-3d::after {
  transform: scale(1.1);
  opacity: 1;
  border-color: var(--color-brand-secondary-light);
}

/* --------------------------------------------------------------------------
   4. 3D EXTRUDED PORCELAIN & ROYAL SAPPHIRE CARDS ([data-tilt-3d])
   -------------------------------------------------------------------------- */
.perspective-stage {
  perspective: 1150px;
}

/* Royal Sapphire 3D Velvet-Glass Card */
.card-3d-glass {
  position: relative;
  background: var(--gradient-sapphire-3d-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--border-glass-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3d-card);
  color: var(--color-text-on-dark);
  transform-style: preserve-3d;
  transition:
    transform 0.38s var(--ease-out-expo),
    border-color 0.35s ease,
    box-shadow 0.38s ease;
  overflow: hidden;
}

.card-3d-glass:hover {
  border-color: var(--color-ivory-pure);
  box-shadow: var(--shadow-3d-card), var(--shadow-glow-gold);
}

/* Milky-White & Warm Ivory 3D Porcelain Card */
.card-3d-light {
  position: relative;
  background: var(--gradient-surface-porcelain);
  border: var(--border-ivory-3d);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3d-card-light);
  color: var(--color-text-on-light);
  transform-style: preserve-3d;
  transition:
    transform 0.38s var(--ease-out-expo),
    border-color 0.35s ease,
    box-shadow 0.38s ease;
  overflow: hidden;
}

.card-3d-light:hover {
  border-color: var(--color-brand-secondary-light);
  box-shadow: var(--shadow-3d-card-hover);
  transform: translateY(-4px);
}

/* Dynamic Specular Glare Overlay driven by assets/js/tilt-3d.js */
[data-tilt-3d] {
  --glare-x: 50%;
  --glare-y: 50%;
  --glare-opacity: 0;
}

[data-tilt-3d]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--glare-x) var(--glare-y),
    var(--color-white-45) 0%,
    var(--color-transparent) 68%
  );
  opacity: var(--glare-opacity);
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
}

.card-3d-glass[data-tilt-3d]::before {
  background: radial-gradient(
    360px circle at var(--glare-x) var(--glare-y),
    var(--color-white-25) 0%,
    var(--color-transparent) 68%
  );
}

/* Highlighted Flagship 3D Card */
.card-3d-featured {
  border: 2px solid var(--color-brand-secondary-light) !important;
  box-shadow: var(--shadow-3d-card-hover), var(--shadow-glow-gold);
}

/* --------------------------------------------------------------------------
   5. RICH CSS GRADIENT 3D ARTWORK BANNERS (.visual-scene-3d)
   -------------------------------------------------------------------------- */
.visual-scene-3d {
  position: relative;
  min-height: 218px;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--gradient-scene-suite);
  border: var(--border-glass-bright);
  box-shadow: inset 0 2px 4px var(--color-white-25), 0 10px 24px -8px var(--color-slate-40);
  color: var(--color-text-on-dark);
}

.visual-scene-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--gradient-grid-pattern-dark);
  background-size: 26px 26px;
  opacity: 0.85;
  pointer-events: none;
}

.visual-scene-3d::after {
  content: '';
  position: absolute;
  width: 175px;
  height: 175px;
  right: -35px;
  bottom: -45px;
  border-radius: 50%;
  background: var(--color-ivory-glow);
  filter: blur(42px);
  pointer-events: none;
}

.scene-culinary { background: var(--gradient-scene-culinary); }
.scene-suite { background: var(--gradient-scene-suite); }
.scene-tourism { background: var(--gradient-scene-tourism); }
.scene-fb { background: var(--gradient-scene-fb); }
.scene-frontoffice { background: var(--gradient-scene-frontoffice); }
.scene-aviation { background: var(--gradient-scene-aviation); }

.scene-floating-pill,
.scene-floating-pill.text-brand-gold-light {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.88rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-ivory-button-3d);
  border: var(--border-ivory-3d);
  box-shadow: 0 4px 10px var(--color-slate-16);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-on-light) !important;
  width: fit-content;
}

.scene-floating-pill i {
  color: var(--color-brand-primary) !important;
}

.scene-center-emblem {
  position: relative;
  z-index: 2;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   6. PREMIUM 3D TACTILE BUTTONS (Royal Sapphire & Warm Ivory Porcelain)
   -------------------------------------------------------------------------- */
.btn-gold-3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.84rem 1.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-brand-secondary-light);
  background: var(--gradient-gold-solid);
  color: var(--color-text-on-dark) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-btn-gold);
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.28s var(--ease-spring),
    box-shadow 0.28s var(--ease-out-expo);
}

/* On Royal Blue Hero/Dark Cards, render primary CTA as luminous 3D Ivory-Porcelain Jewel for maximum pop */
.hero-section .btn-gold-3d,
.section-dark .btn-gold-3d,
.card-3d-glass .btn-gold-3d {
  background: var(--gradient-ivory-button-3d);
  color: var(--color-text-on-light) !important;
  border-color: var(--color-bg-surface);
  box-shadow: var(--shadow-btn-ivory-3d);
}

.btn-gold-3d::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 85%;
  height: 100%;
  background: var(--gradient-button-shine);
  transform: skewX(-22deg);
  transition: left 0.65s var(--ease-out-expo);
}

.btn-gold-3d:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-gold), var(--shadow-btn-gold);
}

.hero-section .btn-gold-3d:hover,
.section-dark .btn-gold-3d:hover,
.card-3d-glass .btn-gold-3d:hover {
  box-shadow: var(--shadow-glow-gold), var(--shadow-btn-ivory-3d);
}

.btn-gold-3d:hover::after {
  left: 140%;
}

.btn-gold-3d:active {
  transform: translateY(1px);
}

.btn-indigo-3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.84rem 1.7rem;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--gradient-royal-tech);
  color: var(--color-text-on-dark) !important;
  font-weight: 700;
  box-shadow: var(--shadow-btn-indigo);
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.28s var(--ease-spring),
    box-shadow 0.28s var(--ease-out-expo);
}

.btn-indigo-3d:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-indigo);
}

.btn-glass-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-white-12);
  backdrop-filter: var(--glass-blur);
  border: var(--border-glass-bright);
  color: var(--color-text-on-dark) !important;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    transform 0.28s var(--ease-spring);
}

.btn-glass-3d:hover {
  background: var(--color-white-25);
  border-color: var(--color-ivory-pure);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   7. SECURITY GUARD GLASSMORPHIC TOAST (#security-guard-toast)
   -------------------------------------------------------------------------- */
.security-guard-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, 28px);
  z-index: var(--z-security-toast);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.88rem 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-ivory-card);
  border: var(--border-light-strong);
  box-shadow: var(--shadow-3d-card-hover);
  color: var(--color-text-on-light);
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease-out-expo),
    transform 0.3s var(--ease-spring);
  max-width: calc(100vw - 2rem);
}

.security-guard-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.security-guard-toast i {
  color: var(--color-brand-primary);
  font-size: 1.15rem;
}

/* --------------------------------------------------------------------------
   8. TOP MENU BAR 3D IVORY-SAPPHIRE CONTACT CAPSULES & 3D SOCIAL KEYCAPS
   -------------------------------------------------------------------------- */
.top-contact-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.top-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0.9rem 0.28rem 0.32rem;
  border-radius: var(--radius-pill);
  background: var(--color-white-12);
  border: var(--border-glass-bright);
  color: var(--color-text-on-dark) !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    transform 0.32s var(--ease-spring),
    border-color 0.28s ease,
    background 0.28s ease,
    color 0.25s ease,
    box-shadow 0.28s ease;
}

.top-contact-icon-3d {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-ivory-button-3d);
  color: var(--color-brand-primary);
  font-size: 0.78rem;
  box-shadow: 0 3px 6px var(--color-slate-40), inset 0 1.5px 2px var(--color-bg-surface);
  transition: transform 0.35s var(--ease-spring);
  flex-shrink: 0;
}

.top-contact-pill:hover {
  transform: translateY(-2px);
  background: var(--gradient-ivory-button-3d);
  border-color: var(--color-bg-surface);
  color: var(--color-text-on-light) !important;
  box-shadow: var(--shadow-glow-gold);
}

.top-contact-pill:hover .top-contact-icon-3d {
  background: var(--gradient-gold-solid);
  color: var(--color-text-on-dark);
  transform: scale(1.12) rotate(-8deg);
}

/* 3D Milky-White & Ivory Porcelain Social Keycaps (Right Side of Top Bar)
   Order: YouTube • WhatsApp • Facebook • Instagram • LinkedIn • X */
.top-social-3d-dock {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  padding: 0.24rem 0.36rem;
  border-radius: 0.9rem;
  background: var(--color-white-08);
  border: var(--border-glass-dark);
  box-shadow: inset 0 1px 2px var(--color-white-18);
  perspective: 820px;
}

.social-3d-btn {
  --soc-rx: 0deg;
  --soc-ry: 0deg;
  --soc-tx: 0px;
  --soc-ty: 0px;
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 0.68rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-social-resting);
  border: 1px solid var(--color-bg-surface);
  box-shadow: var(--shadow-social-resting);
  color: var(--color-text-on-light) !important;
  text-decoration: none;
  transform-style: preserve-3d;
  transition:
    transform 0.42s var(--ease-spring),
    opacity 0.28s ease,
    background 0.32s ease,
    border-color 0.32s ease,
    box-shadow 0.38s var(--ease-out-expo),
    color 0.25s ease;
}

/* Subtle Spotlight Focus: Non-hovered sibling keycaps gently recede */
.top-social-3d-dock:hover .social-3d-btn:not(:hover):not(:focus-visible) {
  transform: scale(0.95);
  opacity: 0.88;
}

/* Inner 3D Glass Bevel Dome & Diagonal Mirror Sweep */
.social-3d-dome {
  position: absolute;
  inset: 2px;
  border-radius: 0.54rem;
  background: var(--gradient-social-dome);
  border-top: 1px solid var(--color-white-90);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.social-3d-dome::after {
  content: '';
  position: absolute;
  top: 0;
  left: -135%;
  width: 85%;
  height: 100%;
  background: var(--gradient-button-shine);
  transform: skewX(-24deg);
  transition: left 0.62s var(--ease-out-expo);
}

/* Outer Ambient Halo Ring on Hover */
.social-3d-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 0.88rem;
  border: 1.5px solid var(--color-ivory-pure);
  opacity: 0;
  transform: scale(0.86);
  transition:
    opacity 0.32s var(--ease-out-expo),
    transform 0.42s var(--ease-spring);
  pointer-events: none;
}

/* Floating 3D Ivory-Porcelain Tooltip Badge */
.social-3d-btn::after {
  content: attr(data-social-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -7px) scale(0.9);
  padding: 0.26rem 0.66rem;
  border-radius: var(--radius-xs);
  background: var(--gradient-ivory-card);
  border: var(--border-light-strong);
  box-shadow: var(--shadow-3d-card-light);
  color: var(--color-text-on-light);
  font-family: var(--font-sans);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-modal-custom);
  transition:
    opacity 0.26s var(--ease-out-expo),
    transform 0.32s var(--ease-spring);
}

/* Precision Vector Brand Icon & Legacy Font Fallback */
.social-3d-svg,
.social-3d-btn > i {
  position: relative;
  z-index: 2;
  width: 17px;
  height: 17px;
  display: block;
  transform: translateZ(14px);
  filter: var(--filter-social-glyph-rest);
  transition:
    transform 0.42s var(--ease-spring),
    color 0.25s ease,
    filter 0.32s ease;
}

.social-3d-btn.social-youtube { color: var(--color-social-youtube-tint) !important; }
.social-3d-btn.social-whatsapp { color: var(--color-social-whatsapp-tint) !important; }
.social-3d-btn.social-facebook { color: var(--color-social-facebook-tint) !important; }
.social-3d-btn.social-instagram { color: var(--color-social-instagram-tint) !important; }
.social-3d-btn.social-linkedin { color: var(--color-social-linkedin-tint) !important; }
.social-3d-btn.social-x { color: var(--color-social-x-tint) !important; }

.social-3d-btn:hover,
.social-3d-btn:focus-visible {
  transform:
    translate3d(var(--soc-tx), calc(-5px + var(--soc-ty)), 18px)
    rotateX(calc(10deg + var(--soc-rx)))
    rotateY(calc(-8deg + var(--soc-ry)))
    scale(1.15);
  border-color: var(--color-bg-surface);
  color: var(--color-text-on-dark) !important;
  z-index: 5;
}

.social-3d-btn:hover .social-3d-dome,
.social-3d-btn:focus-visible .social-3d-dome {
  background: var(--gradient-social-dome-hover);
}

.social-3d-btn:hover .social-3d-dome::after,
.social-3d-btn:focus-visible .social-3d-dome::after {
  left: 145%;
}

.social-3d-btn:hover::before,
.social-3d-btn:focus-visible::before {
  opacity: 0.85;
  transform: scale(1);
}

.social-3d-btn:hover::after,
.social-3d-btn:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.social-3d-btn:hover .social-3d-svg,
.social-3d-btn:focus-visible .social-3d-svg,
.social-3d-btn:hover > i,
.social-3d-btn:focus-visible > i {
  color: var(--color-text-on-dark) !important;
  filter: var(--filter-social-glyph-hover);
  transform: translateZ(22px) scale(1.12);
}

.social-3d-btn.social-youtube:hover,
.social-3d-btn.social-youtube:focus-visible {
  background: var(--gradient-social-youtube);
  box-shadow: var(--shadow-social-youtube);
}

.social-3d-btn.social-whatsapp:hover,
.social-3d-btn.social-whatsapp:focus-visible {
  background: var(--gradient-social-whatsapp);
  box-shadow: var(--shadow-social-whatsapp);
}

.social-3d-btn.social-facebook:hover,
.social-3d-btn.social-facebook:focus-visible {
  background: var(--gradient-social-facebook);
  box-shadow: var(--shadow-social-facebook);
}

.social-3d-btn.social-instagram:hover,
.social-3d-btn.social-instagram:focus-visible {
  background: var(--gradient-social-instagram);
  box-shadow: var(--shadow-social-instagram);
}

.social-3d-btn.social-linkedin:hover,
.social-3d-btn.social-linkedin:focus-visible {
  background: var(--gradient-social-linkedin);
  box-shadow: var(--shadow-social-linkedin);
}

.social-3d-btn.social-x:hover,
.social-3d-btn.social-x:focus-visible {
  background: var(--gradient-social-x);
  box-shadow: var(--shadow-social-x);
}

.social-3d-btn:active {
  transform: translateY(0) scale(0.96);
}

/* Sapphire and milky-white tactile finish */
.btn-gold-3d, .btn-indigo-3d { color: var(--color-text-on-dark) !important; }
.icon-3d-gold, .icon-3d-indigo, .icon-3d-emerald { border-color: var(--color-gold-35); }
.icon-3d-gold > i, .icon-3d-indigo > i, .icon-3d-emerald > i { color: var(--color-brand-secondary-light); }