/* =============================================================
   NEW WAY COLLECTIONS — Cinematic billboard homepage
   File: catalog/view/stylesheet/home/home-hero.css

   A single-screen luxury fragrance gateway.
   Mobile-first. Class-prefixed (`nw-home-`). Standalone — no
   reliance on OpenCart's default theme tokens.
   ============================================================= */

/* ---------- Defensive resets (scoped to this body class) ---- */
body.nw-home-body{
  margin:0;
  padding:0;
  background:#000;
  color:#f5f1e8;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* Prevent the OpenCart-wide page from forcing a scrollbar */
  min-height:100vh;
}
body.nw-home-body *,
body.nw-home-body *::before,
body.nw-home-body *::after{box-sizing:border-box;}

/* ---------- Design tokens (CSS variables) ------------------- */
.nw-home-body{
  --nw-bg:           #000000;
  --nw-ink:          #f5f1e8;     /* off-white */
  --nw-ink-dim:      rgba(245,241,232,0.62);
  --nw-ink-faint:    rgba(245,241,232,0.32);
  --nw-gold:         #c9a961;     /* antique gold */
  --nw-gold-warm:    #d4b87a;
  --nw-gold-deep:    #8e7338;

  --nw-serif:  'Cormorant Garamond', 'Times New Roman', serif;
  --nw-sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;

  --nw-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Veil strength — the brief asks for ~0.28 black */
  --nw-veil:   rgba(0,0,0,0.28);
}

/* =============================================================
   STAGE  ·  100vh / 100dvh fullscreen container
   ============================================================= */
.nw-home-stage{
  position:relative;
  display:block;
  width:100%;
  height:100vh;
  height:100dvh;            /* iOS Safari: avoid 100vh clipping */
  min-height:560px;         /* sanity floor for tiny viewports */
  overflow:hidden;
  isolation:isolate;        /* contain mix-blend-mode on grain */
  background:var(--nw-bg);
}

/* =============================================================
   BACKGROUND PHOTO  ·  responsive desktop / mobile billboards
   ============================================================= */
.nw-home-bg{
  position:absolute;
  inset:-3% -3%;            /* slight bleed for parallax travel  */
  z-index:1;
  background-color:#000;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  /* Slight cinematic warmth on the photograph */
  filter:contrast(1.04) saturate(1.04);
  /* Idle drift = a barely-perceptible breath; parallax JS layers
     translate3d on top of this when supported. */
  animation: nw-home-breath 22s ease-in-out infinite alternate;
  will-change:transform;
  transform: translate3d(0,0,0);
}

@keyframes nw-home-breath{
  0%   { transform: translate3d(0, 0, 0)      scale(1.0); }
  100% { transform: translate3d(0, -0.6%, 0)  scale(1.02);}
}

/* =============================================================
   OVERLAYS  ·  veil + vignette + film grain
   ============================================================= */
.nw-home-veil{
  position:absolute;
  inset:0;
  z-index:2;
  background:var(--nw-veil);
  pointer-events:none;
}

/* Edge vignette anchors typography on top of the photo */
.nw-home-vignette{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background: #000;
}

/* Cinematic film grain (very subtle, soft-light blend) */
.nw-home-grain{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0.03;
  mix-blend-mode:soft-light;
  background-repeat:repeat;
  background-size:320px 320px;
}

/* =============================================================
   FRAME  ·  foreground content
   ============================================================= */
.nw-home-frame{
  position:relative;
  z-index:5;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 4vw, 4rem);
  text-align:center;
}

/* =============================================================
   TOP  ·  Brand mark + tagline
   ============================================================= */
.nw-home-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.7rem;
  width:100%;
  margin-top: clamp(1rem, 5vh, 3.2rem);
  will-change:transform;
}

.nw-home-eyebrow{
  font-family:var(--nw-sans);
  font-size: clamp(0.62rem, 1.4vw, 0.78rem);
  font-weight:400;
  letter-spacing: 0.45em;
  text-transform:uppercase;
  color:var(--nw-ink-faint);
  margin:0;
}

