/* NIVAH HERO — editorial typography & motion, Oct 2026.
   Changes are intentionally scoped to .hero-fashion so header, product pages,
   admin and catalogue keep their existing styling. */
.hero.hero-fashion {
  isolation:isolate;
  background:#28251f;
}
.hero-fashion .hero-bg { overflow:hidden; }
.hero-fashion .hero-bg img {
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 45%;
  transform-origin:66% 50%;
  animation: nvHeroImageIn 2.25s cubic-bezier(.19,1,.22,1) both,
             nvHeroDrift 20s ease-in-out 2.25s infinite alternate;
  backface-visibility:hidden;
}
.hero-fashion .hero-overlay{
  background:linear-gradient(90deg,
      rgba(18,19,17,.79) 0%,
      rgba(22,23,20,.69) 25%,
      rgba(23,25,23,.43) 48%,
      rgba(16,17,17,.10) 76%,
      rgba(16,17,17,.03) 100%);
  opacity:0;
  animation:nvVeilIn 1.65s ease-out .12s forwards;
}
.hero-fashion .nv-hero-sheen {
  z-index:1;
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 58% 80% at 10% 67%,
       rgba(191,148,106,.09),transparent 70%);
  animation:nvSheenBreath 11s ease-in-out 2.1s infinite alternate;
}
.hero-fashion .hero-copy{
  width:min(775px,64vw);
  padding-left:clamp(27px,5.8vw,110px);
  padding-right:15px;
  padding-top:22px;
  padding-bottom:24px;
  justify-content:center;
}
.hero-fashion .hero-copy .eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:Manrope,Arial,sans-serif;
  font-size:10px;font-weight:600;line-height:1.6;
  color:#e7d1ad;
  letter-spacing:3.2px;
  margin:0 0 22px;
}
.hero-fashion .nv-hero-star{
  font-family:Georgia,serif;
  color:#efd4b3;
  font-size:25px;
  line-height:10px;
  font-weight:400;
}
.hero-fashion .hero-copy h1.nv-hero-headline {
  margin:0 0 16px;
  width:100%;
  max-width:750px;
  font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(50px,5.7vw,85px);
  line-height:1.1;
  letter-spacing:-3px;
  color:#fffdf8;
  text-shadow:0 1px 13px rgba(0,0,0,.15);
  overflow:visible;
}
.nv-hero-headline .nv-hero-line {
  display:block;
  overflow:hidden;
  padding:0 0 .10em;
  margin:0 0 -.10em;
}
.nv-hero-headline .nv-hero-line-inner {
  display:block;
  opacity:0;
  transform:translate3d(0,114%,0);
  animation:nvLineRise 1.13s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:.42s;
}
.nv-hero-headline .nv-hero-line:nth-child(2) .nv-hero-line-inner {animation-delay:.66s}
.nv-hero-headline .nv-hero-line:nth-child(3) .nv-hero-line-inner {animation-delay:.90s}
.nv-hero-headline em {
  font-weight:400;
  font-style:italic;
  color:#ead0ab;
}
.nv-hero-divider {
  display:flex;align-items:center;gap:11px;
  height:20px;
  margin:12px 0 13px;
  color:#dfc59b;
}
.nv-hero-divider>span {
  display:block;height:1px;width:70px;
  background:linear-gradient(90deg,#e9c9a2,#e9c9a200);
}
.nv-hero-divider>i{font-style:normal;font-size:11px;line-height:1}
.hero-fashion .hero-copy p {
  color:#f0eae0;
  max-width:480px;
  font-size:clamp(12px,1.03vw,14px);
  line-height:1.85;
  letter-spacing:.1px;
  margin:0;
  text-wrap:pretty;
}
.hero-fashion .hero-actions{
  display:flex;gap:30px;align-items:center;
  margin-top:28px;
}
.hero-fashion .hero-actions .btn.nv-hero-cta {
  background:#e6c9a5;
  border:1px solid #e6c9a5;
  color:#2e2925;
  font-family:Manrope,Arial,sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.6px;
  min-height:52px;
  padding:14px 21px 14px 26px;
  position:relative;
  overflow:hidden;
  display:inline-flex;align-items:center;gap:18px;
  transition:background .45s cubic-bezier(.22,1,.36,1),
             color .45s cubic-bezier(.22,1,.36,1),
             border-color .45s cubic-bezier(.22,1,.36,1),
             transform .5s cubic-bezier(.22,1,.36,1);
}
.hero-fashion .hero-actions .btn.nv-hero-cta:hover{
  background:#fff7ed;border-color:#fff7ed;
  color:#27211c;transform:translateY(-3px);
}
.hero-fashion .hero-actions .btn.nv-hero-cta svg{transition:transform .4s ease}
.hero-fashion .hero-actions .btn.nv-hero-cta:hover svg{transform:translate(3px,-3px)}
.hero-fashion .hero-actions .btn.nv-hero-cta:focus-visible,
.hero-fashion .hero-story:focus-visible{
  outline:2px solid #fff;outline-offset:5px;
}
.hero-fashion .hero-story{
  font-size:10px;
  letter-spacing:1.9px;
  font-weight:700;
  gap:17px;
  padding:13px 0;
  border-color:rgba(255,250,240,.7);
  transition:color .45s ease,border-color .45s ease,transform .45s ease;
}
.hero-fashion .hero-story:hover{color:#f0cc9a;border-color:#f0cc9a;transform:translateX(3px)}
.hero-fashion .hero-story svg{transition:transform .4s ease}
.hero-fashion .hero-story:hover svg{transform:translateX(4px)}
.hero-fashion .nv-hero-footnote{
  margin-top:27px;display:flex;align-items:center;gap:10px;
  font-size:9px;font-weight:600;
  font-family:Manrope,Arial,sans-serif;
  line-height:1.35;letter-spacing:2.4px;
  color:rgba(243,232,215,.75);
}
.nv-hero-footnote-mark{color:#e5c8a0;font-size:13px}
.nv-hero-appear{
  opacity:0;transform:translate3d(0,20px,0);
  animation:nvFadeUp .92s cubic-bezier(.2,.85,.3,1) forwards;
}
.nv-stagger-1{animation-delay:.30s}
.nv-stagger-3{animation-delay:1.08s}
.nv-stagger-4{animation-delay:1.31s}
.nv-stagger-5{animation-delay:1.57s}
@keyframes nvHeroImageIn {
  from{opacity:.5;transform:scale(1.085)}
  to{opacity:1;transform:scale(1.025)}
}
@keyframes nvHeroDrift {
  from{transform:scale(1.025) translate3d(0,0,0)}
  to{transform:scale(1.095) translate3d(-.55%,-.35%,0)}
}
@keyframes nvVeilIn {to{opacity:1}}
@keyframes nvLineRise{
  from{opacity:0;transform:translate3d(0,114%,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes nvFadeUp{
  from{opacity:0;transform:translate3d(0,20px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes nvSheenBreath{
  from{opacity:.30}
  to{opacity:.85}
}
@media(max-width:1100px){
  .hero-fashion .hero-copy{width:min(675px,66vw)}
  .hero-fashion .hero-copy h1.nv-hero-headline{
    font-size:clamp(48px,5.5vw,76px);
  }
}
@media(max-width:800px){
  .hero-fashion .hero-bg img{object-position:65% 40%}
  .hero-fashion .hero-overlay{
    background:linear-gradient(0deg,
      rgba(18,19,18,.93) 0%,
      rgba(18,19,18,.77) 27%,
      rgba(18,19,18,.48) 56%,
      rgba(18,19,18,.05) 95%);
  }
  .hero-fashion .hero-copy{
    width:100%;height:100%;
    padding:18px 25px clamp(28px,5svh,47px);
    justify-content:flex-end;
    align-items:flex-start;
  }
  .hero-fashion .hero-copy h1.nv-hero-headline{
    font-size:clamp(41px,8.4vw,62px);
    line-height:1.06;
    letter-spacing:-1.3px;
    max-width:540px;
    margin-bottom:8px;
  }
  .hero-fashion .hero-copy .eyebrow{
    font-size:9px;letter-spacing:2px;margin-bottom:14px;
  }
  .hero-fashion .nv-hero-star{font-size:19px}
  .hero-fashion .nv-hero-divider{margin:6px 0 8px}
  .hero-fashion .hero-copy p{
    font-size:12px;line-height:1.58;max-width:365px;
  }
  .hero-fashion .hero-actions{gap:16px;margin-top:17px}
  .hero-fashion .hero-actions .btn.nv-hero-cta{
    padding:11px 15px;
    min-height:42px;
    font-size:9px;gap:9px;
    letter-spacing:.8px;
  }
  .hero-fashion .hero-story{font-size:9px;letter-spacing:.7px;gap:6px}
  .hero-fashion .nv-hero-footnote{display:none}
}
@media(max-width:440px){
  .hero-fashion .hero-copy{padding:15px 19px clamp(20px,4svh,35px)}
  .hero-fashion .hero-copy h1.nv-hero-headline{
    font-size:clamp(36px,10vw,46px);letter-spacing:-1.4px;
  }
  .hero-fashion .hero-copy .eyebrow{
    letter-spacing:1.25px;font-size:8px;gap:8px;margin-bottom:12px;
  }
  .hero-fashion .hero-copy p{font-size:11px;line-height:1.48}
  .hero-fashion .hero-actions{margin-top:15px;gap:12px}
}
@media(max-width:800px) and (max-height:650px){
  .hero-fashion .hero-copy{padding-bottom:15px}
  .hero-fashion .hero-copy .eyebrow{margin-bottom:5px}
  .hero-fashion .hero-copy h1.nv-hero-headline{
    font-size:clamp(32px,7.1vw,43px);margin-bottom:2px;
  }
  .hero-fashion .nv-hero-divider{margin:2px 0 4px;height:13px}
  .hero-fashion .hero-copy p{font-size:10px;line-height:1.42}
  .hero-fashion .hero-actions{margin-top:9px}
}
@media(prefers-reduced-motion:reduce){
  .hero-fashion .hero-bg img,
  .hero-fashion .hero-overlay,
  .hero-fashion .nv-hero-sheen,
  .nv-hero-headline .nv-hero-line-inner,
  .nv-hero-appear{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .hero-fashion .hero-story,.hero-fashion .hero-story svg,
  .hero-fashion .hero-actions .btn.nv-hero-cta,
  .hero-fashion .hero-actions .btn.nv-hero-cta svg{
    transition:none !important;
  }
}