/* ═══════════════════════════════════════════════════════
   HERO SCROLL FX v2 — Frontend CSS
   Helvetica Neue · Swiss Design · Noir sur blanc
═══════════════════════════════════════════════════════ */

/* ─── Hero wrapper ─────────────────────────────────── */
.hsfx-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #ffffff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/* Dark bg (media modes) */
.hsfx-hero.hsfx-dark-bg { background: #111; }

/* Grain overlay */
.hsfx-hero.hsfx-has-grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: .04;
  pointer-events: none;
  z-index: 20;
  mix-blend-mode: multiply;
}

/* ─── Kinetic background image overlay ────────────── */
.hsfx-kinetic-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ─── Media layer (image / video) ──────────────────── */
.hsfx-media-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hsfx-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(0,0,0,.2);
  pointer-events: none;
}

/* Image classique */
.hsfx-media-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform, filter, opacity, clip-path;
  transform-origin: center;
  z-index: 1;
}

/* ─── VIDEO — couvre tout le conteneur ─────────────── */

/* Vidéo auto-hébergée (mp4) */
video.hsfx-video {
  position: absolute;
  top: 50%; left: 50%;
  /* Assure que la vidéo couvre tout quel que soit le ratio */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /* Fallback pour vieux navigateurs */
  z-index: 2;
  display: block;
  will-change: transform, filter, opacity, clip-path;
  transform-origin: center center;
  pointer-events: none;
}

/* Wrapper iframe YouTube / Vimeo */
.hsfx-video-iframe-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  width: 100%;
  height: 100%;
  will-change: transform, filter, opacity, clip-path;
}

/* L'iframe couvre le wrapper en gardant le ratio 16/9 */
.hsfx-video-iframe-wrap iframe.hsfx-video-iframe {
  position: absolute;
  top: 50%; left: 50%;
  /* Plus grand que le conteneur pour couvrir même en portrait */
  width: max(100%, calc(100vh * 16 / 9));
  height: max(100%, calc(100vw * 9 / 16));
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
  z-index: 2;
}

/* ─── Content layer ────────────────────────────────── */
.hsfx-content-layer {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0 72px;
  box-sizing: border-box;
}

/* ─── Kinetic block ────────────────────────────────── */
.hsfx-kinetic-block {
  width: 100%;
}

/* Règles horizontales */
.hsfx-k-rule {
  width: 100%;
  height: 3px;
  background: #000;
  display: block;
  transform-origin: left;
  will-change: transform;
}
.hsfx-rule-top    { margin-bottom: 24px; }
.hsfx-rule-bottom { margin-top: 24px; }

/* Titre */
.hsfx-kinetic-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13vw;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .87;
  color: #000;
  text-transform: uppercase;
  margin: 0;
}

.hsfx-k-line {
  display: block;
  overflow: hidden;
  line-height: .94;
}

.hsfx-k-inner {
  display: block;
  will-change: transform, opacity, filter;
}

/* Sous-titre */
.hsfx-kinetic-sub {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #999;
  margin-top: 24px;
  overflow: hidden;
}

.hsfx-char,
.hsfx-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* ─── Caption (image/video) ────────────────────────── */
.hsfx-caption-block {
  position: absolute;
  bottom: 52px; left: 72px;
  z-index: 15;
}

.hsfx-caption-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 5.5vw;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  will-change: transform, opacity;
}

.hsfx-caption-sub {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: 10px;
  will-change: transform, opacity;
}

/* ─── Progress bar ─────────────────────────────────── */
.hsfx-progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: #e30;
  width: 0%;
  z-index: 30;
  transform-origin: left;
}

/* ─── Slice containers ─────────────────────────────── */
.hsfx-slice-container {
  position: absolute; inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hsfx-slice {
  position: absolute;
  overflow: hidden;
  will-change: clip-path, opacity, transform;
}
.hsfx-slice img,
.hsfx-slice video {
  position: absolute;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
  .hsfx-content-layer        { padding: 0 32px !important; }
  .hsfx-kinetic-title        { font-size: 16vw !important; }
  .hsfx-caption-title        { font-size: 10vw !important; }
  .hsfx-caption-block        { left: 32px !important; bottom: 32px; }
}