/* ==========================================================================
   MODULE: hero   (scope: .m-hero)
   PDF পেজ ১ — কভার
   ========================================================================== */

.m-hero{
  min-height:var(--hero-min-h,100svh);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:calc(var(--nav-h) + clamp(.5rem,1.8vh,1.6rem));
  padding-bottom:clamp(2rem,4vh,3.5rem);
  overflow:hidden;
  isolation:isolate;
  background:var(--green-950);
}

/* ---- background layers ---- */
.m-hero__bg{position:absolute;inset:-12% 0 -12% 0;z-index:-3;will-change:transform}
.m-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.92)}
.m-hero__veil{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 70% 60% at 24% 34%, rgba(7,27,21,.98) 0%, rgba(7,27,21,.92) 65%, transparent 100%),
    linear-gradient(105deg,var(--green-950) 4%,rgba(7,27,21,.95) 46%,rgba(7,27,21,.65) 76%,rgba(7,27,21,.82)),
    linear-gradient(to top,var(--green-950) 2%,transparent 45%);
}
.m-hero__glow{
  position:absolute;z-index:-1;right:-10%;top:8%;
  width:min(58vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(164,204,60,.26),rgba(164,204,60,0) 66%);
  filter:blur(12px);
  animation:m-hero-drift 16s ease-in-out infinite alternate;
}
@keyframes m-hero-drift{to{transform:translate3d(-6%,7%,0) scale(1.12)}}

/* ---- grid ---- */
.m-hero__inner{
  position:relative;display:grid;gap:clamp(2.4rem,5vw,3.5rem);
  align-items:center;grid-template-columns:1fr;
}
@media (min-width:640px){
  .m-hero__inner{grid-template-columns:1.15fr .85fr}
}
@media (min-width:1024px){
  .m-hero__inner{grid-template-columns:1.24fr .76fr}
}

/* ---- copy ---- */
.m-hero .m-hero__eyebrow{
  color:#ffffff;
  font-family:'Montserrat', sans-serif;
  font-size:clamp(.84rem, 1vw, .92rem);
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:0;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  animation:m-hero-fade var(--dur-base) var(--ease-out) 0ms forwards;
}
.m-hero .m-hero__eyebrow .eyebrow-dot{
  background:var(--lime);
  width:24px;
  height:2px;
  border-radius:2px;
  flex-shrink:0;
}
.m-hero .m-hero__eyebrow .hero-brand-word{
  display:inline-flex;
  align-items:baseline;
  letter-spacing:.06em;
  white-space:nowrap;
}
.m-hero .m-hero__eyebrow .hero-brand-word .brand-h{
  color:var(--lime);
  margin-left:-0.04em;
  font-weight:400;
  letter-spacing:inherit;
}
.m-hero .m-hero__eyebrow .eyebrow-sep{
  color:rgba(255,255,255,.35);
  margin:0 .25rem;
  font-weight:300;
}
@keyframes m-hero-fade{to{opacity:1}}

.m-hero__title{
  font-family:var(--hero-title-font, var(--font-display));
  font-size:clamp(2.2rem,6.8vh + 1.2vw,5.8rem);
  font-weight:var(--hero-title-weight, 800);
  line-height:var(--hero-title-lh, 1.04);
  letter-spacing:var(--hero-title-spacing, -.038em);
  margin:clamp(.4rem,1.4vh,1rem) 0 0;
  color:#fff;
  overflow:visible;
}

.m-hero__line{
  display:block;
  overflow:visible;
  padding-top:.35em;
  margin-top:-.35em;
  padding-bottom:.15em;
  margin-bottom:-.15em;
}

.m-hero__line-in{
  display:block;
  overflow:visible;
  padding-top:.35em;
  margin-top:-.35em;
  padding-bottom:.15em;
  margin-bottom:-.15em;
  transform:translateY(112%) rotate(4deg);
  transform-origin:left top;
  animation:m-hero-rise var(--dur-hero) var(--ease-out) forwards;
}

