/* ============================================================
   Luxury Contact Hub — Public page
   Black & Gold · Glassmorphism · Cinematic
   ============================================================ */

:root {
  --bg-0: #050505;
  --bg-1: #090909;
  --bg-2: #111111;
  --gold: #D4AF37;
  --gold-soft: #FFD66B;
  --gold-pale: #F8E9A1;
  --glass-alpha: 0.08;
  --blur: 40px;
  --particle-density: 40;
  --anim-speed: 1;
  --ink: #f4efe3;
  --ink-dim: #9a9488;
  --radius: 22px;
  --gold-line: rgba(212, 175, 55, 0.35);
  --gold-glow: rgba(212, 175, 55, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-0);
  color: var(--ink);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body { position: relative; min-height: 100dvh; }

/* ---- Background layers ---- */
.bg-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.bg-gradient {
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(212,175,55,0.10), transparent 60%),
    radial-gradient(900px 700px at 85% 110%, rgba(255,214,107,0.06), transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0) 60%, #000 100%);
}
body[data-depth="soft"] .bg-gradient {
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(212,175,55,0.14), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--bg-1) 55%, var(--bg-0) 100%);
}
body[data-bgstyle="grid"] .bg-gradient::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,175,55,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
}

.bg-spotlight {
  background: radial-gradient(600px 600px at var(--mx, 50%) var(--my, 40%), rgba(212,175,55,0.10), transparent 70%);
  transition: background 0.2s ease;
  mix-blend-mode: screen;
}
.bg-vignette { background: radial-gradient(circle at 50% 45%, transparent 45%, rgba(0,0,0,0.55) 100%); }
.bg-particles { z-index: 0; }

/* ---- Stage / scenes ---- */
.stage {
  position: relative; z-index: 2;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: clamp(20px, 5vw, 64px);
}
.scene { width: 100%; max-width: 1100px; }
.scene[hidden] { display: none; }

.scene-enter { animation: sceneIn calc(0.7s / var(--anim-speed)) var(--ease) both; }
@keyframes sceneIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---- Glass primitive ---- */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,calc(var(--glass-alpha) + 0.04)), rgba(255,255,255,var(--glass-alpha)));
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--gold-line);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ============================================================
   ORBIT THEME
   ============================================================ */
