/* ==========================================================================
   ORMA LUXURY PERFUMES - HOSTINGER OPTIMIZED STYLES
   Brand Palette:
   - Base Palette: Atlantic Smoke (#34494D, Deep Slate Charcoal)
   - Typography & Accents: Warm Moonstone (#CDC8BB)
   - Foil Effect: Champagne Brushed Foil Sheen
   - Font: Bodoni Moda Medium
   ========================================================================== */

:root {
  --color-atlantic-smoke: #34494D;
  --color-atlantic-dark: #1F2C2F;
  --color-atlantic-deep: #0C1214;
  
  --color-warm-moonstone: #CDC8BB;
  --color-warm-moonstone-light: #F6F3ED;
  --color-warm-moonstone-muted: #959083;

  --gradient-champagne-foil: linear-gradient(
    135deg,
    #CDC8BB 0%,
    #F6F3EC 25%,
    #A8A294 50%,
    #FAF7F0 75%,
    #CDC8BB 100%
  );

  --font-brand: 'Cinzel', 'Trajan Sans Pro', 'Trajan', sans-serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  
  --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Basic Setup */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-atlantic-deep);
  color: var(--color-warm-moonstone);
  font-family: var(--font-brand);
  font-weight: 400;
}

/* High-Resolution Liquid Smoke Background Artwork Layer (with Hostinger Fallback) */
.bg-image-layer {
  position: fixed;
  top: -4%;
  left: -4%;
  width: 108vw;
  height: 108vh;
  background-color: var(--color-atlantic-deep);
  background-image: 
    radial-gradient(ellipse at 50% 40%, rgba(52, 73, 77, 0.45) 0%, rgba(31, 44, 47, 0.8) 50%, rgba(12, 18, 20, 0.98) 100%),
    url('images/clean_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  filter: brightness(0.95) contrast(1.08) saturate(1.05);
  animation: bgBreathing 24s infinite alternate ease-in-out;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bgBreathing {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.03) rotate(0.4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Dynamic Ambient Particle & Dust Canvas */
#liquid-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
}

/* Ambient Atmospheric Vignette Layer */
.ambient-vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(52, 73, 77, 0.05) 0%,
    rgba(15, 22, 24, 0.6) 65%,
    rgba(10, 15, 16, 0.92) 100%
  );
}

/* Main Hero Container */
.liquid-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Orbit Container & Revolving Star */
.orbit-box {
  position: relative;
  width: 680px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Elliptical Wave Orbit Ring Track */
.fluid-orbit-ring {
  position: absolute;
  width: 600px;
  height: 260px;
  border: 1px dashed rgba(205, 200, 187, 0.3);
  border-radius: 50%;
  transform: rotateX(68deg) rotateY(-10deg);
  box-shadow: 
    0 0 30px rgba(205, 200, 187, 0.08),
    inset 0 0 20px rgba(205, 200, 187, 0.04);
  pointer-events: none;
}

/* Revolving Liquid Star Particle */
.revolving-liquid-star {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  pointer-events: none;
  z-index: 15;
  transition: transform 0.05s linear;
}

.star-core {
  width: 14px;
  height: 14px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 
    0 0 12px #FFFFFF,
    0 0 25px var(--color-warm-moonstone),
    0 0 55px rgba(205, 200, 187, 0.95);
}

.liquid-glow {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 26px;
  height: 26px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(205, 200, 187, 0) 70%);
  border-radius: 50%;
  animation: liquidPulse 2s infinite ease-in-out;
}

.liquid-halo {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(205, 200, 187, 0.45);
  border-radius: 50%;
  animation: haloRipple 2.5s infinite linear;
}

@keyframes liquidPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}

@keyframes haloRipple {
  0% { transform: scale(0.8); opacity: 0.85; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Single Crisp Floating ORMA Logo Unit */
.liquid-logo-content {
  position: relative;
  z-index: 12;
  text-align: center;
  padding: 1rem;
}

.brand-tag {
  font-size: 0.75rem;
  letter-spacing: 0.38em;
  color: var(--color-warm-moonstone-muted);
  margin-bottom: 1.2rem;
  font-weight: 500;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}

/* ORMA Logo Typography */
.brand-logo {
  font-family: var(--font-brand);
  font-size: 6.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  background: var(--gradient-champagne-foil);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: foilShimmer 6s linear infinite;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.85));
  margin-bottom: 1.2rem;
}

@keyframes foilShimmer {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Diamond Divider Line */
.diamond-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.diamond-divider .line {
  height: 1px;
  width: 75px;
  background: linear-gradient(90deg, transparent, var(--color-warm-moonstone), transparent);
}

.diamond-divider .diamond {
  font-size: 0.75rem;
  color: var(--color-warm-moonstone);
  text-shadow: 0 0 10px rgba(205, 200, 187, 0.6);
}

.brand-slogan {
  font-family: var(--font-brand);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--color-warm-moonstone);
  text-transform: uppercase;
  text-shadow: 0 8px 25px rgba(0, 0, 0, 0.9);
  margin-bottom: 2.5rem;
}

/* Coming Soon Pill */
.coming-soon-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1.6rem;
  background: rgba(205, 200, 187, 0.06);
  border: 1px solid rgba(205, 200, 187, 0.28);
  border-radius: 30px;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--color-warm-moonstone);
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: var(--transition-smooth);
}

.coming-soon-pill:hover {
  border-color: rgba(205, 200, 187, 0.5);
  background: rgba(205, 200, 187, 0.12);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-warm-moonstone);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-warm-moonstone);
  animation: pulseDot 1.8s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Responsive */
@media (max-width: 700px) {
  .orbit-box {
    width: 350px;
    height: 320px;
  }
  .fluid-orbit-ring {
    width: 330px;
    height: 190px;
  }
  .brand-logo {
    font-size: 4.5rem;
  }
  .brand-slogan {
    font-size: 0.95rem;
    letter-spacing: 0.2em;
  }
}