/* ==========================================================================
   Harsh Sales Agency — hero carousel, share, motion layer
   ========================================================================== */

/* Hero carousel ---------------------------------------------------------- */
.hero { padding:0 }
@keyframes kenburns { from { transform:scale(1.06) } to { transform:scale(1.16) } }
/* No opacity transition here: the slide swap is instant and the children
   animate in. A transition that stalls (compositor not painting) would leave
   the active copy stuck at 0. */
.hero__copy { grid-area:1/1; opacity:0; pointer-events:none }
/* JS adds .anim-done shortly after each swap, so the copy is guaranteed to
   land on its resting state even if the entrance animation never advances. */
.hero__copy.anim-done > * { animation:none !important; opacity:1 !important; transform:none !important }
/* Resting state is VISIBLE — the entrance animates in from below.
   If the animation never runs (hidden tab, no CSS animation support),
   the copy still reads correctly instead of staying invisible. */
.hero__copy > * { opacity:1; transform:none }
/* The stagger is baked into each keyframe set (a leading hold) rather than
   animation-delay, so no fill-mode is needed and the resting state stays
   visible even if the animation never runs. */
.hero__copy.is-active > *:nth-child(1) { animation:heroUp1 1.05s var(--ease-out) }
.hero__copy.is-active > *:nth-child(2) { animation:heroUp2 1.05s var(--ease-out) }
.hero__copy.is-active > *:nth-child(3) { animation:heroUp3 1.05s var(--ease-out) }
.hero__copy.is-active > *:nth-child(4) { animation:heroUp4 1.05s var(--ease-out) }
@keyframes heroUp1 { 0%,4%   { opacity:0; transform:translateY(26px) } 100% { opacity:1; transform:none } }
@keyframes heroUp2 { 0%,14%  { opacity:0; transform:translateY(26px) } 100% { opacity:1; transform:none } }
@keyframes heroUp3 { 0%,24%  { opacity:0; transform:translateY(26px) } 100% { opacity:1; transform:none } }
@keyframes heroUp4 { 0%,34%  { opacity:0; transform:translateY(26px) } 100% { opacity:1; transform:none } }

.hero__ctrl { position:relative; z-index:3; display:flex; align-items:center; gap:18px;
  flex-wrap:wrap; padding-bottom:34px }
.hero__dots { display:flex; gap:9px; list-style:none; margin:0; padding:0 }
.hero__dots button { width:36px; height:4px; border-radius:var(--r-full); border:none; padding:0;
  cursor:pointer; background:rgba(251,247,241,.26); position:relative; overflow:hidden;
  transition:background .3s }
.hero__dots button:hover { background:rgba(251,247,241,.45) }
.hero__dots button i { position:absolute; inset:0; background:var(--amber);
  transform-origin:left; transform:scaleX(0) }
.hero__dots button[aria-current="true"] i { animation:dotFill var(--slide-ms,7000ms) linear forwards }
.hero.is-paused .hero__dots button[aria-current="true"] i { animation-play-state:paused }
@keyframes dotFill { to { transform:scaleX(1) } }

.hero__arrows { display:flex; gap:8px; margin-left:auto }
.hero__arrows button { width:44px; height:44px; border-radius:50%; cursor:pointer; color:var(--cream);
  background:rgba(251,247,241,.09); border:1px solid rgba(251,247,241,.2);
  display:grid; place-items:center; transition:.3s var(--ease) }
.hero__arrows button:hover { background:var(--amber); border-color:var(--amber); color:var(--ink) }
.hero__arrows svg { width:17px; height:17px }
.hero__count { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  color:rgba(251,247,241,.55) }
.hero__count b { color:var(--cream); font-weight:500 }
/* Below 900px the WhatsApp button occupies the bottom-right corner,
   so drop the arrows and rely on the dots plus swipe. */
@media (max-width:900px) {
  .hero__arrows { display:none }
  .hero__ctrl { padding-bottom:26px }
}

/* Scroll cue -------------------------------------------------------------- */
.cue { position:absolute; right:26px; bottom:110px; z-index:3;
  width:26px; height:42px; border:1.5px solid rgba(251,247,241,.32); border-radius:var(--r-full);
  display:grid; place-items:start center; padding-top:8px }
.cue i { display:block; width:3px; height:8px; border-radius:2px; background:var(--amber);
  animation:cue 1.9s var(--ease) infinite }
@keyframes cue { 0%{transform:translateY(0);opacity:0} 30%{opacity:1}
  70%{transform:translateY(15px);opacity:0} 100%{opacity:0} }