.scene--orbit, .scene--split { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* ============================================================
   HERO — photoreal oriental arch backdrop behind the logo.
   Center stays crisp; edges blur and fade to black so the image
   never spills onto the contact cards.
   ============================================================ */
.hero {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  isolation: isolate;
  /* Headroom so the crown of the arch is never clipped by the viewport */
  margin-top: clamp(56px, 13vh, 140px);
}

.archbg {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  z-index: -1; pointer-events: none;
  /* Vertical cut-off: guarantees the artwork dissolves into black well
     before it can reach the contact cards below. */
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 10%, #000 58%, transparent 84%);
          mask: linear-gradient(to bottom, transparent 0, #000 10%, #000 58%, transparent 84%);
}
.archbg span {
  position: absolute; inset: 0; display: block;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
/* Soft, blurred halo of the same artwork — reads as depth-of-field at the edges */
.archbg__blur {
  filter: blur(26px) saturate(1.15) brightness(0.9); opacity: 0.75;
  -webkit-mask: radial-gradient(ellipse 62% 62% at 50% 46%, transparent 18%, #000 52%, transparent 88%);
          mask: radial-gradient(ellipse 62% 62% at 50% 46%, transparent 18%, #000 52%, transparent 88%);
}
/* Crisp core — fully sharp at the middle, dissolving outward */
.archbg__sharp {
  -webkit-mask: radial-gradient(ellipse 60% 64% at 50% 46%, #000 0 34%, rgba(0,0,0,0.75) 55%, rgba(0,0,0,0.25) 72%, transparent 84%);
          mask: radial-gradient(ellipse 60% 64% at 50% 46%, #000 0 34%, rgba(0,0,0,0.75) 55%, rgba(0,0,0,0.25) 72%, transparent 84%);
}
.archbg--orbit span { background-image: url("/img/arch-orbit.webp"); }
.archbg--split span { background-image: url("/img/arch-split.webp"); }
/* Portrait artwork for orbit, landscape for split */
.archbg--orbit { aspect-ratio: 941 / 1672; height: clamp(410px, 60vh, 580px); }
.archbg--split { aspect-ratio: 1672 / 941; width: min(860px, 118%); }

/* Content sits inside the arch doorway */
.hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.hero--orbit .hero__content { padding-top: clamp(16px, 3vh, 40px); }
.hero--split .hero__content { padding-top: clamp(10px, 2vh, 28px); }

.logo-halo {
  position: absolute; left: 50%; top: 0; width: 300px; height: 300px;
  translate: -50% -28%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, var(--gold-glow), transparent 62%);
  filter: blur(26px); animation: pulse calc(6s / var(--anim-speed)) ease-in-out infinite;
}

.eyebrow {
  margin: 20px 0 2px; font-size: clamp(10px, 1.5vw, 12.5px); font-weight: 600;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(212,175,55,0.5);
}

@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes spinR { to { transform: rotate(-360deg); } }
@keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.85; } }

/* ============================================================
   ORBIT CINEMATIC BACKGROUND — large 3D orbital rings, glass
   spheres, holographic platform. Center stays empty for content.
   ============================================================ */
.orbit-bg { z-index: 1; opacity: 0; transition: opacity 1.1s var(--ease); perspective: 1400px; }
html[data-theme="orbit"] .orbit-bg { opacity: 1; }
.orbit-bg__scene { position: absolute; inset: 0; transform-style: preserve-3d; }

.obring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1.5px solid rgba(212,175,55,0.30);
  box-shadow: 0 0 34px rgba(212,175,55,0.12), inset 0 0 60px rgba(212,175,55,0.05);
  transform-style: preserve-3d;
}
.obring__spark {
  position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--gold-pale), var(--gold));
  box-shadow: 0 0 18px 3px var(--gold-soft), 0 0 6px #fff;
}
.obring--1 { width: 132vmax; height: 132vmax; margin: -66vmax 0 0 -66vmax; animation: ob1 calc(70s / var(--anim-speed)) linear infinite; }
.obring--2 { width: 104vmax; height: 104vmax; margin: -52vmax 0 0 -52vmax; border-color: rgba(255,214,107,0.26); animation: ob2 calc(92s / var(--anim-speed)) linear infinite; }
.obring--3 { width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; border-color: rgba(212,175,55,0.16); animation: ob3 calc(120s / var(--anim-speed)) linear infinite; }
@keyframes ob1 { from { transform: rotateX(70deg) rotateY(12deg) rotateZ(0); } to { transform: rotateX(70deg) rotateY(12deg) rotateZ(360deg); } }
@keyframes ob2 { from { transform: rotateX(60deg) rotateY(-22deg) rotateZ(0); } to { transform: rotateX(60deg) rotateY(-22deg) rotateZ(-360deg); } }
@keyframes ob3 { from { transform: rotateX(78deg) rotateY(30deg) rotateZ(0); } to { transform: rotateX(78deg) rotateY(30deg) rotateZ(360deg); } }

/* Floating transparent glass spheres */
.gsphere {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.28), rgba(255,255,255,0.05) 42%, rgba(10,8,4,0.35) 72%);
  border: 1px solid rgba(212,175,55,0.22);
  box-shadow: 0 0 40px rgba(212,175,55,0.12), inset -10px -10px 30px rgba(0,0,0,0.5), inset 8px 8px 24px rgba(255,255,255,0.12);
}
.gsphere--1 { width: 92px; height: 92px; top: 12%; left: 12%; animation: floatSphere1 calc(16s / var(--anim-speed)) ease-in-out infinite; }
.gsphere--2 { width: 60px; height: 60px; top: 52%; right: 13%; animation: floatSphere2 calc(20s / var(--anim-speed)) ease-in-out infinite; }
.gsphere--3 { width: 34px; height: 34px; bottom: 28%; left: 22%; animation: floatSphere1 calc(24s / var(--anim-speed)) ease-in-out infinite reverse; }
@keyframes floatSphere1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-26px); } }
@keyframes floatSphere2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-22px,20px); } }

/* The arch artwork carries its own holographic platform — no CSS one needed. */

/* ============================================================
   CELESTIAL LAYER — crescent moon, twinkling stars, comets (both themes)
   ============================================================ */
