/* ---------- ambient motion ----------
   Everything here is driven by motion.js and only ever switched on by a class
   it adds, so with JavaScript off -- or with prefers-reduced-motion set, where
   motion.js stops before doing anything -- the page renders exactly as the
   static design in index.css. All timing is ease-out, 0.8-1.5 s, no bounce. */
:root{
  --lm-ease:cubic-bezier(.22,.61,.36,1);
  --lm-ease-slow:cubic-bezier(.16,1,.3,1);
}

/* ---------- intro ----------
   A tiny script in <head> adds .lm-intro before the first paint, so this
   curtain is up before any of the page shows. motion.js swaps it for the
   real intro and then lifts it. */
html.lm-intro body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1000;
  background:#0e0a07;
}
.lm-intro-stage{
  position:fixed;
  inset:0;
  z-index:1001;
  overflow:hidden;
  background:#0b0b0c;
  cursor:pointer;
  transition:opacity .9s var(--lm-ease), visibility 0s linear .9s;
}
.lm-intro-stage.is-leaving{opacity:0;visibility:hidden;}
.lm-intro-stage.is-skipped{transition-duration:.4s, 0s;transition-delay:0s, .4s;}
/* The collection photo, wordmark on the left and the four bottles right
   across to the right edge. It is much wider than most screens, and filling
   one would crop away the wordmark or Agni Fiero, so it is shown whole
   across the width, its top and bottom edges melting into the dark (the
   photo is 813/1933 of its width tall, so ~21vw either side of the middle).
   Only on a screen about as wide as the photo does it fill it. */
.lm-intro-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  -webkit-mask:linear-gradient(transparent calc(50% - 21vw), #000 calc(50% - 15vw), #000 calc(50% + 15vw), transparent calc(50% + 21vw));
  mask:linear-gradient(transparent calc(50% - 21vw), #000 calc(50% - 15vw), #000 calc(50% + 15vw), transparent calc(50% + 21vw));
  opacity:0;
  transform:scale(1.04);
  filter:brightness(.6);
}
@media (min-aspect-ratio:11/5){
  .lm-intro-photo{object-fit:cover;-webkit-mask:none;mask:none;}
}
/* The timeline: the photo eases in out of the dark over 1.6 s while it
   drifts slowly closer for the whole 4.2 s, then the curtain lifts. */
.lm-intro-stage.is-playing .lm-intro-photo{
  animation:lm-photo-in 1.6s var(--lm-ease) forwards, lm-photo-drift 5s cubic-bezier(.25,.1,.25,1) forwards;
}
@keyframes lm-photo-in{to{opacity:1;filter:brightness(1);}}
@keyframes lm-photo-drift{from{transform:scale(1.04);}to{transform:scale(1);}}
.lm-intro-skip{
  position:fixed;
  z-index:1003;
  bottom:clamp(20px,4vh,32px);
  left:50%;
  translate:-50% 0;
  padding:10px 22px;
  border:1px solid rgba(239,230,214,0.28);
  border-radius:999px;
  background:rgba(14,10,7,0.4);
  font-family:'Jost', sans-serif;
  font-size:0.66rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:rgba(239,230,214,0.75);
  cursor:pointer;
  opacity:0;
  animation:lm-fade .8s var(--lm-ease) .6s forwards;
  transition:color .3s var(--lm-ease), border-color .3s var(--lm-ease), background-color .3s var(--lm-ease);
}
.lm-intro-skip:hover,
.lm-intro-skip:focus-visible{color:#efe6d6;border-color:rgba(232,190,120,0.7);background:rgba(14,10,7,0.7);}
.lm-intro-skip:focus-visible{outline:1px solid rgba(232,190,120,0.7);outline-offset:3px;}
.lm-intro-skip.is-leaving{animation:none;opacity:0;transition:opacity .4s var(--lm-ease);pointer-events:none;}
@keyframes lm-fade{to{opacity:1;}}

/* ---------- the logo's spritz ----------
   Clicking the logo on the home page: the logo glows, a bottle glides out of
   it into a pool of light over a darkened page and gives one slow spray --
   Kavach first, then Tantra Aura, Roohani and Agni Fiero on the clicks
   after, each lit and misted in its own colours. motion.js moves the bottle and draws the mist on a canvas; the
   stage is set here -- the dark, the light behind the bottle, the gleam
   that runs across the glass after the spray and the line beneath it. */
.brand-logo.lm-glow{animation:lm-glow 1.2s var(--lm-ease-slow);}
.brand-logo.lm-glow.is-settling{animation:lm-settle .9s var(--lm-ease-slow);}
@keyframes lm-glow{
  35%{filter:drop-shadow(0 0 10px rgba(232,190,120,.75));transform:scale(1.04);}
}
@keyframes lm-settle{
  40%{filter:drop-shadow(0 0 8px rgba(232,190,120,.6));transform:scale(1.05);}
}
.lm-spritz{
  position:fixed;
  inset:0;
  z-index:1002;
  overflow:hidden;
  cursor:pointer;
}
.lm-spritz.is-leaving{pointer-events:none;}
.lm-spritz-dim{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 45% 45%, rgba(14,10,7,.88) 0%, rgba(8,6,4,.96) 75%);
}
.lm-spritz-glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(var(--lm-light),.28) 0%, rgba(var(--lm-deep),.12) 22%, transparent 48%),
    radial-gradient(ellipse 60% 40% at var(--gx) 100%, rgba(var(--lm-deep),.16) 0%, transparent 70%);
}
.lm-spritz-bottle{position:absolute;}
.lm-spritz-bottle picture,
.lm-spritz-bottle img{display:block;width:100%;height:100%;}
.lm-spritz-bottle img{
  transform-origin:50% 100%;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(var(--lm-light),.12));
}
/* A band of light that slides across the glass, cut to the bottle's own
   outline by masking it with the bottle photo. */
