/*
Theme Name: Fragrance Fein
Theme URI: https://scent-vault-club.base44.app
Author: Anthony Scott Jr. - Forward Mark M3DIA
Description: Luxury landing gate for Fragrance Fein - scroll-driven bottle launch animation, sign up / sign in buttons routed to the Base44 app, and a benefits section.
Version: 1.2.0
Requires PHP: 7.4
License: Proprietary
Text Domain: fragrance-fein
*/

:root{
  --black:#000000;
  --char:#0A0908;
  --ivory:#EDE7D8;
  --ivory-dim:#B0AA99;
  --gold:#C9A461;
  --gold-lt:#E8CD8F;
  --gold-soft:#9C8250;
  --line:rgba(237,231,216,.10);
  --line-gold:rgba(201,164,97,.30);
  --display:'Italiana',serif;
  --serif:'EB Garamond',serif;
  --sans:'Manrope',sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--black);color:var(--ivory);
  font-family:var(--sans);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--black)}

/* grain */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:9000;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}
  30%{transform:translate(3%,-2%)}50%{transform:translate(-3%,2%)}
  70%{transform:translate(2%,3%)}90%{transform:translate(-1%,1%)}
}

/* =========================================================
   SCENE
   ========================================================= */
.scene{position:relative;height:320vh}
.pin{position:sticky;top:0;height:100vh;min-height:640px;overflow:hidden}
.plume{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.pl1{width:70vmin;height:70vmin;left:50%;top:22%;transform:translateX(-50%);background:radial-gradient(circle,rgba(201,164,97,.13),transparent 62%);animation:drift 15s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-50%,1vh) scale(1)}to{transform:translate(-47%,-5vh) scale(1.1)}}