.celestial { z-index: 1; }
.moon {
  position: absolute; top: 11%; left: 7%; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #fff6dd, var(--gold-pale) 46%, var(--gold) 92%);
  -webkit-mask: radial-gradient(circle at 70% 42%, transparent 0 47%, #000 49%);
          mask: radial-gradient(circle at 70% 42%, transparent 0 47%, #000 49%);
  filter: drop-shadow(0 0 16px var(--gold-glow)) drop-shadow(0 0 30px rgba(212,175,55,0.25));
  animation: floaty calc(12s / var(--anim-speed)) ease-in-out infinite;
}
.star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; animation: twinkle calc(3.5s / var(--anim-speed)) ease-in-out infinite;
}
.star::before, .star::after { content: ""; position: absolute; left: 50%; top: 50%; }
.star::before { width: 1px; height: 18px; transform: translate(-50%,-50%); background: linear-gradient(transparent, var(--gold-soft), transparent); }
.star::after  { width: 18px; height: 1px; transform: translate(-50%,-50%); background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); }
.star--1 { top: 18%; left: 34%; }
.star--2 { top: 26%; right: 20%; animation-delay: 0.7s; }
.star--3 { top: 62%; left: 15%; animation-delay: 1.3s; transform: scale(0.7); }
.star--4 { top: 72%; right: 26%; animation-delay: 2s; }
.star--5 { top: 40%; left: 76%; animation-delay: 0.4s; transform: scale(1.25); }
.star--6 { top: 84%; left: 46%; animation-delay: 1.7s; transform: scale(0.6); }
@keyframes twinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Comets — bright head + trailing tail, shooting across occasionally */
.comet {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px 3px var(--gold-soft); opacity: 0;
}
.comet::after {
  content: ""; position: absolute; right: 3px; top: 50%; width: 170px; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--gold-soft), var(--gold)); border-radius: 2px;
}
.comet--1 { top: 6%;  left: 6%;  animation: comet calc(9s / var(--anim-speed)) ease-in infinite; animation-delay: 2s; }
.comet--2 { top: 20%; left: 42%; animation: comet calc(11s / var(--anim-speed)) ease-in infinite; animation-delay: 6s; }
.comet--3 { top: 3%;  left: 62%; animation: comet calc(14s / var(--anim-speed)) ease-in infinite; animation-delay: 10s; }
@keyframes comet {
  0%   { opacity: 0; transform: translate(0,0) rotate(30deg) scale(0.6); }
  3%   { opacity: 1; }
  15%  { opacity: 1; }
  20%  { opacity: 0; transform: translate(58vw, 40vh) rotate(30deg) scale(1); }
  100% { opacity: 0; transform: translate(58vw, 40vh) rotate(30deg); }
}

/* Logo medallion — sits in the arch doorway */
.logo-badge {
  position: relative;
  width: clamp(104px, 15vw, 150px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #191510, #050505 74%);
  border: 1px solid var(--gold-line);
  box-shadow: 0 0 60px var(--gold-glow), 0 18px 44px rgba(0,0,0,0.7), inset 0 2px 6px rgba(255,255,255,0.10);
  animation: floaty calc(6s / var(--anim-speed)) ease-in-out infinite;
  overflow: hidden;
}
.logo-badge img { width: 100%; height: 100%; object-fit: cover; }
.logo-badge__mono {
  font-size: clamp(40px, 6.4vw, 62px); font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 24px var(--gold-glow);
}

@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

.brand-name {
  margin: 6px 0 8px; font-size: clamp(42px, 8.4vw, 92px); font-weight: 800;
  letter-spacing: 0.06em; line-height: 1.02;
  background: linear-gradient(180deg, #fffdf6, var(--gold-pale) 42%, var(--gold) 78%, #a8842a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.85)) drop-shadow(0 0 26px rgba(212,175,55,0.35));
  position: relative;
}
.brand-name::after {
  content: ""; position: absolute; left: -20%; top: 0; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.7), transparent);
  -webkit-background-clip: text; background-clip: text;
  transform: skewX(-18deg);
  animation: shine calc(6s / var(--anim-speed)) ease-in-out infinite;
  mix-blend-mode: overlay; pointer-events: none;
}
@keyframes shine { 0%,80%,100% { left: -40%; } 40% { left: 100%; } }

.brand-tagline { margin: 0 0 30px; color: var(--ink-dim); font-size: clamp(13px, 2.4vw, 17px); letter-spacing: 1px; }

/* ---- Contact grids ---- */
.contact-grid {
  position: relative; z-index: 2;
  display: grid; gap: 14px; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: 760px;
  margin-top: clamp(16px, 4vh, 40px);
}
.contact-grid--wide { max-width: 980px; grid-template-columns: repeat(4, 1fr); }

