/* ═══════════════════════════════════════════════════════════════════════════
   VELVET NOIR — آتی شاپ Luxury Design System
   Philosophy: Editorial Minimalism × 3D Hyperrealism × Cinematic Parallax
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Luxury Palette */
  --obsidian:      #030205;
  --ink:           #0A0808;
  --charcoal:      #141018;
  --graphite:      #1E1A24;
  --rose-gold:     #C9956C;
  --rose-gold-2:   #B8755A;
  --champagne:     #F7E7CE;
  --champagne-dim: rgba(247, 231, 206, 0.55);
  --liquid-gold:   #D4AF37;
  --liquid-gold-2: #B8960C;
  --pearl:         rgba(247, 231, 206, 0.06);
  --pearl-glow:    rgba(247, 231, 206, 0.12);
  --blush:         #E8A4A0;
  --merlot:        #6B1D3A;
  --midnight:      rgba(3, 2, 5, 0.92);
  --glass-luxury:  rgba(20, 16, 24, 0.75);
  --border-luxury: rgba(201, 149, 108, 0.18);
  --border-gold:   rgba(212, 175, 55, 0.3);

  /* Typography */
  --font-display:  'Cormorant', 'Playfair Display', Georgia, serif;
  --font-ui:       'Inter', 'Montserrat', system-ui, sans-serif;

  /* Spacing */
  --section-pad: clamp(5rem, 10vw, 9rem);
  --container:   min(90rem, 92vw);

  /* Animations */
  --ease-luxury:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-micro:     180ms;
  --dur-smooth:    420ms;
  --dur-dramatic:  900ms;
}

/* ── Base Override ─────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--obsidian) !important;
  color: var(--champagne) !important;
  font-family: var(--font-ui) !important;
  overflow-x: hidden;
}

/* ── Grain Texture Overlay ─────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Luxury Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rose-gold), var(--liquid-gold));
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO SECTION — Full-Screen Cinematic Experience
   ══════════════════════════════════════════════════════════════════════════════ */
.hero-luxury {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  overflow: hidden;
  background: var(--obsidian);
  isolation: isolate;
}

/* Radial spotlight that follows mouse */
.hero-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60vw 60vh at var(--mx, 50%) var(--my, 40%),
    rgba(201, 149, 108, 0.09) 0%,
    rgba(212, 175, 55, 0.04) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 2;
  transition: background 0.15s ease;
}

/* Deep background gradient */
.hero-luxury::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 70% 50%, rgba(107, 29, 58, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(201, 149, 108, 0.07) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}

.hero-luxury__inner {
  position: relative;
  z-index: 3;
  width: var(--container);
  margin: 0 auto;
  padding: clamp(6rem, 10vh, 9rem) 0 clamp(4rem, 6vh, 6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* ── Overline badge ─────────────────────────────────────────────────────────── */
.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2rem;
  /* opacity set by GSAP — default visible as fallback */
}

.hero-overline__line {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--rose-gold), transparent);
  flex-shrink: 0;
}

.hero-overline__text {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--rose-gold);
}

/* ── Main Heading ───────────────────────────────────────────────────────────── */
.hero-heading-luxury {
  font-family: var(--font-display) !important;
  font-size: clamp(4.5rem, 11vw, 13rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--champagne);
  margin: 0 0 1.5rem;
  /* opacity set by GSAP */
  overflow: visible;
}

.hero-heading-luxury .line-1 {
  display: block;
}

.hero-heading-luxury .line-2 {
  display: block;
  background: linear-gradient(135deg, var(--rose-gold) 0%, var(--liquid-gold) 50%, var(--champagne) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Sub‑headline ───────────────────────────────────────────────────────────── */
.hero-sub-luxury {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-style: italic;
  font-weight: 300;
  color: var(--champagne-dim);
  line-height: 1.6;
  max-width: 42ch;
  margin-bottom: 3.5rem;
  /* opacity + transform set by GSAP */
}

/* ── CTA Row ─────────────────────────────────────────────────────────────────── */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  /* opacity + transform set by GSAP */
}

/* Primary CTA — gold button */
.btn-luxury-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 42px;
  background: linear-gradient(135deg, var(--rose-gold) 0%, var(--liquid-gold) 100%);
  color: var(--obsidian) !important;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-smooth) var(--ease-luxury),
              box-shadow var(--dur-smooth) var(--ease-luxury);
}