.nw-home-brand{
  font-family:var(--nw-serif);
  font-weight:700;
  margin:0;
  line-height:0.95;
  font-size: clamp(3rem, 7vw, 5.4rem);
  letter-spacing: 0.12em;
  text-transform:uppercase;
  color:var(--nw-gold);
  text-shadow:
    0 0 18px rgba(201,169,97,0.18),
    0 2px 22px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  gap:0.05em;
}

.nw-home-brand-line{
  display:block;
}

@media (min-width: 768px){
  .nw-home-brand{
    flex-direction:row;
    gap:0.5em;
    font-size: clamp(3rem, 7vw, 4rem);
    letter-spacing: 0.18em;
  }
}

.nw-home-rule{
  display:block;
  width:42px;
  height:1px;
  margin-top:1rem;
  background:linear-gradient(90deg, transparent, var(--nw-gold) 50%, transparent);
  opacity:0.7;
}

/* =============================================================
   BOTTOM  ·  CTA groups (Leader left, Empress right on desktop)
   ============================================================= */
.nw-home-bottom{
  display:flex;
  flex-direction:column;
  gap: clamp(1.6rem, 4vw, 2.4rem);
  width:100%;
  margin-bottom: clamp(1rem, 4vh, 2.6rem);
  align-items:center;
  will-change:transform;
}

@media (min-width: 900px){
  .nw-home-bottom{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap: clamp(2rem, 6vw, 6rem);
  }
}

/* ---------- A single CTA group (Leader / Empress) ----------- */
.nw-home-cta-group{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.4rem;
  max-width: 340px;
  width:100%;
}

@media (min-width: 900px){
  .nw-home-cta-group{
    align-items:flex-start;
    text-align:left;
  }
  .nw-home-cta-empress{
    align-items:flex-end;
    text-align:right;
  }
}

.nw-home-cta-eyebrow{
  font-family:var(--nw-sans);
  font-size: 0.62rem;
  font-weight:500;
  letter-spacing: 0.4em;
  text-transform:uppercase;
  color:var(--nw-ink-faint);
}

.nw-home-cta-name{
  font-family:var(--nw-serif);
  font-weight:600;
  margin:0;
  font-size: clamp(2.6rem, 3.4vw, 3.4rem);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--nw-gold);
  line-height:1;
}

.nw-home-cta-quote{
  font-family:var(--nw-serif);
  font-style:italic;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: rgb(245 241 232 / 82%);
  font-weight:600;
  margin: 0.2rem 0 0.9rem;
  line-height:1.5;
  max-width:30ch;
}

@media (min-width: 900px){
  .nw-home-cta-empress .nw-home-cta-quote{ margin-left:auto; }
}

/* =============================================================
   BUTTONS  ·  glass-dark luxury, subtle gold border glow
   ============================================================= */
.nw-home-cta-buttons{
  display:flex;
  flex-direction:column;
  gap:0.65rem;
  width:100%;
}

@media (min-width: 480px){
  .nw-home-cta-buttons{
    flex-direction:row;
    flex-wrap:wrap;
    gap: 0.7rem;
  }
}

.nw-home-cta-empress .nw-home-cta-buttons{
  justify-content:flex-end;
}

.nw-home-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  min-height: 46px;
  font-family:var(--nw-sans);
  font-size: 0.72rem;
  font-weight:500;
  letter-spacing: 0.3em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--nw-ink);
  border-radius: 2px;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  /* Glass-dark fill */
  background:
    linear-gradient(180deg, rgba(20,18,14,0.55) 0%, rgba(8,7,5,0.70) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
          backdrop-filter: blur(6px) saturate(115%);
  border: 1px solid rgba(201,169,97,0.45);
  box-shadow:
    0 6px 22px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(245,241,232,0.06);
  transition:
    transform .55s var(--nw-ease),
    border-color .55s var(--nw-ease),
    box-shadow .55s var(--nw-ease),
    background .55s var(--nw-ease),
    color .55s var(--nw-ease);
  white-space:nowrap;
}

