/* ====== New-product LAUNCH HIGHLIGHT band (front page only) ======
   Full-width, 9s CSS loop (~3s per scene), no JS/video. Uses the theme's color
   tokens (style.css :root) and bundled fonts (Anton / Archivo). Scoped under .np.
   Desktop: product left -> centre (label zoom, warm oval glow) -> lifestyle photo.
   Mobile (<=760px, matches m-only/d-only): stacks image-over-copy. */

.np{
  display:block; position:relative; isolation:isolate; text-decoration:none; color:inherit; width:100%; cursor:pointer;
  background:
    radial-gradient(66% 118% at 30% 44%, rgba(255,255,255,.94) 0%, rgba(255,253,247,0) 56%),
    linear-gradient(104deg, #FFF8EC 0%, #FBEFD6 46%, var(--saffron-tint) 75%, #EFE1C6 100%);
  border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); overflow:hidden; transition:box-shadow .3s ease;
}
.np:focus-visible{outline:3px solid var(--red); outline-offset:-3px}
.np::before{ /* faint gold filigree echoing the ornate label */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(42% 60% at 30% 46%, rgba(224,160,34,.16), transparent 70%),
    repeating-linear-gradient(135deg, rgba(154,107,21,.045) 0 2px, transparent 2px 22px);
  -webkit-mask:radial-gradient(120% 120% at 34% 46%, #000 30%, transparent 86%);
  mask:radial-gradient(120% 120% at 34% 46%, #000 30%, transparent 86%);
}
.np::after{ /* fine grain */
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.np-stage{position:relative; z-index:2; max-width:1240px; margin:0 auto; height:clamp(340px, 40vw, 496px); padding:0 clamp(16px,4vw,48px)}

/* ambient embers */
.np-amb{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.np .ember{position:absolute; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F4B24C, var(--saffron-deep)); opacity:0; filter:blur(.3px); animation:npEmber 6.5s linear infinite}
.np .ember.e2{left:18%; width:5px;height:5px; animation-delay:-1.3s; animation-duration:7.5s}
.np .ember.e3{left:26%; width:9px;height:9px; animation-delay:-3.1s; animation-duration:8s; background:radial-gradient(circle at 35% 30%,#E7746B,var(--red-deep))}
.np .ember.e4{left:40%; width:5px;height:5px; animation-delay:-4.6s; animation-duration:7s}
.np .ember.e5{left:9%; width:6px;height:6px; animation-delay:-2.2s; animation-duration:9s}
.np .ember.e1{left:33%; animation-delay:0s}
@keyframes npEmber{0%{transform:translateY(110%) translateX(0) scale(.6); opacity:0}12%{opacity:.55}70%{opacity:.4}100%{transform:translateY(-20%) translateX(26px) scale(1.05); opacity:0}}

/* badge */
.np-badge{position:absolute; z-index:5; top:clamp(16px,3vw,26px); left:clamp(16px,4vw,48px); display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:8px 14px; border-radius:30px; box-shadow:0 8px 20px -10px rgba(216,29,22,.6)}
.np-badge .d{width:7px;height:7px;border-radius:50%;background:#fff;animation:npBlink 1.8s ease-in-out infinite}
@keyframes npBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

/* persistent shop cue */
.np-shop{position:absolute; z-index:5; bottom:clamp(16px,3vw,26px); right:clamp(16px,4vw,48px); display:inline-flex; align-items:center; gap:8px;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:13.5px; color:var(--muted2); transition:color .25s ease}
.np-shop svg{transition:transform .25s ease}
.np:hover .np-shop{color:var(--red)} .np:hover .np-shop svg{transform:translateX(4px)}

/* product (scenes 1 & 2) */
.np-bottle{position:absolute; z-index:3; left:27%; top:53%; height:clamp(228px,30vw,360px); aspect-ratio:1/1;
  transform:translate(-50%,-50%); will-change:left,top,transform,opacity; animation:npBottle 9s cubic-bezier(.65,.02,.25,1) infinite}
.np-bottle img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; filter:drop-shadow(0 26px 22px rgba(92,30,8,.26))}
.np-bottle::before{content:""; position:absolute; z-index:1; left:50%; top:50%; width:150%; height:140%; transform:translate(-50%,-50%);
  background:radial-gradient(50% 52% at 50% 48%, rgba(255,237,198,.82) 0%, rgba(224,160,34,.22) 42%, rgba(224,160,34,0) 70%)}
.np-bottle::after{content:""; position:absolute; z-index:0; left:50%; bottom:7%; width:46%; height:5%; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(60,25,8,.26), transparent 72%); filter:blur(5px)}

/* scene-2 highlight: warm oval pulse only (no rectangular glare) */
.np-ring{position:absolute; z-index:1; left:50%; top:44%; width:72%; height:84%; transform:translate(-50%,-50%);
  border-radius:50%; box-shadow:0 0 0 2px rgba(224,160,34,.7), 0 0 60px 10px rgba(224,160,34,.45); opacity:0; animation:npRing 9s ease-out infinite}

@keyframes npBottle{
  0%  {left:27%; top:58%; transform:translate(-50%,-50%) scale(.88) rotate(-1.2deg); opacity:0}
  4%  {left:27%; top:53%; transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1}
  31% {left:27%; top:53%; transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1}
  38% {left:50%; top:81%; transform:translate(-50%,-50%) scale(1.28) rotate(0); opacity:1}
  62% {left:50%; top:83%; transform:translate(-50%,-50%) scale(1.32) rotate(0); opacity:1}
  67% {left:50%; top:85%; transform:translate(-50%,-50%) scale(1.36) rotate(0); opacity:0}
  100%{left:27%; top:58%; transform:translate(-50%,-50%) scale(.88) rotate(-1.2deg); opacity:0}
}
@keyframes npRing{0%,38%{opacity:0; transform:translate(-50%,-50%) scale(.7)}46%{opacity:.9; transform:translate(-50%,-50%) scale(.95)}62%{opacity:0; transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0}}

/* lifestyle (scene 3): single natural photo */
.np-life{position:absolute; z-index:3; left:clamp(16px,4vw,48px); top:50%; transform:translateY(-50%);
  width:min(46%,460px); aspect-ratio:4/3; border-radius:18px; overflow:hidden; opacity:0;
  box-shadow:0 30px 50px -24px rgba(70,30,10,.5), 0 0 0 1px rgba(154,107,21,.18); will-change:opacity; animation:npLifeShow 9s ease infinite}
.np-life-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:npLifeZoom 9s ease infinite}
.np-life::after{content:""; position:absolute; inset:0; z-index:1; box-shadow:inset 0 0 60px rgba(40,18,6,.26); pointer-events:none}
@keyframes npLifeShow{0%,64%{opacity:0}70%{opacity:1}96%{opacity:1}99%,100%{opacity:0}}
@keyframes npLifeZoom{0%,64%{transform:scale(1.08)}70%{transform:scale(1.04)}97%{transform:scale(1)}100%{transform:scale(1)}}

/* text lines */
.np-line{position:absolute; z-index:4; will-change:opacity,transform}
.np-l1{right:clamp(16px,5vw,56px); left:50%; top:50%; transform:translateY(-50%); text-align:left; opacity:0; animation:npL1 9s ease infinite}
.np-intro{display:block; font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(16px,1.7vw,24px); color:var(--muted2); margin-bottom:10px}
.np-morr{display:block; font-family:'Anton','Archivo',sans-serif; font-weight:400; font-size:clamp(52px,6.4vw,94px); line-height:.84; color:var(--red); letter-spacing:.012em}
.np-prod{display:block; font-family:'Anton','Archivo',sans-serif; font-weight:400; font-size:clamp(30px,3.9vw,56px); line-height:.96; color:var(--ink); letter-spacing:.006em; margin-top:6px}
.np-l2{left:50%; top:9%; transform:translateX(-50%); width:min(74%,640px); text-align:center; opacity:0; animation:npL2 9s ease infinite; text-shadow:0 2px 14px rgba(255,255,255,.9)}
.np-l2 p{font-family:'Archivo',sans-serif; font-weight:700; line-height:1.18; font-size:clamp(20px,2.5vw,33px); color:var(--ink)}
.np-l2 p em{font-style:normal; color:var(--green-deep)}
.np-l3{right:clamp(16px,5vw,56px); left:54%; top:50%; transform:translateY(-50%); text-align:left; opacity:0; animation:npL3 9s ease infinite}
.np-l3 .big{font-family:'Anton','Archivo',sans-serif; font-weight:400; font-size:clamp(40px,5.4vw,76px); line-height:.92; color:var(--ink); letter-spacing:.005em}
.np-l3 .big span{color:var(--red)}
.np-cta{display:inline-flex; align-items:center; gap:9px; margin-top:20px; background:var(--green); color:#fff;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:15px; padding:13px 22px; border-radius:12px; box-shadow:0 14px 26px -14px rgba(62,110,31,.7)}
.np-cta svg{transition:transform .2s} .np:hover .np-cta svg{transform:translateX(4px)}

@keyframes npL1{0%{opacity:0;transform:translateY(calc(-50% + 16px))}4%{opacity:1;transform:translateY(-50%)}30%{opacity:1;transform:translateY(-50%)}34%{opacity:0;transform:translateY(calc(-50% - 10px))}100%{opacity:0}}
@keyframes npL2{0%,35%{opacity:0;transform:translate(-50%,10px)}40%{opacity:1;transform:translate(-50%,0)}61%{opacity:1;transform:translate(-50%,0)}65%{opacity:0;transform:translate(-50%,-8px)}100%{opacity:0}}
@keyframes npL3{0%,68%{opacity:0;transform:translateY(calc(-50% + 16px))}72%{opacity:1;transform:translateY(-50%)}96%{opacity:1;transform:translateY(-50%)}99%{opacity:0;transform:translateY(calc(-50% - 10px))}100%{opacity:0}}

/* reduced-motion static */
.np-static{display:none}
@media (prefers-reduced-motion: reduce){
  .np-bottle,.np-life,.np-line,.np-ring,.np-life-bg,.np .ember{animation:none!important}
  .np-bottle{left:26%; top:52%; opacity:1; transform:translate(-50%,-50%) scale(1)}
  .np-ring,.np-l1,.np-l2,.np-l3,.np-life{opacity:0!important; display:none}
  .np-static{display:block; position:absolute; z-index:4; right:clamp(16px,5vw,56px); left:52%; top:50%; transform:translateY(-50%)}
  .np-static h2{font-family:'Archivo',sans-serif;font-weight:800;line-height:1.05;font-size:clamp(24px,3vw,42px);letter-spacing:-.02em}
  .np-static h2 b{color:var(--red)}
  .np-static p{margin-top:12px;color:var(--muted2);font-size:clamp(15px,1.6vw,19px);font-weight:600}
}

/* responsive: MOBILE stacks vertically (image on top, copy tucked right below) */
@media (max-width:760px){
  .np-stage{height:clamp(440px,114vw,480px)}

  /* scenes 1&2: product centred so the copy below forms one tight group (small gap) */
  .np-bottle{left:50%!important; top:37%!important; height:clamp(150px,37vw,178px); animation-timing-function:linear}
  /* scene-2 highlight on mobile: a SOFT warm spotlight bloom around the whole bottle.
     The desktop 2px gold stroke reads as a hard "box" at this size, so drop it entirely
     and use a pure radial glow (no edge) that blooms in during scene 2. */
  .np-ring{top:48%; width:146%; height:132%; box-shadow:none; border-radius:50%;
    background:radial-gradient(50% 50% at 50% 50%,
      rgba(255,226,160,.60) 0%, rgba(244,184,64,.34) 30%,
      rgba(226,162,36,.12) 52%, rgba(224,160,34,0) 72%)}
  /* scene-2 bottle: ONE steady continuous zoom that SPANS scene 1 -> scene 2 so the two feel
     connected. Bottle appears, then grows at a constant (linear) rate from scale 1 (start of
     scene 1) to 1.5 by the start of scene 3 — the copy swaps underneath while it keeps growing.
     Transform-only (top/left fixed on the rule) so it's GPU-smooth; stays clear of badge + text. */
  @keyframes npBottle{
    0%   {transform:translate(-50%,-50%) scale(.9);  opacity:0}
    4%   {transform:translate(-50%,-50%) scale(1);   opacity:1}
    63%  {transform:translate(-50%,-50%) scale(1.5); opacity:1}
    67%  {transform:translate(-50%,-50%) scale(1.5); opacity:0}
    100% {transform:translate(-50%,-50%) scale(.9);  opacity:0}
  }

  /* scene-3 lifestyle card: starts just UNDER the JUST LAUNCHED badge */
  .np-life{left:50%; transform:translateX(-50%); top:12.5%; bottom:auto; width:min(84%,380px)}

  /* copy: scene-1 lockup tucks under the bottle; scene-3 sits under the card */
  .np-line{left:6%; right:6%; transform:none!important; text-align:center}
  .np-l1{top:60%; bottom:auto}
  .np-l3{top:auto; bottom:5%}
  .np-intro{font-size:clamp(14px,3.6vw,18px); margin-bottom:4px}
  .np-morr{font-size:clamp(44px,12.5vw,62px); line-height:.86}
  .np-prod{font-size:clamp(25px,6.6vw,34px); margin-top:2px}
  /* scene-2 tagline: large & clean, dropped lower in the open space below the glow.
     width:auto overrides the desktop width cap so the bigger copy still breaks to 2 lines. */
  .np-l2{top:77%; bottom:auto; width:auto; text-shadow:none}
  .np-l2 p{font-size:clamp(24px,7vw,29px); line-height:1.24; letter-spacing:.002em}
  .np-l3 .big{font-size:clamp(40px,11.5vw,54px)}
  .np-cta{margin-top:12px; padding:11px 18px; font-size:14px}
  .np-shop{display:none}

  @keyframes npL1{0%{opacity:0}4%{opacity:1}30%{opacity:1}34%{opacity:0}100%{opacity:0}}
  @keyframes npL2{0%,35%{opacity:0}40%{opacity:1}61%{opacity:1}65%{opacity:0}100%{opacity:0}}
  @keyframes npL3{0%,68%{opacity:0}72%{opacity:1}96%{opacity:1}99%{opacity:0}100%{opacity:0}}
  .np-static{left:6%; right:6%; top:auto; bottom:8%; transform:none; text-align:center}
}