/* ===========================================================
   Bliss Home Diffuser — "Scent Atlas" microsite
   Quiet-luxury, image-led, Cartier W&W inspired
   =========================================================== */

:root{
  --atlas-bg:#0a0a0a;
  --atlas-cream:#f5e9d8;
  --atlas-cream-dim:#e6dccb;
  --atlas-gold-1:#e9c98f;
  --atlas-gold-2:#c9893f;
  --atlas-gold-3:#a05a2c;
  --atlas-gold-grad:linear-gradient(135deg,var(--atlas-gold-1),var(--atlas-gold-2),var(--atlas-gold-3));
  --atlas-serif:'Playfair Display','Cormorant Garamond',serif;
  --atlas-sans:'Jost','Helvetica Neue',Arial,sans-serif;
}

/* ---------- Reset / base ---------- */
.atlas{
  background:var(--atlas-bg);
  color:var(--atlas-cream);
  font-family:var(--atlas-sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.atlas *{box-sizing:border-box;}
.atlas a{color:inherit; text-decoration:none;}
.atlas img{display:block; max-width:100%;}

/* ---------- Custom cursor ---------- */
.atlas-cursor{ display:none; }
@media (hover:hover) and (pointer:fine){
  .atlas, .atlas a, .atlas button{ cursor:none; }
  .atlas-cursor{
    display:block;
    position:fixed;
    top:0; left:0;
    width:26px; height:26px;
    margin:-13px 0 0 -13px;
    pointer-events:none;
    z-index:9999;
    transition:transform .18s ease-out, opacity .2s ease;
    will-change:transform;
    opacity:0;
  }
  .atlas-cursor.is-visible{ opacity:1; }
  .atlas-cursor svg{
    width:100%; height:100%;
    transform-origin:center;
    animation:atlas-cursor-spin 9s linear infinite;
  }
  .atlas-cursor.is-active svg{
    animation-duration:1.6s;
  }
  .atlas-cursor.is-active{
    transform:translate(var(--cx,0),var(--cy,0)) scale(1.5);
  }
  @keyframes atlas-cursor-spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }
}

/* ---------- Top chrome ---------- */
.atlas-chrome{
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px clamp(20px,4vw,48px);
  z-index:200;
  mix-blend-mode:difference;
}
.atlas-chrome-side{
  display:flex; align-items:center; gap:18px;
  flex:1;
}
.atlas-chrome-side.right{ justify-content:flex-end; }

.atlas-icon-btn{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border:1px solid rgba(245,233,216,.0);
  border-radius:50%;
  color:var(--atlas-cream);
  transition:border-color .25s ease, background .25s ease;
}
.atlas-icon-btn:hover{
  border-color:rgba(245,233,216,.35);
  background:rgba(245,233,216,.06);
}
.atlas-icon-btn svg{ width:20px; height:20px; }

.atlas-logo{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  transition:opacity .35s ease;
}
.atlas-logo.is-hidden{
  opacity:0 !important;
  pointer-events:none;
}
.atlas-logo img{
  height:46px; width:auto;
}

.atlas-cart{
  position:relative;
}
.atlas-cart-count{
  position:absolute;
  top:-2px; right:-2px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--atlas-gold-grad);
  color:#0a0a0a;
  font-size:10px;
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Nav tray ---------- */
.atlas-nav-drawer{
  position:fixed; inset:0 auto 0 0;
  width:min(340px,82vw);
  height:100vh;
  background:rgba(10,10,10,.3);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:300;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  padding:clamp(40px,8vw,100px) clamp(36px,6vw,72px);
  transform:translateX(-100%);
  opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.atlas-nav-drawer.is-open{ transform:translateX(0); opacity:1; }
.atlas-nav-close{
  position:absolute; top:28px; right:32px;
  width:44px; height:44px;
  background:none; border:none;
  font-size:28px; line-height:1;
  font-weight:200;
  color:var(--atlas-cream);
  cursor:pointer;
}
.atlas-nav-links{
  display:flex; flex-direction:column; gap:22px;
}
.atlas-nav-links a{
  font-family:var(--atlas-sans);
  font-weight:300;
  font-size:15px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--atlas-cream);
  transition:opacity .2s ease, letter-spacing .25s ease;
}
.atlas-nav-links a:hover{ opacity:.6; letter-spacing:.28em; }
.atlas-nav-brand{
  margin-top:56px;
}
.atlas-nav-brand span{
  font-family:var(--atlas-sans);
  font-weight:300;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--atlas-gold-1);
}
@media (max-width:760px){
  .atlas-nav-drawer{ width:100vw; align-items:flex-start; }
}