/* ---- AUTH LAYER ---- */
.auth{
  position:absolute;top:0;left:0;right:0;height:100vh;min-height:640px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:3.4rem 1.4rem 0;z-index:5;
  pointer-events:none; /* let the animation show through; card re-enables */
}
.auth .brand{will-change:transform,opacity;text-align:center}
.auth .card{pointer-events:auto;will-change:transform,opacity}
.auth .cue{will-change:opacity}
.wordmark{
  font-family:var(--display);font-size:clamp(2rem,7vw,2.7rem);
  letter-spacing:.18em;text-transform:uppercase;text-align:center;line-height:1.05;
}
.wordmark span{color:var(--gold)}
.tagline{
  margin-top:.7rem;font-family:var(--serif);font-style:italic;text-align:center;
  font-size:clamp(.95rem,3.6vw,1.1rem);color:var(--ivory-dim);
}
.tagline em{
  background:linear-gradient(90deg,#E7D3A1,var(--gold),#8a6f3e);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;
}
.card{
  width:100%;max-width:400px;margin-top:1.8rem;
  padding:1.7rem 1.6rem 1.4rem;border-radius:22px;
  background:rgba(10,9,8,.55);backdrop-filter:blur(20px);
  border:1px solid var(--line);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.95);
}
.btn{
  display:flex;align-items:center;justify-content:center;gap:.8rem;width:100%;
  font-size:.68rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  text-decoration:none;padding:1.1rem 1rem;border-radius:100px;border:none;cursor:pointer;
  background:var(--gold);color:var(--black);
  transition:background .4s,transform .5s var(--ease);
}
.btn:hover{background:var(--ivory);transform:translateY(-2px)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-ghost{
  background:transparent;color:var(--ivory);
  border:1px solid var(--line-gold);margin-top:.9rem;
}
.btn-ghost:hover{background:transparent;border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.alt{margin-top:1.2rem;text-align:center;font-size:.74rem;color:var(--ivory-dim);font-family:var(--serif);font-style:italic}
.cue{
  margin-top:auto;padding-bottom:1.6rem;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.54rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ivory-dim);
}
.cue .line{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ---- BOTTLE (realistic SVG) ---- */
.bottle-wrap{
  position:absolute;left:50%;bottom:-8%;
  transform:translateX(-50%);
  width:min(300px,58vw);
  z-index:2;pointer-events:none;
  will-change:transform;
}
.bottle{position:relative;will-change:transform}
.bottle svg{display:block;width:100%;height:auto;overflow:visible}
/* the clear overcap — launches off */
.overcap{
  position:absolute;left:50%;top:0;width:41%;
  transform:translateX(-50%) translateY(-58%);
  will-change:transform,opacity;
}
.overcap svg{display:block;width:100%;height:auto;overflow:visible}
/* spray origin at nozzle */
.spray{position:absolute;left:50%;top:-9%;width:0;height:0;z-index:3}
.drop{
  position:absolute;left:0;top:0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 35% 28%,#FFF3D6,#E8CD8F 45%,rgba(201,164,97,.85) 75%);
  box-shadow:0 0 10px rgba(232,205,143,.45);
  will-change:transform,opacity;opacity:0;
}
.mistball{
  position:absolute;left:0;top:0;border-radius:50%;
  background:radial-gradient(circle,rgba(240,228,200,.4),transparent 65%);
  filter:blur(9px);will-change:transform,opacity;opacity:0;
}
/* liquid shimmer sweep (CSS-animated SVG element) */
#lqSheen{animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,100%{transform:translateX(-18px)}50%{transform:translateX(18px)}}

/* headline */
.uncap{
  position:absolute;left:0;right:0;top:16%;text-align:center;z-index:4;
  opacity:0;transform:translateY(30px);will-change:transform,opacity;
  pointer-events:none;padding:0 1.4rem;
}
.uncap h2{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,8vw,5.6rem);line-height:1.02}
.uncap h2 em{font-family:var(--serif);font-style:italic;color:var(--gold)}
.uncap p{margin-top:1rem;font-family:var(--serif);font-style:italic;color:var(--ivory-dim);font-size:clamp(.95rem,3.4vw,1.15rem)}

/* =========================================================
   BENEFITS
   ========================================================= */
.benefits{position:relative;z-index:6;background:linear-gradient(var(--black),var(--char));padding:7rem 1.6rem 6rem;border-top:1px solid var(--line)}
.b-inner{max-width:760px;margin:0 auto}
.b-head{text-align:center;margin-bottom:4.5rem}
.eyebrow{font-size:.6rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
.b-head h3{font-family:var(--display);font-weight:400;margin-top:1.2rem;font-size:clamp(2rem,6vw,3.2rem);line-height:1.06}
.b-head h3 em{font-family:var(--serif);font-style:italic;color:var(--gold)}
.benefit{
  display:grid;grid-template-columns:4.6rem 1fr;gap:1.6rem;align-items:baseline;
  padding:2.2rem 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(36px);
  transition:opacity 1s var(--ease),transform 1s var(--ease),padding-left .5s var(--ease);
}
.benefit.in{opacity:1;transform:translateY(0)}
.benefit:hover{padding-left:.7rem}
.benefit:first-of-type{border-top:1px solid var(--line)}
.benefit .k{font-family:var(--display);font-size:1.05rem;letter-spacing:.2em;color:var(--gold)}
.benefit h4{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:.03em;margin-bottom:.45rem}
.benefit p{font-size:.92rem;color:var(--ivory-dim);max-width:34rem}
.benefit p b{color:var(--ivory);font-weight:500}
.b-cta{text-align:center;margin-top:3.6rem}
.b-cta .btn{display:inline-flex;width:auto;padding:1.15rem 2.6rem}
.b-cta .micro{margin-top:1.4rem;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory-dim)}

footer.site{
  padding:2.4rem 1.6rem;text-align:center;background:var(--char);
  border-top:1px solid var(--line);
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory-dim);
}
footer.site b{color:var(--gold);font-weight:600}

@media (max-width:520px){
  .bottle-wrap{bottom:-12%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .scene{height:auto}
  .pin{position:relative;height:auto;min-height:100vh;padding-bottom:44vh}
  .auth{position:relative;height:auto;min-height:100vh}
  .bottle-wrap{position:relative;left:auto;bottom:auto;margin:-32vh auto 4rem;transform:none}
  .uncap{display:none}
  .benefit{opacity:1;transform:none}
  .cue{display:none}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}