.btn-luxury-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--liquid-gold) 0%, var(--champagne) 100%);
  opacity: 0;
  transition: opacity var(--dur-smooth) ease;
}

.btn-luxury-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.4), 0 4px 16px rgba(212, 175, 55, 0.2);
}

.btn-luxury-primary:hover::before { opacity: 1; }
.btn-luxury-primary span { position: relative; z-index: 1; }

/* Ghost CTA */
.btn-luxury-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 36px;
  border: 1px solid var(--border-luxury);
  color: var(--champagne-dim) !important;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color var(--dur-smooth) ease,
              color var(--dur-smooth) ease,
              background var(--dur-smooth) ease;
}

.btn-luxury-ghost:hover {
  border-color: var(--rose-gold);
  color: var(--champagne) !important;
  background: rgba(201, 149, 108, 0.07);
}

/* ── Hero Visual (right/bottom) ─────────────────────────────────────────────── */
.hero-visual-luxury {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  /* opacity set by GSAP */
}

.hero-orb {
  position: relative;
  width: clamp(280px, 38vw, 580px);
  aspect-ratio: 1;
}

/* Main orb glow */
.hero-orb__glow {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(201, 149, 108, 0.25) 0%,
    rgba(212, 175, 55, 0.12) 30%,
    rgba(107, 29, 58, 0.08) 60%,
    transparent 100%
  );
  animation: orbPulse 6s ease-in-out infinite;
  filter: blur(30px);
}

/* Decorative circle rings */
.hero-orb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--border-luxury);
  animation: ringRotate 20s linear infinite;
}

.hero-orb__ring:nth-child(2) {
  inset: -12%;
  border-color: rgba(212, 175, 55, 0.1);
  animation-duration: 30s;
  animation-direction: reverse;
}

.hero-orb__ring:nth-child(3) {
  inset: -28%;
  border-color: rgba(201, 149, 108, 0.05);
  animation-duration: 45s;
}

/* Product placeholder orb */
.hero-orb__product {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 50% 80% at 30% 20%, rgba(247,231,206,0.15) 0%, transparent 50%),
    radial-gradient(circle at center, var(--charcoal) 0%, var(--obsidian) 100%);
  border: 1px solid rgba(201, 149, 108, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(247,231,206,0.1),
    0 0 80px rgba(201, 149, 108, 0.15),
    0 0 160px rgba(107, 29, 58, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Product image inside orb */
.hero-orb__product img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(201,149,108,0.4));
  animation: floatProduct 7s ease-in-out infinite;
}

/* ── Hero Stats row ──────────────────────────────────────────────────────────── */
.hero-stats-luxury {
  display: flex;
  gap: 3rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-luxury);
  /* opacity + transform set by GSAP */
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-stat__number {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(135deg, var(--champagne), var(--rose-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-stat__label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 231, 206, 0.4);
}

/* ── Scroll indicator ────────────────────────────────────────────────────────── */
.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* opacity set by GSAP */
  z-index: 4;
}

.hero-scroll-hint__mouse {
  width: 22px;
  height: 36px;
  border: 1px solid rgba(201,149,108,0.4);
  border-radius: 11px;
  position: relative;
}

.hero-scroll-hint__mouse::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 7px;
  background: var(--rose-gold);
  border-radius: 2px;
  animation: scrollDot 2.5s ease-in-out infinite;
}

.hero-scroll-hint__text {
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(201, 149, 108, 0.5);
}

/* ── Vertical label (side text) ──────────────────────────────────────────────── */
.hero-side-label {
  position: absolute;
  inset-inline-start: -0.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201, 149, 108, 0.35);
  z-index: 4;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NAVIGATION — Floating Dark Glass
   ══════════════════════════════════════════════════════════════════════════════ */