@keyframes pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }


/* ============================================================
   CONTACT CARD (shared component)
   ============================================================ */
.contact-card {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--radius); text-decoration: none;
  color: var(--ink); cursor: pointer; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,calc(var(--glass-alpha) + 0.05)), rgba(255,255,255,var(--glass-alpha)));
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--gold-line);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  will-change: transform;
}
.contact-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(220px 120px at var(--cx, 50%) var(--cy, 50%), rgba(212,175,55,0.18), transparent 70%);
  transition: opacity 0.3s ease;
}
.contact-card:hover, .contact-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold-soft);
  box-shadow: 0 22px 60px rgba(0,0,0,0.6), 0 0 40px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.12);
  outline: none;
}
.contact-card:hover::before, .contact-card:focus-visible::before { opacity: 1; }
.contact-card:focus-visible { box-shadow: 0 0 0 2px var(--gold-soft), 0 22px 60px rgba(0,0,0,0.6); }

.contact-card__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  color: var(--gold-soft);
  background: radial-gradient(circle at 35% 30%, rgba(212,175,55,0.22), rgba(212,175,55,0.06));
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 4px rgba(255,255,255,0.12);
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__body { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.contact-card__label { font-size: 14px; font-weight: 600; letter-spacing: 0.4px; }
.contact-card__value { font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-card__arrow { margin-left: auto; color: var(--gold); opacity: 0.55; transition: transform 0.3s var(--ease), opacity 0.3s; }
.contact-card__arrow svg { width: 18px; height: 18px; }
.contact-card:hover .contact-card__arrow { opacity: 1; transform: translateX(3px); }

/* ============================================================
   THEME SWITCH
   ============================================================ */
.theme-switch {
  position: fixed; top: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); z-index: 20;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px; border-radius: 40px; cursor: pointer;
  color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  backdrop-filter: blur(calc(var(--blur) * 0.7));
  -webkit-backdrop-filter: blur(calc(var(--blur) * 0.7));
  border: 1px solid var(--gold-line);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 24px var(--gold-glow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.theme-switch:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 40px var(--gold-glow); }
.theme-switch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gold-soft); }
.theme-switch__icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-soft); background: rgba(212,175,55,0.14); border: 1px solid var(--gold-line); }
.theme-switch__icon svg { width: 17px; height: 17px; }

/* ---- Theme morph transition overlay ---- */
.morph-overlay {
  position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 85% 8%, rgba(212,175,55,0.5), transparent 60%);
  backdrop-filter: blur(0px);
}
.morph-overlay.active { animation: morphSweep calc(0.75s / var(--anim-speed)) var(--ease); }
@keyframes morphSweep {
  0%   { opacity: 0; backdrop-filter: blur(0px); }
  45%  { opacity: 1; backdrop-filter: blur(14px); }
  100% { opacity: 0; backdrop-filter: blur(0px); }
}

/* ============================================================
   FOOTER + TOAST
   ============================================================ */
.privacy-footer {
  position: relative; z-index: 2; text-align: center; padding: 26px 20px 34px;
  color: var(--ink-dim); font-size: 12px; line-height: 1.6;
}
.privacy-footer p { margin: 4px 0; }
.privacy-note { max-width: 620px; margin: 0 auto; opacity: 0.7; font-size: 11px; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 30px);
  z-index: 40; padding: 12px 22px; border-radius: 40px; font-size: 13px; font-weight: 600;
  color: #111; background: linear-gradient(160deg, var(--gold-pale), var(--gold));
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 30px var(--gold-glow);
  opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .contact-grid--wide { max-width: 760px; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  :root { --blur: 22px; } /* mobile blur reduction per brief */
  .contact-grid, .contact-grid--wide { grid-template-columns: 1fr 1fr; }
  /* Keep the artwork wide enough to still read as an arch on phones */
  .archbg--orbit { height: clamp(460px, 74vh, 700px); }
  .archbg--split { width: min(720px, 168%); }
}
@media (max-width: 480px) {
  .contact-grid, .contact-grid--wide { grid-template-columns: 1fr; }
  .theme-switch__label { display: none; }
  .theme-switch { padding: 10px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.15s !important; }
  .bg-particles { display: none; }
  .brand-name::after { display: none; }
}