/* ---------- Bottom chrome ---------- */
.atlas-bottom-chrome{
  position:fixed;
  bottom:0; left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px clamp(20px,4vw,48px);
  z-index:200;
  pointer-events:none;
}
.atlas-bottom-chrome > *{ pointer-events:auto; }

.atlas-lang{
  display:flex; align-items:center; gap:8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--atlas-cream-dim);
  background:transparent;
  border:none;
  padding:10px 4px;
}
.atlas-lang svg{ width:14px; height:14px; opacity:.7; }

.atlas-concierge{ position:relative; }
.atlas-concierge::after{
  content:attr(title);
  position:absolute;
  right:calc(100% + 12px); top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  font-family:var(--atlas-sans);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--atlas-cream-dim);
  background:rgba(10,10,10,.6);
  padding:8px 14px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.atlas-concierge:hover::after{ opacity:1; }

/* ---------- Search ---------- */
.atlas-search{
  position:relative;
  display:flex; align-items:center; gap:10px;
}
.atlas-search-bar{
  position:absolute;
  left:0; bottom:calc(100% + 14px);
  width:min(320px,calc(100vw - 80px));
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.atlas-search-bar.is-open{
  opacity:1; visibility:visible; transform:translateY(0);
}
.atlas-search-bar input{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(245,233,216,.25);
  border-radius:999px;
  padding:13px 20px;
  color:var(--atlas-cream);
  font-family:var(--atlas-sans);
  font-size:13px;
  letter-spacing:.04em;
  outline:none;
}
.atlas-search-bar input::placeholder{ color:var(--atlas-cream-dim); }
.atlas-search-bar input:focus{ border-color:var(--atlas-gold-1); }

/* ---------- Hero ---------- */
.atlas-hero{
  position:relative;
  height:100vh;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.atlas-hero video,
.atlas-hero .atlas-hero-fallback{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.78) saturate(1.05);
}
.atlas-hero-fallback{
  background:radial-gradient(ellipse at 50% 30%, #2a1f16 0%, #0a0a0a 70%);
}
.atlas-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.1) 40%, rgba(10,10,10,.65) 100%);
}
.atlas-hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0 24px;
  max-width:680px;
}
.atlas-hero-eyebrow{
  display:block;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--atlas-gold-1);
  margin-bottom:22px;
  opacity:0;
  animation:atlas-fade-up .9s ease forwards;
  animation-delay:.2s;
}
.atlas-hero-logo{
  width:clamp(70px,9vw,110px);
  height:auto;
  margin:0 auto 24px;
  opacity:0;
  animation:atlas-fade-up 1s ease forwards;
  animation-delay:.05s;
  transition:opacity .3s ease;
}
.atlas-hero-logo.is-hidden{ opacity:0 !important; }

/* Logo that sticks to the top once the hero logo scrolls out of view */
.atlas-logo-fixed{
  position:fixed;
  top:28px; left:50%;
  transform:translate(-50%,-18px);
  z-index:199;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.atlas-logo-fixed img{
  width:46px; height:46px;
}
.atlas-logo-fixed.is-visible{
  opacity:1;
  transform:translate(-50%,0);
  pointer-events:auto;
}
.atlas-logo-fixed.is-hidden{
  opacity:0 !important;
  pointer-events:none;
}
.atlas-hero h1{
  font-family:var(--atlas-serif);
  font-weight:500;
  font-size:clamp(2.6rem,7vw,5.2rem);
  line-height:1.08;
  letter-spacing:.01em;
  margin:0 0 22px;
  opacity:0;
  animation:atlas-fade-up 1s ease forwards;
  animation-delay:.4s;
}
.atlas-hero p{
  font-size:clamp(14px,1.6vw,17px);
  line-height:1.8;
  color:var(--atlas-cream-dim);
  max-width:480px;
  margin:0 auto;
  font-weight:300;
  opacity:0;
  animation:atlas-fade-up 1s ease forwards;
  animation-delay:.65s;
}
@keyframes atlas-fade-up{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- Intro strip ---------- */
.atlas-intro{
  padding:clamp(60px,12vh,140px) clamp(20px,6vw,80px) clamp(40px,8vh,90px);
  text-align:center;
}
.atlas-intro .eyebrow{
  display:block;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--atlas-gold-1);
  margin-bottom:20px;
}
.atlas-intro h2{
  font-family:var(--atlas-serif);
  font-weight:500;
  font-size:clamp(1.8rem,4vw,3rem);
  max-width:760px;
  margin:0 auto;
  line-height:1.3;
  color:var(--atlas-cream);
}

/* ---------- Scroll-reveal gallery ---------- */
.atlas-gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,2vw,28px);
  padding:0 clamp(20px,6vw,80px) clamp(80px,14vh,160px);
}