@media (max-width:900px) { .cue { display:none } }

/* Share ------------------------------------------------------------------- */
.share { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:26px;
  padding-top:22px; border-top:1px solid var(--line-2) }
.share__label { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-500); margin-right:2px }
.share button, .share a { width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--white); color:var(--ink-700); display:grid; place-items:center; cursor:pointer;
  transition:transform .3s var(--ease-out), background .25s, color .25s, border-color .25s }
.share button:hover, .share a:hover { transform:translateY(-3px); background:var(--ink);
  color:var(--cream); border-color:var(--ink) }
.share .is-wa:hover { background:#25D366; border-color:#25D366; color:#fff }
.share .is-copy:hover { background:var(--amber); border-color:var(--amber); color:var(--ink) }
.share svg { width:17px; height:17px }

.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,22px); z-index:95;
  background:var(--ink); color:var(--cream); padding:13px 22px; border-radius:var(--r-full);
  font-size:.88rem; font-weight:500; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:.4s var(--ease-out);
  display:flex; align-items:center; gap:9px; max-width:calc(100vw - 40px) }
.toast.is-on { opacity:1; transform:translate(-50%,0) }
.toast svg { width:16px; height:16px; color:var(--amber); flex:none }

/* Share button on product cards ------------------------------------------ */
.card__share { position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:none; cursor:pointer;
  color:var(--ink-700); display:grid; place-items:center; z-index:2;
  opacity:0; transform:translateY(-6px); transition:.35s var(--ease-out) }
.card:hover .card__share, .card__share:focus-visible { opacity:1; transform:none }
.card__share:hover { background:var(--amber); color:var(--ink) }
.card__share svg { width:15px; height:15px }
@media (hover:none) { .card__share { opacity:1; transform:none } }

/* Motion layer ------------------------------------------------------------ */
.btn--primary, .btn--amber { position:relative; overflow:hidden }
.btn--primary::after, .btn--amber::after { content:""; position:absolute; top:0; left:-120%;
  width:45%; height:100%; transform:skewX(-18deg); transition:left .75s var(--ease-out);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent) }
.btn--primary:hover::after, .btn--amber:hover::after { left:135% }

.rv--left { transform:translateX(-28px) }
.rv--right { transform:translateX(28px) }
.rv--zoom { transform:scale(.955) }
.rv--left.is-in, .rv--right.is-in, .rv--zoom.is-in { transform:none }

.nav__links a { position:relative }
.nav__links a:not(.is-active)::after { content:""; position:absolute; left:15px; right:15px;
  bottom:5px; height:1.5px; background:var(--amber); transform:scaleX(0); transform-origin:right;
  transition:transform .38s var(--ease-out) }
.nav__links a:not(.is-active):hover::after { transform:scaleX(1); transform-origin:left }

.cat__body h3 { transition:transform .5s var(--ease-out) }
.cat:hover .cat__body h3 { transform:translateY(-3px) }

.feat__ico { transition:transform .45s var(--ease-out), background .3s, color .3s }
.feat:hover .feat__ico { transform:translateY(-4px) rotate(-6deg); background:var(--amber); color:var(--ink) }

.step { transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
  overflow:hidden }
.step:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--amber) }
.step::after { content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out) }
.step:hover::after { transform:scaleX(1) }

.quote { transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out) }
.quote:hover { transform:translateY(-4px); box-shadow:var(--shadow-md) }

.chip:active { transform:scale(.96) }
.stat b, .hero__stat b { font-variant-numeric:tabular-nums }

.progress { position:fixed; top:0; left:0; height:3px; background:var(--amber); z-index:80;
  width:0; transition:width .1s linear }

.pdp__main { position:relative }
.pdp__main::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-100%); transition:transform .9s var(--ease-out) }
.pdp__main:hover::after { transform:translateX(100%) }

@media (prefers-reduced-motion:reduce) {
  .hero__bg.is-active img { animation:none; transform:none }
  .hero__copy.is-active > * { animation:none; opacity:1; transform:none }
  .hero__dots button[aria-current="true"] i { animation:none; transform:scaleX(1) }
  .cue i { animation:none }
  .btn--primary::after, .btn--amber::after, .pdp__main::after { display:none }
}

/* Stretched card link (keeps the share button a real sibling, not nested) -- */
.card { position:relative }
.card__stretch { display:block; color:inherit }
.card__stretch::after { content:""; position:absolute; inset:0; z-index:1 }
.card__stretch:focus-visible { outline:none }
.card:focus-within { box-shadow:var(--shadow-md); border-color:var(--amber) }
.card__media { z-index:0 }