.navbar,
nav.navbar {
  background: rgba(3, 2, 5, 0.72) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--border-luxury) !important;
}

.navbar.scrolled {
  background: rgba(3, 2, 5, 0.9) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PRODUCT CARDS — 3D Luxury
   ══════════════════════════════════════════════════════════════════════════════ */
.product-card,
.product-card-luxury {
  background: var(--glass-luxury) !important;
  border: 1px solid var(--border-luxury) !important;
  border-radius: 4px !important;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform var(--dur-smooth) var(--ease-luxury),
    box-shadow var(--dur-smooth) var(--ease-luxury),
    border-color var(--dur-smooth) ease;
  cursor: pointer;
}

.product-card::before,
.product-card-luxury::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(201,149,108,0.06) 0%,
    transparent 50%,
    rgba(212,175,55,0.04) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--dur-smooth) ease;
}

.product-card:hover,
.product-card-luxury:hover {
  border-color: rgba(201, 149, 108, 0.4) !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.1),
    0 20px 60px rgba(3, 2, 5, 0.6),
    0 4px 20px rgba(201, 149, 108, 0.15);
}

.product-card:hover::before,
.product-card-luxury:hover::before {
  opacity: 1;
}

/* ── Specular highlight follows mouse ──────────────────────────────────────── */
.product-card .card-specular {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 200px at var(--cx, 50%) var(--cy, 50%),
    rgba(247,231,206,0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.product-card:hover .card-specular {
  opacity: 1;
}

/* Price tag */
.product-price-luxury {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--liquid-gold) !important;
}

.product-price-luxury .price-original {
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(247,231,206,0.3) !important;
  text-decoration: line-through;
  margin-inline-start: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTIONS — Editorial Layout
   ══════════════════════════════════════════════════════════════════════════════ */
section {
  background: var(--obsidian);
}

section:nth-child(even) {
  background: var(--ink);
}

.section-luxury {
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

/* Section heading — oversized editorial */
.section-title-luxury {
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--champagne);
  margin-bottom: 1.5rem;
}

.section-title-luxury .accent-word {
  background: linear-gradient(135deg, var(--rose-gold), var(--liquid-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

/* Section overline */
.section-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rose-gold);
}

.section-overline::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--rose-gold);
  flex-shrink: 0;
}

/* ── Horizontal divider ───────────────────────────────────────────────────────── */
.divider-luxury {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--border-gold) 30%,
    var(--border-gold) 70%,
    transparent
  );
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FEATURES SECTION — Icon Cards
   ══════════════════════════════════════════════════════════════════════════════ */
.feature-card-luxury {
  padding: 2.5rem 2rem;
  background: var(--pearl);
  border: 1px solid var(--border-luxury);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-smooth) var(--ease-luxury),
              border-color var(--dur-smooth) ease;
}

.feature-card-luxury::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--rose-gold), var(--liquid-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-dramatic) var(--ease-luxury);
}

.feature-card-luxury:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 149, 108, 0.35);
}

.feature-card-luxury:hover::after {
  transform: scaleX(1);
}

.feature-icon-luxury {
  width: 52px;
  height: 52px;
  margin-bottom: 1.5rem;
  color: var(--rose-gold);
  filter: drop-shadow(0 0 12px rgba(201,149,108,0.35));
  transition: filter var(--dur-smooth) ease;
}

.feature-card-luxury:hover .feature-icon-luxury {
  filter: drop-shadow(0 0 20px rgba(212,175,55,0.5));
  color: var(--liquid-gold);
}

.feature-title-luxury {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--champagne);
  margin-bottom: 0.75rem;
}

