/* ==========================================================================
   Hero — two real, unmodified, perfectly stationary photographs (BEFORE /
   AFTER), same container/size/object-fit/position, revealed via a soft,
   narrow-feathered mask (never a hard clip seam, never opacity/crossfade,
   never moved/scaled/parallaxed). The ONE interaction is the REAL,
   branded, photographed measuring tape (assets/img/hero-tape-measure.png)
   — never CSS-drawn. Its housing sits at the right edge (partially past
   it); a short length of real photographed tape protrudes at rest. The
   user drags the real hook left, the visible photo WIDTH grows with the
   drag (the housing never moves), and the reveal boundary follows the
   tape's progress. Magnetic snap with a tiny housing recoil, a tape-only
   tactile impact, a held silence, "בול." at the tape, a fast spring
   retraction back INTO the housing, and only then does the headline pay
   off. Hero-scoped only; header keeps its own accent token.
   ========================================================================== */

.hero{
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #f1eadf;
}

.hero-scene{
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.hero-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-photo--after{ z-index: 1; }
.hero-photo--before{
  z-index: 2;
  will-change: mask-image;
  /* Fully visible at rest — JS drives the reveal via a soft-edged mask,
     never a hard clip-path seam. */
}

/* ---- Headline + final CTA — moved to the upper-middle of the wall ---- */
.hero-copy{
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  width: min(90%, 760px);
  text-align: center;
  z-index: 10;
}
.hero-headline{ margin: 0; }
.hero-title-line{
  position: relative;
  display: block;
  letter-spacing: var(--tracking-display);
  color: #111;
  line-height: 1.04;
}
.hero-title-line--a{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  min-height: 1.12em;
}
.hero-title-line--b{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  letter-spacing: 0;
  margin-top: 0.6rem;
  min-height: 1.4em;
  color: #292929;
}
.hero-text-before,
.hero-text-after{
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform, opacity, filter;
}
.hero-title-line--a .hero-text-before{ position: relative; }
.hero-text-after{ opacity: 0; transform: translateY(12px); filter: blur(8px); }

/* ---- Final CTA — sharp brand button, compact ---- */
.hero-payoff{
  margin-top: 1.6rem;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
.hero-payoff.is-visible{ pointer-events: auto; }
.hero-final-cta{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--hero-tape);
  color: #111111;
}
.hero-final-cta-arrow{ font-size: 1.1rem; line-height: 1; }

/* ==========================================================================
   The measuring tape — TWO separate real photographs, two separate DOM
   layers, neither ever scaled non-uniformly or stretched:
   - hero-tape-housing.png: the fixed housing. Displayed at a constant
     size, positioned at the right edge, NEVER resized, NEVER moved.
   - hero-tape-blade-long.png: the long real blade photo. The <img> itself
     is rendered at one constant, fixed display size — JS never touches
     its width/height/transform-scale. It sits right-anchored inside
     .hero-tape-viewport, an overflow:hidden box whose WIDTH is the only
     thing JS changes. As the box widens (dragged left), more of the
     already-fixed-size image becomes visible — a reveal, not a stretch.
   The housing's z-index sits above the viewport so its own solid body
   covers the seam where the blade tucks in behind it.
   ========================================================================== */
.hero-tape-housing{
  position: absolute;
  right: -20px;
  top: 68%;
  transform: translateY(-75px);
  width: 176px;
  height: 150px;
  z-index: 12;
  background-image: url('../assets/img/hero-tape-housing.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 176px 150px; /* uniform scale of the whole photo — never stretched */
  pointer-events: none;
}

.hero-tape-viewport{
  position: absolute;
  right: 116px; /* fixed — tucks 40px under the housing's solid body (housing left edge is at right:156px) */
  top: 68%;
  transform: translateY(-46px);
  width: 110px; /* JS-driven: grows up to the image's own fixed display width, never beyond */
  height: 93px;
  overflow: hidden;
  z-index: 11;
  pointer-events: none;
  will-change: width;
}
.hero-tape-blade-img{
  position: absolute;
  top: 0;
  left: 0; /* pinned to the image's own x=0 (the hook) — so the hook is ALWAYS at whatever's
              currently exposed at the viewport's left tip, at rest and throughout the drag.
              Growing the viewport reveals more native pixels toward the housing end (higher
              numbers), exactly like pulling a real tape. Only the wrapper clips; this never moves. */
  max-width: none; /* override the global img{max-width:100%} reset — the image must NOT shrink to its clipping parent */
  width: 1500px; /* the image's own constant display size — NEVER changed by JS, NEVER scaleX'd */
  height: 93px;
  pointer-events: none;
}

/* The resting-state prompt: real assets cropped straight from the
   approved brush-CTA reference — hero-cta-swipe.png (the real rough-edged
   brush stroke; its own baked silhouette, re-filled solid in the accent
   color only where it needed the baked text removed, never redrawn) and
   hero-cta-arrow.png (the real hand-painted arrow + emphasis marks,
   pixel-for-pixel, only mirrored horizontally to point toward the hook
   instead of the reference's own direction). The real "משכי אותי" text
   sits on the swipe in the project's own brutalist display font — never
   baked into any image — with a small procedural underline beneath it
   (the reference's own underline couldn't be preserved without also
   leaving baked-text ghosting, so this one exception is hand-drawn).
   Everything fades out together, permanently, the instant a real drag
   begins. Positioned to clear the blade/housing entirely. Opacity is
   GSAP-driven — see hero-scroll.js. */
.hero-tape-hint{
  position: absolute;
  right: 175px;
  top: 68%;
  transform: translateY(48px);
  width: 250px;
  height: 140px;
  z-index: 14;
}
.hero-tape-hint.is-hidden{ pointer-events: none; }

.hero-tape-hint-arrow-group{
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 62px;
}
.hero-tape-hint-arrow-img{
  width: 100%;
  height: 100%;
  display: block; /* used exactly as the reference draws it — the hook sits up-right of the CTA, which is already the reference's own arrow direction */
}

.hero-tape-hint-brush-group{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 225px;
  height: 88px;
}
.hero-tape-hint-swipe-img{
  width: 100%;
  height: 100%;
  display: block;
}

.hero-tape-hint-label{
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 15px;
  letter-spacing: var(--tracking-display);
  color: #111111;
  white-space: normal; /* was nowrap at 19px for the short "משכי אותי" —
    the longer, clearer instruction wraps to two short lines instead of
    overflowing the brush-stroke art (which itself is untouched). */
  line-height: 1.18;
  text-align: center;
  max-width: 165px;
  pointer-events: none;
}

.hero-tape-confirm{
  position: absolute;
  top: 68%;
  right: -20px;
  transform: translate(0, calc(-50% - 78px));
  z-index: 13;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  opacity: 0;
  color: #111111;
  pointer-events: none;
}
.hero-tape-confirm svg{ width: 18px; height: 18px; }
.hero-tape-confirm span{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 1px 8px rgba(255,255,255,0.7);
}

/* A wide, forgiving, fully invisible grab zone over the exposed tape's
   left tip — NOT the whole tape-measure image. The visible yellow tape
   underneath remains the interface; this is hit-area only. */
.hero-tape-handle{
  position: absolute;
  right: 171px;
  top: 68%;
  transform: translateY(-38px);
  width: 110px;
  height: 76px;
  z-index: 20;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.hero-tape-handle:active{ cursor: grabbing; }
.hero-tape-handle.is-done{ pointer-events: none; }

/* ---- Reduced motion: static AFTER end-state, no interaction ---- */
@media (prefers-reduced-motion: reduce){
  .hero-tape-housing, .hero-tape-viewport, .hero-tape-hint, .hero-tape-handle, .hero-tape-confirm{ display: none; }
  .hero-photo--before{ mask-image: none; opacity: 0; }
  .hero-title-line .hero-text-before{ opacity: 0; }
  .hero-title-line .hero-text-after{ opacity: 1; transform: none; filter: none; }
  .hero-payoff{ opacity: 1; transform: none; pointer-events: auto; }
}

/* ---- Returning-this-session visitor: the tape-pull is a once-per-tab-
   session onboarding moment (see index.html's early inline script +
   js/hero-scroll.js/hero-scroll-gate.js). html.tape-intro-done is set
   BEFORE first paint when hamatakenetTapeIntroCompleted is already 'true'
   in sessionStorage, so this renders the same static finished state as
   prefers-reduced-motion above — the same declarations, just a different
   trigger — no animation replay, no "משכי אותי", no scroll lock. Closing
   the tab clears sessionStorage, so the next visit starts fresh. ---- */
html.tape-intro-done .hero-tape-housing,
html.tape-intro-done .hero-tape-viewport,
html.tape-intro-done .hero-tape-hint,
html.tape-intro-done .hero-tape-handle,
html.tape-intro-done .hero-tape-confirm{ display: none; }
html.tape-intro-done .hero-photo--before{ mask-image: none; opacity: 0; }
html.tape-intro-done .hero-title-line .hero-text-before{ opacity: 0; }
html.tape-intro-done .hero-title-line .hero-text-after{ opacity: 1; transform: none; filter: none; }
html.tape-intro-done .hero-payoff{ opacity: 1; transform: none; pointer-events: auto; }

/* ---- Mobile: the 48x48 hit-area already carries over from desktop ---- */
@media (max-width: 767px){
  .hero{ min-height: 560px; }
  .hero-copy{ top: 22%; width: 92%; }
}

/* Below ~520px the brush CTA's fixed 250px width no longer fits between
   the housing and the Hero's left edge — scale it down, anchored to its
   own right edge (where it sits closest to the housing), so it always
   stays clear of both the blade and the viewport edge. */
@media (max-width: 520px){
  .hero-tape-hint{
    transform: translateY(48px) scale(0.72);
    transform-origin: 100% 50%;
  }
}