/* Hairline gold sheen swept on hover */
.nw-home-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(212,184,122,0.12) 35%,
    transparent 70%);
  transform:translateX(-110%);
  transition:transform .9s var(--nw-ease);
  pointer-events:none;
}

.nw-home-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(212,184,122,0.85);
  color:var(--nw-gold-warm);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.55),
    0 0 0 1px rgba(201,169,97,0.18),
    0 0 22px rgba(201,169,97,0.20),
    inset 0 1px 0 rgba(245,241,232,0.08);
}

.nw-home-btn:hover::before{ transform:translateX(110%); }

.nw-home-btn:focus-visible{
  outline:none;
  border-color: var(--nw-gold-warm);
  box-shadow:
    0 0 0 2px rgba(212,184,122,0.5),
    0 14px 34px rgba(0,0,0,0.55);
}

.nw-home-btn:active{
  transform: translateY(0);
}

/* Primary "Explore X" — slightly heavier border presence */
.nw-home-btn-primary{
  background: rgba(201,169,97,0.65);
    /*linear-gradient(180deg, rgba(35,28,18,0.65) 0%, rgba(14,11,7,0.80) 100%);*/
  border-color: rgba(201,169,97,0.65);
}

.nw-home-btn-arrow{
  display:inline-block;
  font-size:0.95rem;
  letter-spacing:0;
  transform:translateX(0);
  transition: transform .5s var(--nw-ease);
  color:var(--nw-gold);
}
.nw-home-btn-primary:hover .nw-home-btn-arrow{
  transform:translateX(4px);
}

/* RTL: flip the arrow direction visually */
[dir="rtl"] .nw-home-btn-arrow{ transform: scaleX(-1); }
[dir="rtl"] .nw-home-btn-primary:hover .nw-home-btn-arrow{
  transform: scaleX(-1) translateX(4px);
}

/* Ghost "WhatsApp" — fainter, secondary hierarchy */
.nw-home-btn-ghost{
  background:
    linear-gradient(180deg, rgba(15,14,11,0.42) 0%, rgba(6,6,5,0.62) 100%);
  border-color: rgba(245,241,232,0.18);
  color:var(--nw-ink-dim);
}
.nw-home-btn-ghost:hover{
  border-color: rgba(76,175,80,0.55);   /* WhatsApp green hint */
  color: #cfead0;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.55),
    0 0 18px rgba(76,175,80,0.18),
    inset 0 1px 0 rgba(245,241,232,0.06);
}
.nw-home-btn-dot{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:#4caf50;
  box-shadow: 0 0 10px rgba(76,175,80,0.7);
}

/* =============================================================
   LARGE SCREENS — give the brand more breathing room
   ============================================================= */
@media (min-width: 1280px){
  .nw-home-frame{
    padding: 3rem 6rem 3.5rem;
  }
  .nw-home-rule{ width:60px; }
}

/* =============================================================
   PORTRAIT MOBILE FINE-TUNING
   ============================================================= */
@media (max-width: 480px){
  .nw-home-brand{
    letter-spacing:0.1em;
  }
  .nw-home-cta-quote{
    margin-bottom:0.6rem;
  }
  .nw-home-btn{
    padding: 0.8rem 1.1rem;
    letter-spacing: 0.24em;
    font-size: 0.68rem;
  }
}

/* =============================================================
   ACCESSIBILITY  ·  reduced motion + JS-off fallback
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  .nw-home-bg{ animation:none; }
  .nw-home-btn,
  .nw-home-btn-arrow,
  .nw-home-btn::before{
    transition:none !important;
  }
}

/* If JS adds .is-parallax, the elements get a no-op transform.
   If it doesn't (no JS / touch / reduced motion), nothing breaks. */
.nw-home-stage[data-parallax-ready="true"] .nw-home-bg{
  animation:none;
}