.lm-spritz-sheen{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,236,206,.0) 42%, rgba(255,240,216,.38) 50%, rgba(255,236,206,0) 58%, transparent 62%) no-repeat;
  background-size:300% 100%;
  background-position:100% 0;
  -webkit-mask:var(--m) center / 100% 100% no-repeat;
  mask:var(--m) center / 100% 100% no-repeat;
  mix-blend-mode:screen;
  opacity:0;
}
.lm-spritz.is-sprayed .lm-spritz-sheen{animation:lm-sheen 1.8s cubic-bezier(.45,0,.25,1) forwards;}
@keyframes lm-sheen{
  0%{opacity:1;background-position:100% 0;}
  100%{opacity:1;background-position:0 0;}
}
.lm-spritz-air{position:absolute;left:0;top:0;pointer-events:none;}
.lm-spritz-caption{
  position:absolute;
  margin:0;
  width:min(80vw,420px);
  translate:-50% 0;
  text-align:center;
  font-family:'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-style:italic;
  font-size:clamp(1.05rem,2.4vw,1.4rem);
  letter-spacing:.04em;
  color:var(--lm-ink);
  opacity:0;
  transform:translateY(8px);
  filter:blur(4px);
  transition:opacity 1.2s var(--lm-ease-slow), transform 1.2s var(--lm-ease-slow), filter 1.2s var(--lm-ease-slow);
}
.lm-spritz.is-sprayed .lm-spritz-caption{opacity:.9;transform:none;filter:none;transition-delay:.5s;}
.lm-spritz.is-leaving .lm-spritz-caption{opacity:0;transition-duration:.5s;transition-delay:0s;}

/* ---------- scroll story ----------
   Each hero becomes its own panel: a full-width wash of its fragrance's
   colours rises behind it as it reaches the middle of the screen. The
   bottle itself stays where it is. */
.hero.lm-panel{position:relative;isolation:isolate;}
.hero.lm-panel::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  translate:-50% 0;
  pointer-events:none;
  opacity:var(--lm-p,0);
  background:
    radial-gradient(ellipse 55% 70% at 28% 50%, rgba(138,68,32,0.26) 0%, rgba(58,39,24,0.18) 45%, transparent 80%),
    linear-gradient(90deg, rgba(58,39,24,0.18), transparent 70%);
}
#tantra-aura.lm-panel::before{
  background:
    radial-gradient(ellipse 55% 70% at 72% 50%, rgba(226,150,170,0.20) 0%, rgba(205,190,205,0.10) 45%, transparent 80%),
    linear-gradient(270deg, rgba(226,170,180,0.12), transparent 70%);
}
#roohani.lm-panel::before{
  background:
    radial-gradient(ellipse 55% 70% at 28% 50%, rgba(214,150,162,0.18) 0%, rgba(236,228,222,0.08) 45%, transparent 80%),
    linear-gradient(90deg, rgba(214,160,170,0.10), transparent 70%);
}
#agni-fiero.lm-panel::before{
  background:
    radial-gradient(ellipse 55% 70% at 72% 50%, rgba(224,102,42,0.22) 0%, rgba(155,44,18,0.12) 45%, transparent 80%),
    linear-gradient(270deg, rgba(200,80,30,0.12), transparent 70%);
}

/* Line-by-line reveal. Only elements that start below the fold (or under the
   intro) are given .lm-reveal, so nothing already on screen blinks out. */
.lm-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1.1s var(--lm-ease), transform 1.1s var(--lm-ease);
  transition-delay:calc(var(--lm-i,0) * 120ms);
}
.lm-reveal.is-in{opacity:1;transform:none;}

/* ---------- details ---------- */
.cta,
.form-submit{
  transition:background 0.2s ease, color 0.2s ease, box-shadow 0.9s var(--lm-ease);
}
.cta.lm-reveal{
  transition:opacity 1.1s var(--lm-ease), transform 1.1s var(--lm-ease), background 0.2s ease, color 0.2s ease, box-shadow 0.9s var(--lm-ease);
  transition-delay:calc(var(--lm-i,0) * 120ms), calc(var(--lm-i,0) * 120ms), 0s, 0s, 0s;
}
.cta:hover,
.cta:focus-visible,
.form-submit:hover,
.form-submit:focus-visible{
  box-shadow:0 0 0 1px rgba(195,154,92,0.25), 0 0 28px 2px rgba(195,154,92,0.32);
}

/* A hairline of gold draws itself under each heading as it scrolls in. */
.lm-underline{
  width:fit-content;
  background-image:linear-gradient(90deg, var(--gold), var(--gold-soft));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size 1.4s var(--lm-ease) .2s;
}
.lm-underline.is-in{background-size:100% 1px;}

@media (prefers-reduced-motion: reduce){
  .lm-intro-stage,
  .lm-spritz{display:none !important;}
  html.lm-intro body::after{display:none;}
}