.atlas-card{
  position:relative;
  border-radius:2px;
  overflow:hidden;
  opacity:0;
  transform:translateY(48px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.atlas-card.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Varied spans for an editorial, non-uniform layout */
.atlas-card:nth-child(1){ grid-column:span 3; aspect-ratio:4/5; }
.atlas-card:nth-child(2){ grid-column:span 3; aspect-ratio:3/4; margin-top:8vh; }
.atlas-card:nth-child(3){ grid-column:span 2; aspect-ratio:1/1; }
.atlas-card:nth-child(4){ grid-column:span 4; aspect-ratio:16/10; margin-top:4vh; }
.atlas-card:nth-child(5){ grid-column:span 4; aspect-ratio:16/10; }
.atlas-card:nth-child(6){ grid-column:span 2; aspect-ratio:3/4; margin-top:6vh; }
.atlas-card:nth-child(7){ grid-column:span 3; aspect-ratio:4/5; margin-top:6vh; }
.atlas-card:nth-child(8){ grid-column:span 3; aspect-ratio:3/4; }
.atlas-card:nth-child(9){ grid-column:span 6; aspect-ratio:21/9; margin-top:4vh; }

.atlas-card .frame{
  position:absolute; inset:0;
  overflow:hidden;
}
.atlas-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
.atlas-card img.secondary{ opacity:0; }
.atlas-card:hover img.primary{ transform:scale(1.06); opacity:0; }
.atlas-card:hover img.secondary{ transform:scale(1.06); opacity:1; }

.atlas-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 55%, rgba(10,10,10,.55) 100%);
  pointer-events:none;
}
.atlas-card-label{
  position:absolute;
  left:24px; bottom:22px; right:24px;
  z-index:2;
}
.atlas-card-label .place{
  display:block;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--atlas-gold-1);
  margin-bottom:8px;
  opacity:.9;
}
.atlas-card-label h3{
  font-family:var(--atlas-serif);
  font-weight:500;
  font-size:clamp(1.2rem,2.4vw,1.7rem);
  margin:0;
  color:var(--atlas-cream);
}

@media (max-width:1100px){
  .atlas-gallery{ grid-template-columns:repeat(2,1fr); }
  .atlas-card:nth-child(n){ grid-column:span 1; aspect-ratio:4/5 !important; margin-top:0 !important; }
  .atlas-card:nth-child(odd){ margin-top:6vh !important; }
  .atlas-card:nth-child(9){ grid-column:span 2; aspect-ratio:16/10 !important; }
}
@media (max-width:640px){
  .atlas-gallery{ grid-template-columns:1fr; gap:18px; }
  .atlas-card:nth-child(odd){ margin-top:0 !important; }
  .atlas-chrome{ padding:18px 18px; }
  .atlas-bottom-chrome{ padding:18px; }
  .atlas-concierge span{ display:none; }
}