/* ==========================================================================
   Hero v2 — two-column composition
   Wide screens previously left a dead black gutter beside a narrow copy
   column; the copy now pairs with a framed visual and the ambient photo is
   reduced to texture so nothing competes.
   ========================================================================== */
.hero { --hero-max: 1440px }

/* Ambient background: texture only, so the framed image carries the detail */
.hero__bg img { opacity:.30; filter:saturate(.85) }
.hero::after { background:
  radial-gradient(1200px 680px at 78% 42%, rgba(246,156,49,.15), transparent 62%),
  linear-gradient(180deg, rgba(22,46,66,.88) 0%, rgba(22,46,66,.94) 100%) }

@media (min-width:1024px) {
  .hero__grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) }
  .hero__deck { max-width:640px }
  .hero__showcase { display:block; position:relative }

  .hero__frames { position:relative; aspect-ratio:4/3.1; border-radius:var(--r-xl);
    overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(251,247,241,.10);
    background:var(--ink) }
  .hero__frame { position:absolute; inset:0; margin:0; opacity:0;
    transition:opacity .8s var(--ease-out) }
  .hero__frame.is-active { opacity:1 }
  .hero__frame img { width:100%; height:100%; object-fit:cover }

  .hero__chip { position:absolute; display:flex; align-items:center; gap:10px;
    padding:13px 18px; border-radius:var(--r-full); backdrop-filter:blur(14px);
    background:rgba(251,247,241,.94); color:var(--ink);
    box-shadow:0 18px 40px rgba(0,0,0,.34) }
  .hero__chip b { font-family:var(--f-display); font-size:1.5rem; line-height:1; color:var(--amber-600) }
  .hero__chip span { font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink-500); line-height:1.3; max-width:11ch }
  .hero__chip--a { left:-26px; top:34px }
  .hero__chip--b { right:-18px; bottom:38px; background:var(--ink); color:var(--cream) }
  .hero__chip--b span { color:rgba(251,247,241,.72); max-width:none }
  .hero__chip--b svg { width:17px; height:17px; color:var(--amber) }

  .cue { display:none }
}

@media (min-width:1024px) and (prefers-reduced-motion:no-preference) {
  .hero__frames { animation:frameIn 1.1s var(--ease-out) }
  @keyframes frameIn { from { opacity:0; transform:translateY(28px) scale(.97) } }
  .hero__chip--a { animation:chipIn 1s .35s var(--ease-out) backwards }
  .hero__chip--b { animation:chipIn 1s .5s var(--ease-out) backwards }
  @keyframes chipIn { from { opacity:0; transform:translateY(16px) } }
}

/* Headline: keep it to two strong lines instead of three ragged ones */
.hero h1 { font-size:clamp(2.4rem,4.4vw,3.9rem); letter-spacing:-.025em }


/* Hero v2 — vertical rhythm: fit the whole composition near one screen ---- */
.hero__grid { padding-block:clamp(40px,4.4vw,68px) clamp(20px,2vw,28px) }
.hero__ctrl { padding-bottom:clamp(22px,2.4vw,30px) }
@media (min-width:1024px) {
  .hero__frames { aspect-ratio:auto; height:clamp(360px,44vh,470px) }
  .hero__deck { max-width:620px }
}


/* Hero v2 — typography balance -------------------------------------------- */
.hero { --hero-max:1520px }
@media (min-width:1024px) {
  .hero__grid { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }
  .hero__deck { max-width:660px }
}


/* Below the two-column breakpoint the photo IS the visual, so let it read --- */
@media (max-width:1023px) {
  .hero__bg img { opacity:.52 }
  .hero::after { background:linear-gradient(175deg, rgba(22,46,66,.80) 0%, rgba(22,46,66,.90) 60%, rgba(22,46,66,.95) 100%) }
}


/* ==========================================================================
   Brand lockup — horizontal (mark + wordmark) in header and footer
   ========================================================================== */
.brand { display:flex; align-items:center; gap:12px; min-width:0 }
.brand img { border-radius:0; background:none; width:auto }
.brand__mark { height:40px; flex:none }
.brand__word { height:23px; flex:none }
.brand--light .brand__word { height:23px }

@media (max-width:420px) {
  .brand__mark { height:34px }
  .brand__word { height:19px }
}

/* Footer lockup sits a little larger */
.foot .brand__mark { height:46px }
.foot .brand__word { height:26px }