/* ============================================================
   FLOR HADAR — layout: your original, untouched.
   The only structural change kept here is the graphite hero
   (toggle: html[data-hero="dark"]). Everything else in this file
   is the scrolling behaviour and the progress bar.
   ============================================================ */

/* ---- the hero in graphite (colour only — the layout is yours) ---- */
html[data-hero="dark"] .hero-section{background:var(--gray-900);color:var(--white)}
html[data-hero="dark"] .hero-pattern{opacity:.2;filter:invert(1)}
html[data-hero="dark"] .hero-tagline{color:rgba(248,247,240,.6)}
html[data-hero="dark"] .hero-headline,
html[data-hero="dark"] .hero-headline span{color:var(--white)}
html[data-hero="dark"] .hero-headline .line-2{color:var(--accent)}
html[data-hero="dark"] .hero-subtext{color:rgba(248,247,240,.72)}
html[data-hero="dark"] .hero-punch{color:var(--white)}
html[data-hero="dark"] .reasons-intro{color:rgba(248,247,240,.6)}
html[data-hero="dark"] .reasons-list li{color:rgba(248,247,240,.82)}
html[data-hero="dark"] .cta-description{color:rgba(248,247,240,.7)}
/* the white fill belongs to the hero only — anywhere else it would be
   white on cream and the button would vanish on hover */
html[data-hero="dark"] .hero-section .primary-cta::before{background:var(--white)}
html[data-hero="dark"] .hero-section .primary-cta:hover{color:var(--gray-900)}
html[data-hero="dark"] .floating-element{background:rgba(248,247,240,.08);color:var(--white);
  border:1px solid rgba(248,247,240,.25)}
html[data-hero="dark"] .portrait-frame{border-color:rgba(248,247,240,.3)}
html[data-hero="dark"] .bio-hint{background:rgba(61,57,59,.9);color:var(--white)}
html[data-hero="dark"] .scroll-indicator,html[data-hero="dark"] .scroll-text{color:rgba(248,247,240,.6)}
html[data-hero="dark"] .hero-section .hand-ink{stroke:var(--accent)}

/* ---- scroll progress bar ---- */
.fx-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9500;transform-origin:0 50%;
  transform:scaleX(0);background:var(--ink-bright);pointer-events:none}

/* ---- section-by-section scrolling + the dot rail ---- */
html[data-scroll="snap"]{scroll-snap-type:y proximity;scroll-padding-top:0}
html[data-scroll="snap"] .hero-section,
html[data-scroll="snap"] #manifesto,html[data-scroll="snap"] #expertise,
html[data-scroll="snap"] #testimonials,html[data-scroll="snap"] #results,
html[data-scroll="snap"] #method,html[data-scroll="snap"] #strategy-notes,
html[data-scroll="snap"] #connect{scroll-snap-align:start;scroll-snap-stop:normal}

.fx-rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:9400;
  display:none;flex-direction:column;gap:14px;align-items:flex-end}
html[data-scroll="snap"] .fx-rail{display:flex}
.fx-rail button{position:relative;width:12px;height:12px;border-radius:50%;padding:0;cursor:pointer;
  border:1.5px solid rgba(61,57,59,.45);background:transparent;
  transition:all .35s cubic-bezier(0.34,1.56,0.64,1)}
.fx-rail button span{position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(6px);
  font-family:'Montserrat',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;color:#3d393b;opacity:0;transition:all .3s ease;
  pointer-events:none;background:rgba(248,247,240,.92);padding:.25rem .5rem}
.fx-rail button:hover span{opacity:1;transform:translateY(-50%)}
.fx-rail button.active{background:var(--ink-bright);border-color:var(--ink-bright);transform:scale(1.45)}
body[data-section="Results"] .fx-rail button,
body[data-section="Let's talk"] .fx-rail button{border-color:rgba(248,247,240,.55)}
@media (max-width:1000px){.fx-rail{display:none!important}}


/* ============================================================
   block entrances — the hero falls in, the rest slide in from
   alternating sides. Motion only: no layout is changed.
   ============================================================ */
/* no travelling blocks: a section simply appears. Movement at this scale
   reads as drift, and drift is what makes a page feel unsteady. */
.block-drop,.block-slide{opacity:0;transition:opacity .45s ease-out}
.block-drop{transform:none}
.block-slide[data-from="left"],.block-slide[data-from="right"]{transform:none}
.block-drop.in,.block-slide.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .block-drop,.block-slide{opacity:1!important;transform:none!important;transition:none}
}