.feature-desc-luxury {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(247,231,206,0.5);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MARQUEE STRIP — Animated Brand Strip
   ══════════════════════════════════════════════════════════════════════════════ */
.marquee-strip {
  overflow: hidden;
  background: linear-gradient(135deg, var(--charcoal), var(--graphite));
  border-top: 1px solid var(--border-luxury);
  border-bottom: 1px solid var(--border-luxury);
  padding: 1.2rem 0;
}

.marquee-track {
  display: flex;
  gap: 0;
  animation: marqueeScroll 28s linear infinite;
  width: max-content;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 2.5rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(247,231,206,0.35);
  white-space: nowrap;
}

.marquee-item .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rose-gold);
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE LOADER — Luxury Brand
   ══════════════════════════════════════════════════════════════════════════════ */
.page-loader {
  background: var(--obsidian) !important;
}

.loader-brand,
.loader-brand-accent {
  font-family: var(--font-display) !important;
}

.loader-brand {
  color: var(--champagne) !important;
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.loader-brand-accent {
  color: var(--rose-gold) !important;
  font-size: 2.8rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
}

.loader-bar {
  background: rgba(247,231,206,0.06) !important;
}

.loader-bar-fill {
  background: linear-gradient(90deg, var(--rose-gold), var(--liquid-gold)) !important;
  box-shadow: 0 0 20px rgba(212,175,55,0.4) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CURSOR — Rose Gold Luxury
   ══════════════════════════════════════════════════════════════════════════════ */
.cursor-dot {
  background: var(--rose-gold) !important;
  box-shadow: 0 0 8px rgba(201,149,108,0.8) !important;
}

.cursor-ring {
  border-color: rgba(201,149,108,0.5) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════════ */
@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%       { transform: scale(1.06); opacity: 1; }
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes floatProduct {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(1.5deg); }
  66%       { transform: translateY(-8px) rotate(-1deg); }
}

@keyframes scrollDot {
  0%   { top: 6px; opacity: 1; }
  70%  { top: 18px; opacity: 0; }
  71%  { top: 6px; opacity: 0; }
  100% { top: 6px; opacity: 1; }
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER — Obsidian Luxury
   ══════════════════════════════════════════════════════════════════════════════ */
footer {
  background: var(--ink) !important;
  border-top: 1px solid var(--border-luxury) !important;
}

footer h4 {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--champagne) !important;
  letter-spacing: 0.02em !important;
}

footer a {
  color: rgba(247,231,206,0.45) !important;
  transition: color var(--dur-micro) ease !important;
  text-decoration: none !important;
}

footer a:hover {
  color: var(--rose-gold) !important;
}

.footer-brand span:last-child {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--champagne) !important;
}

.footer-aurora-bar {
  background: linear-gradient(90deg, var(--merlot), var(--rose-gold), var(--liquid-gold), var(--rose-gold), var(--merlot)) !important;
  box-shadow: 0 0 30px rgba(201,149,108,0.3) !important;
  height: 2px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL UTILITY CLASSES
   ══════════════════════════════════════════════════════════════════════════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity var(--dur-dramatic) var(--ease-luxury),
              transform var(--dur-dramatic) var(--ease-luxury);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity var(--dur-dramatic) var(--ease-luxury),
              transform var(--dur-dramatic) var(--ease-luxury);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delay helpers */
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }
.delay-5 { transition-delay: 500ms; }

/* ── Responsive ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-visual-luxury {
    position: relative;
    width: 100%;
    inset-inline-end: auto;
    order: -1;
    margin-bottom: 2rem;
    opacity: 1 !important;
  }

  .hero-orb {
    width: clamp(200px, 70vw, 300px);
  }

  .hero-stats-luxury {
    gap: 2rem;
    flex-wrap: wrap;
  }

  .hero-side-label {
    display: none;
  }
}

@media (min-width: 769px) {
  .hero-luxury__inner {
    grid-template-columns: 55% 1fr;
  }

  .hero-visual-luxury {
    grid-column: 2;
    grid-row: 1 / 99;
  }

  .hero-heading-luxury {
    grid-column: 1;
  }
}

/* ── Prefers-reduced-motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-orb__glow,
  .hero-orb__ring,
  .hero-orb__product img,
  .marquee-track,
  .hero-scroll-hint__mouse::before {
    animation: none;
  }

  .reveal-up,
  .reveal-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}