/* ---------- Reveal generic ---------- */
.atlas-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s ease, transform .9s ease;
}
.atlas-reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Footer ---------- */
.atlas-footer{
  position:relative;
  background:#050505;
  border-top:1px solid rgba(245,233,216,.08);
  padding:96px clamp(20px,6vw,80px) 40px;
  text-align:center;
}
.atlas-footer-logo{
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-50%);
  width:96px; height:96px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  z-index:2;
}
.atlas-footer-logo img{ width:100%; height:100%; object-fit:cover; }
.atlas-footer-newsletter{
  max-width:520px;
  margin:48px auto 64px;
}
.atlas-footer-newsletter .eyebrow{
  display:block;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--atlas-gold-1);
  margin-bottom:18px;
}
.atlas-footer-newsletter p{
  color:var(--atlas-cream-dim);
  font-size:14px;
  line-height:1.8;
  font-weight:300;
  margin:0 0 28px;
}
.atlas-newsletter-form{
  display:flex; align-items:center;
  border-bottom:1px solid rgba(245,233,216,.25);
  padding-bottom:12px;
  transition:border-color .25s ease;
}
.atlas-newsletter-form:focus-within{ border-color:var(--atlas-gold-1); }
.atlas-newsletter-form input{
  flex:1;
  background:none; border:none; outline:none;
  color:var(--atlas-cream);
  font-family:var(--atlas-sans);
  font-size:14px;
  font-weight:300;
}
.atlas-newsletter-form input::placeholder{ color:var(--atlas-cream-dim); }
.atlas-newsletter-form button{
  background:none; border:none; cursor:pointer;
  color:var(--atlas-gold-1);
  font-family:var(--atlas-sans);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  padding-left:16px;
}
.atlas-footer-links{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  max-width:1100px;
  margin:0 auto 60px;
  padding-top:56px;
  border-top:1px solid rgba(245,233,216,.08);
  text-align:left;
}
.atlas-footer-links h4{
  font-family:var(--atlas-sans);
  font-weight:500;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--atlas-cream);
  margin:0 0 18px;
}
.atlas-footer-links a,
.atlas-footer-links p{
  display:block;
  font-size:13px;
  font-weight:300;
  line-height:1.9;
  color:var(--atlas-cream-dim);
  margin:0 0 10px;
}
.atlas-footer-links a:hover{ color:var(--atlas-gold-1); }
.atlas-footer-links p a{ display:inline; margin:0; text-decoration:underline; }
.atlas-footer-bottom{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--atlas-cream-dim);
  padding-top:24px;
  border-top:1px solid rgba(245,233,216,.08);
}
@media (max-width:760px){
  .atlas-footer-links{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .atlas-footer-links{ grid-template-columns:1fr; text-align:center; }
}


/* ===========================================================
   Story page
   =========================================================== */
.atlas-story-hero{
  position:relative;
  height:80vh; min-height:480px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.atlas-story-hero img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.7);
}
.atlas-story-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.05) 0%, rgba(10,10,10,.85) 100%);
}
.atlas-story-hero-content{
  position:relative; z-index:2;
  padding:0 clamp(20px,6vw,80px) clamp(50px,8vh,90px);
  max-width:900px;
}
.atlas-story-hero .place{
  display:block;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--atlas-gold-1);
  margin-bottom:18px;
}
.atlas-story-hero h1{
  font-family:var(--atlas-serif);
  font-weight:500;
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.1;
  margin:0;
}

.atlas-story-body{
  max-width:680px;
  margin:0 auto;
  padding:clamp(70px,12vh,140px) clamp(20px,6vw,40px);
  text-align:center;
}
.atlas-story-body .eyebrow{
  display:block;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--atlas-gold-1);
  margin-bottom:24px;
}
.atlas-story-body p{
  font-size:clamp(15px,1.8vw,19px);
  line-height:1.9;
  color:var(--atlas-cream-dim);
  font-weight:300;
  margin:0 0 28px;
}
.atlas-story-body p:last-child{ margin-bottom:0; }

.atlas-story-split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,4vw,60px);
  align-items:center;
  padding:0 clamp(20px,6vw,80px) clamp(70px,12vh,140px);
}
.atlas-story-split img{
  border-radius:2px;
  width:100%; aspect-ratio:4/5; object-fit:cover;
}
.atlas-story-split .notes{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:24px;
}
.atlas-story-split .notes span{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border:1px solid rgba(245,233,216,.2);
  border-radius:999px;
  padding:9px 18px;
  color:var(--atlas-cream-dim);
}
@media (max-width:860px){
  .atlas-story-split{ grid-template-columns:1fr; }
}

/* ---------- Buy module ---------- */
.atlas-buy{
  border-top:1px solid rgba(245,233,216,.12);
  padding:clamp(50px,9vh,100px) clamp(20px,6vw,80px);
}
.atlas-buy-inner{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.atlas-buy-info h3{
  font-family:var(--atlas-serif);
  font-weight:500;
  font-size:clamp(1.5rem,3vw,2.2rem);
  margin:0 0 8px;
}
.atlas-buy-info .price{
  font-size:14px;
  letter-spacing:.08em;
  color:var(--atlas-gold-1);
}
.atlas-buy-actions{
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
.atlas-size-select{
  appearance:none;
  background:transparent;
  border:1px solid rgba(245,233,216,.25);
  color:var(--atlas-cream);
  font-family:var(--atlas-sans);
  font-size:13px;
  letter-spacing:.06em;
  padding:13px 18px;
  border-radius:999px;
  min-width:170px;
}
.atlas-add-btn{
  background:var(--atlas-gold-grad);
  color:#0a0a0a;
  border:none;
  border-radius:999px;
  padding:14px 32px;
  font-family:var(--atlas-sans);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:transform .25s ease, box-shadow .25s ease;
}
.atlas-add-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(201,137,63,.35);
}
.atlas-add-confirm{
  font-size:12px;
  color:var(--atlas-gold-1);
  letter-spacing:.06em;
  width:100%;
  text-align:center;
  margin-top:10px;
  display:none;
}

/* ---------- Back link ---------- */
.atlas-back{
  position:fixed;
  top:34px; left:50%;
  transform:translateX(-50%);
  z-index:201;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--atlas-cream-dim);
  display:none;
}
.atlas-story .atlas-back{ display:none; }