.m-hero__line:nth-child(1) .m-hero__line-in{animation-delay:.1s}
.m-hero__line:nth-child(2) .m-hero__line-in{animation-delay:.2s}
@keyframes m-hero-rise{to{transform:none}}

/* Accent line gradient for standard (non-script) titles */
.m-hero__line--accent .m-hero__line-in{
  background:linear-gradient(110deg,
    #7da81e 0%,#9ec832 15%,#ffffff 28%,#ffffff 33%,#d8f572 40%,
    #587a10 50%,#9ec832 65%,#ffffff 78%,#ffffff 83%,#e8ff8a 90%,#7da81e 100%
  );
  background-size:200% 100%;
  background-repeat:repeat-x;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:m-hero-rise var(--dur-hero) var(--ease-out) .2s forwards,
            m-hero-liquid-flow 6.5s linear infinite;
}

/* ====================================================
   STYLE 4: 3D METALLIC FOIL SHIMMER (Exact match from demo page)
   ==================================================== */
.m-hero__title.is-script-title{
  --hero-title-weight: 400;
  --hero-title-spacing: 0;
  --hero-title-lh: 1.35;
  font-family: var(--hero-title-font, 'Gistesy', 'Alex Brush', cursive);
  font-size: clamp(3rem, 6.8vw, 5rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  white-space: nowrap;
}

.m-hero__title.is-script-title .m-hero__line{
  overflow: visible;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.m-hero__title.is-script-title .m-hero__line-in,
.m-hero__title.is-script-title .style-4-text{
  display: inline-block;
  white-space: nowrap;
  font-family: inherit;
  overflow: visible;
  padding: 0.6em 0.3em 0.35em;
  margin: -0.6em -0.3em -0.35em;
  transform: none;
  background: linear-gradient(110deg, #99c233 0%, #b8e04b 28%, #ffffff 42%, #d2f06b 56%, #89ae28 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
  -webkit-mask-image: linear-gradient(105deg, #000 0%, #000 48%, rgba(0,0,0,0.6) 52%, transparent 58%, transparent 100%);
  mask-image: linear-gradient(105deg, #000 0%, #000 48%, rgba(0,0,0,0.6) 52%, transparent 58%, transparent 100%);
  -webkit-mask-size: 240% 100%;
  mask-size: 240% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: draw-s4 3.5s cubic-bezier(0.25, 1, 0.4, 1) 0.1s forwards,
             shimmer-s4 4.5s ease-in-out infinite 3.8s,
             unmask-s4 0.05s 3.9s forwards;
}

@keyframes draw-s4{
  0%{ -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0; }
  5%{ opacity: 1; }
  100%{ -webkit-mask-position: 0% 0; mask-position: 0% 0; opacity: 1; }
}

@keyframes shimmer-s4{
  0%, 15%{ background-position: 160% 0; }
  85%, 100%{ background-position: -60% 0; }
}

@keyframes unmask-s4{
  to{ -webkit-mask: none; mask: none; }
}

@keyframes m-hero-liquid-flow{
  0%{background-position:0% 0}
  100%{background-position:-200% 0}
}

.m-hero__lead{
  margin-top:clamp(.5rem,1.4vh,1.2rem);
  max-width:56ch;color:#cadcd2;
  font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.55;
  opacity:0;transform:translateY(14px);
  animation:m-hero-fade-up var(--dur-reveal) var(--ease-out) .38s forwards;
}

.m-hero__actions{
  display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(.7rem,1.8vh,1.6rem);
  opacity:0;transform:translateY(14px);
  animation:m-hero-fade-up var(--dur-reveal) var(--ease-out) .48s forwards;
}

/* categories */
.m-hero__cats{display:flex;flex-wrap:wrap;gap:.4rem 0;align-items:center;margin-top:clamp(.7rem,1.8vh,1.5rem)}
.m-hero__cat{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--font-display);font-size:clamp(.68rem,.75vw,.74rem);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#9fb6aa;
  opacity:0;transform:translateY(10px);
  animation:m-hero-fade-up .6s var(--ease-out) forwards;
  animation-delay:calc(.56s + var(--d, 0ms));
}
.m-hero__cat:not(:last-child)::after{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--lime);margin-inline:clamp(.45rem,.6vw,.72rem);opacity:.7;
}
@keyframes m-hero-fade-up{to{opacity:1;transform:none}}

/* ===================================================================
   PURE SHIMMER LOGO — Luxurious metallic light sweep on logo
   (Clean, crisp, no glitch, no twitch, pure executive polish)
   =================================================================== */
.m-hero__shimmer-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  width:100%;
  opacity:0;transform:translateY(16px);
  animation:m-hero-fade-up var(--dur-reveal) var(--ease-out) .25s forwards;
}

.m-hero__sl-frame{
  position:relative;
  width:clamp(250px,29vw,440px);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:m-sl-float 6s ease-in-out infinite;
}

@keyframes m-sl-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* Ambient Back Glow behind logo */
.m-hero__sl-ambient{
  position:absolute;inset:8%;
  background:radial-gradient(circle,rgba(136,200,56,.2) 0%,rgba(0,240,255,.06) 42%,transparent 70%);
  filter:blur(38px);
  pointer-events:none;
  z-index:0;
  animation:m-sl-ambient-pulse 7.4s ease-in-out infinite alternate;
}
@keyframes m-sl-ambient-pulse{
  0%{transform:scale(.92);opacity:.65}
  100%{transform:scale(1.08);opacity:1}
}

/* Central Art Canvas */
.m-hero__sl-art{
  position:relative;
  width:100%;height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  transition:transform .45s var(--ease);
}
.m-hero__sl-frame:hover .m-hero__sl-art{
  transform:scale(1.028);
}

/* Base Clean Logo */
.m-hero__sl-img{
  position:relative;
  width:100%;height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 0 35px rgba(136,200,56,.32)) drop-shadow(0 25px 50px rgba(0,0,0,.6));
  transition:filter .5s var(--ease);
}
.m-hero__sl-frame:hover .m-hero__sl-img{
  filter:drop-shadow(0 0 45px rgba(136,200,56,.45)) drop-shadow(0 28px 55px rgba(0,0,0,.7));
}

/* ===================================================================
   METALLIC IRIDESCENT SHIMMER SWEEP (MASKED TO EXACT LOGO SILHOUETTE)
   =================================================================== */
.m-hero__sl-shimmer{
  position:absolute;
  inset:0;
  -webkit-mask-image:var(--mask-url);
  mask-image:var(--mask-url);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:5;
  overflow:hidden;
}

.m-hero__sl-shimmer-beam{
  position:absolute;
  top:-50%;left:-120%;
  width:70%;height:200%;
  background:linear-gradient(
    115deg,
    transparent 15%,
    rgba(255,255,255,0) 28%,
    rgba(164,255,120,.5) 42%,
    rgba(255,255,255,.98) 50%,
    rgba(0,240,255,.6) 58%,
    rgba(255,255,255,0) 72%,
    transparent 85%
  );
  transform:rotate(28deg);
  animation:m-sl-shimmer-sweep 3.6s cubic-bezier(.4,0,.2,1) infinite;
  will-change:transform;
}
.m-hero__sl-frame:hover .m-hero__sl-shimmer-beam{
  animation-duration:2.2s;
}

@keyframes m-sl-shimmer-sweep{
  0%{transform:translateX(-160%) rotate(28deg);opacity:0}
  8%{opacity:1}
  56%{transform:translateX(320%) rotate(28deg);opacity:1}
  62%,100%{transform:translateX(320%) rotate(28deg);opacity:0}
}

/* Floor Reflection */
.m-hero__sl-reflection{
  position:absolute;bottom:-18%;left:12%;right:12%;height:22%;
  background:linear-gradient(to bottom,rgba(136,200,56,.14),transparent);
  border-radius:50%;
  filter:blur(18px);
  pointer-events:none;
  z-index:0;
}

/* ---- keyword strip ---- */
.m-hero__keys{
  display:flex;flex-wrap:wrap;gap:.45rem;
  width:100%;
  margin:clamp(.75rem,2vh,1.3rem) 0 0;
  padding:0;
}
.m-hero__key{
  font-family:var(--font-display);font-size:clamp(.65rem,.7vw,.7rem);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:#8ba496;
  padding:.35rem .85rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  opacity:0;transform:translateY(12px);
  animation:m-hero-fade-up .7s var(--ease-out) forwards;
  animation-delay:var(--d);
  transition:color .35s,border-color .35s,background .35s;
}
.m-hero__key:hover{color:var(--green-950);background:var(--lime);border-color:var(--lime)}

/* ---- scroll hint ---- */
.m-hero__scroll{
  position:absolute;left:50%;bottom:clamp(.75rem,2vh,1.5rem);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:#9fb6aa;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;animation:m-hero-fade 1s var(--ease-out) 1.1s forwards;
  z-index:3;
}
.m-hero__scroll:hover{color:var(--lime)}
.m-hero__scroll-track{
  width:24px;height:38px;border:1.5px solid currentColor;border-radius:14px;
  display:flex;justify-content:center;padding-top:7px;
}
.m-hero__scroll-dot{
  width:3.5px;height:7px;border-radius:3px;background:var(--lime);
  animation:m-hero-scroll 1.9s var(--ease) infinite;
}
@keyframes m-hero-scroll{
  0%{transform:translateY(0);opacity:0}
  30%{opacity:1}
  100%{transform:translateY(14px);opacity:0}
}
.m-hero__scroll-text{display:none}
@media (min-width:760px){.m-hero__scroll-text{display:block}}

/* ---- responsive ---- */
/* চওড়া কিন্তু খুব কম উচ্চতার উইন্ডোতে (≥১০০০px × ≤৬৮০px) টাইটেল vw-ভিত্তিক,
   তাই এখানে উচ্চতা-ভিত্তিক ছোট মান বসানো হয়। নিচের সরু-উইন্ডো ব্লকগুলো পরে
   লেখা — সেগুলো (≤৯৯৯/≤৮৫৯/≤৭৫৯px) সরু উইন্ডোতে এটিকে ওভাররাইড করবে। */
@media (max-height:680px){
  .m-hero__title{font-size:clamp(2rem,4.4vw,3.3rem)}
  .m-hero__lead{line-height:1.45}
  .m-hero__actions{margin-top:clamp(.7rem,2vh,2.2rem)}
  .m-hero__cats{margin-top:clamp(.7rem,2vh,2.6rem)}
}
/* ৮৬০–৯৯৯px: দুই-কলাম কপি কলাম সরু — টাইটেল/বাটন কম জায়গা নেয় যাতে
   ৭০০px উচ্চতার উইন্ডোতেও সেকশন ঠিক ১০০svh-তে বসে। */
@media (max-width:999px){
  .m-hero__title{font-size:clamp(2rem,6.4vh + .6vw,3.5rem)}
  .m-hero__actions{gap:.6rem}
  .m-hero__actions .btn-lg{padding:.8rem 1.25rem;font-size:.9rem}
}
@media (max-width:859px){
  .m-hero__lead{font-size:clamp(.9rem,2.4vh,1.05rem);line-height:1.5}
  .m-hero__actions .btn-lg{padding:.7rem 1rem;font-size:.85rem}
}
/* আরও সরু কলামে (≤৭৫৯px) টাইটেল/লিড/বাটন ও ক্যাটাগরি সংকুচিত —
   ৬৪০px চওড়া × ৬৪০px উচ্চতার উইন্ডোতেও কপি কলাম ১০০svh-তে বসে। */
@media (max-width:759px){
  .m-hero{min-height:auto;padding-top:calc(var(--nav-h) + 1.25rem);padding-bottom:3rem}
  .m-hero__inner{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .m-hero__copy{
    display:contents;
  }
  .m-hero__eyebrow{
    order:1;
    font-size:clamp(.55rem, 2.9vw, .88rem);
    letter-spacing:.1em;
    margin:0 auto .35rem;
    text-align:center;
    white-space:nowrap;
  }
  .m-hero__title{
    order:2;
    font-size:35px;
    line-height:1.15;
    white-space:normal;
    margin:.25rem auto .45rem;
    text-align:center;
  }
  /* Script title: strictly single-line cursive flow with Style 4 shimmer */
  .m-hero__title.is-script-title{
    font-size:clamp(2.2rem, 9.4vw, 3.6rem);
    line-height:1.25;
    white-space:nowrap !important;
    max-width:100%;
    margin-inline:auto;
    overflow:visible;
  }
  .m-hero__title.is-script-title .m-hero__line,
  .m-hero__title.is-script-title .m-hero__line--accent,
  .m-hero__title.is-script-title .m-hero__line-in,
  .m-hero__title.is-script-title .style-4-text{
    display:inline-block;
    white-space:nowrap !important;
    text-align:center;
    overflow:visible;
  }
  .m-hero__lead{
    order:3;
    font-size:0.92rem;
    line-height:1.55;
    margin:0 auto .65rem;
    text-align:center;
    max-width:100%;
  }
  .m-hero__shimmer-logo{
    order:4;
    margin:.75rem auto .35rem;
  }
  .m-hero__sl-frame{
    width:min(58vw, 190px);
  }
  .m-hero__actions{
    order:5;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:clamp(.4rem, 2vw, .65rem);
    width:100%;
    margin-top:1.25rem;
    justify-content:center;
  }
  .m-hero__actions .btn{
    flex:1 1 0;
    min-width:0;
    width:auto;
    padding:.7rem .65rem;
    font-size:clamp(.76rem, 2.8vw, .86rem);
    justify-content:center;
    white-space:nowrap;
  }
  .m-hero__cats{
    order:6;
    margin:1.15rem auto 0;
    font-size:.72rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    text-align:center;
    width:100%;
    row-gap:.4rem;
  }
  .m-hero__cat:not(:last-child)::after{margin-inline:.45rem}
  .m-hero__keys{
    order:7;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.45rem;
    width:100%;
    margin:.85rem auto 0;
  }
  .m-hero__key{
    flex:0 0 auto;
    text-align:center;
  }
}
@media (max-width:520px){
  .m-hero__scroll{display:none}
}
@media (max-width:480px){
  .m-hero__eyebrow{font-size:clamp(.52rem, 2.9vw, .84rem)}
  .m-hero__title{
    font-size:35px;
    white-space:normal;
  }
  .m-hero__title.is-script-title{
    font-size:clamp(1.95rem, 9.2vw, 2.85rem);
    white-space:nowrap !important;
  }
  .m-hero__sl-frame{width:min(58vw, 190px)}
  .m-hero__actions{
    flex-direction:row;
    gap:.45rem;
  }
  .m-hero__actions .btn{
    width:auto;
    flex:1 1 0;
    padding:.65rem .5rem;
    font-size:.78rem;
    justify-content:center;
  }
}
@media (max-width:360px){
  .m-hero__title{
    font-size:30px;
  }
  .m-hero__title.is-script-title{
    font-size:clamp(1.65rem, 8.8vw, 2.2rem);
    white-space:nowrap !important;
  }
}
/* ৬০০px-এর নিচে: সব চওড়ায় হিরোর টাইটেল/লিড আরও সংকুচিত */
@media (max-height:599px){
  .m-hero__title{font-size:clamp(1.5rem,4.2vw,3rem)}
  .m-hero__lead{font-size:clamp(.78rem,2.2vh,1rem);line-height:1.36}
  .m-hero__eyebrow{font-size:.62rem;letter-spacing:.12em}
  .m-hero__actions{margin-top:.55rem;gap:.3rem}
  .m-hero__actions .btn-lg{padding:.45rem .5rem;font-size:.72rem}
  .m-hero__cats{margin-top:.55rem}
  /* কীওয়ার্ড স্ট্রিপও কম জায়গা নেয় */
  .m-hero__keys{margin-top:clamp(.5rem,1.8vh,3.4rem);gap:.4rem}
  .m-hero__key{font-size:.64rem;letter-spacing:.18em;padding:.3rem .7rem}
}