/* =============================================
   FLIRTYFLUFFERS — SCROLL FRAME ANIMATION
   ============================================= */

/* Lenis override */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── LOADING SCREEN ── */
.ff-loading {
  position: fixed; inset: 0;
  background: #0d0d0d;
  z-index: 10000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 0.6s ease;
}
.ff-loading-brand {
  font-size: 24px; color: #fff;
  letter-spacing: 8px; text-transform: uppercase;
  margin-bottom: 32px; font-weight: 200;
}
.ff-loading-track {
  width: 200px; height: 1px;
  background: rgba(255,255,255,0.12);
}
.ff-loading-fill {
  height: 100%; width: 0%;
  background: #fff;
  transition: width 0.1s;
}
.ff-loading-pct {
  margin-top: 14px; font-size: 10px;
  color: rgba(255,255,255,0.3); letter-spacing: 3px;
}

/* ── HEADER: sticky, mindig felül marad ── */
.html-home-page .header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}

/* ── FIXED CANVAS LAYER ── */
/* A top értékét JS állítja be a header valós magassága alapján */
.ff-canvas-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; pointer-events: none;
  background: #f7f9f8; overflow: hidden;
}
#ff-canvas { min-width: 100vw; }

/* A szöveg overlay is a header alatt kezdődjön */
.ff-text-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; pointer-events: none;
}

/* ── TEXT BLOCK ── */
/* Jobbra igazítva, mert a maci a bal oldalon van */
.ff-text-block {
  position: absolute;
  right: 7%;
  text-align: right;
  max-width: 460px;
  padding: 36px 40px 36px 44px;
  opacity: 0;
  transform: translateX(30px);
  /* Frosted glass panel */
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 2px solid #ff12be;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}

/* Kis dekoratív label a cím felett */
.ff-text-block .ff-label {
  display: block;
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #ff12be;
  margin-bottom: 14px;
  font-weight: 600;
}

.ff-text-block h2 {
  font-size: clamp(22px, 3vw, 42px);
  color: #1a1a1a;
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.ff-text-block h2 strong {
  font-weight: 700;
  color: #1a1a1a;
}

/* Vékony elválasztó vonal a cím alatt */
.ff-text-block h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: #ff12be;
  margin: 14px 0 14px auto;
}

.ff-text-block p {
  font-size: clamp(13px, 1.5vw, 16px);
  color: rgba(0,0,0,0.55);
  line-height: 1.75;
  font-weight: 300;
}

/* ── SCROLL HINT ── */
.ff-scroll-hint {
  position: fixed; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 10; display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  transition: opacity 0.4s;
}
.ff-scroll-hint span {
  font-size: 10px; letter-spacing: 4px;
  text-transform: uppercase; color: rgba(0,0,0,0.4);
}
.ff-scroll-hint-arrow {
  width: 16px; height: 16px;
  border-right: 1.5px solid rgba(0,0,0,0.3);
  border-bottom: 1.5px solid rgba(0,0,0,0.3);
  transform: rotate(45deg);
  animation: ff-bounce 2s ease infinite;
}
@keyframes ff-bounce {
  0%,100% { transform: rotate(45deg) translateY(0); }
  50%      { transform: rotate(45deg) translateY(6px); }
}

/* ── SCROLL SPACER ── */
.ff-scroll-container {
  height: 500vh;
  position: relative;
}

/* ── ÁTMENET az animáció és a normál tartalom között ── */
.ff-transition-out {
  display: none;
}

/* ── Átlátszóvá tesszük az összes közbülső wrapper-t a főoldalon ── */
/* A canvas (z-index: 1, fixed) csak így tud átsütni */
.html-home-page .master-wrapper-page,
.html-home-page .master-column-wrapper,
.html-home-page .center-1,
.html-home-page .page.home-page,
.html-home-page .page-body {
  background: transparent !important;
}

/* master-wrapper-content: átlátszó háttér ÉS z-index: 5,
   hogy a benne lévő tartalom (ff-page-content) a canvas FÖLÉ kerüljön.
   A BlackShop alap CSS-ben z-index:0 van, ami miatt a canvas (z-index:1)
   átsüt és eltakarja a termékeket. */
.html-home-page .master-wrapper-content {
  background: transparent !important;
  z-index: 5 !important;
}

/* A normál webshop tartalom: fehér alap, az animáció felett */
.ff-page-content {
  position: relative;
  z-index: 5;
  background: #fff;
}

/* Footer is legyen látható */
.html-home-page .footer {
  position: relative;
  z-index: 5;
}

@media (max-width: 768px) {
  /* Canvas az aljara kerul, hogy a szovegek felul ferjenek el */
  .ff-canvas-layer {
    align-items: flex-end;
    justify-content: flex-start; /* bal oldalhoz igazit (jobbrol croppol) */
  }

  /* Szoveg overlay: a viewport tetejere igazitva */
  .ff-text-overlay {
    align-items: flex-start;
    justify-content: center;
  }

  /* Szoveg blokkok: a canvas feletti teruleten, felulrol pozicionalt */
  .ff-text-block {
    top: 16px;          /* canvas layer tetejetol 16px */
    right: 16px;
    left: 16px;
    bottom: auto;
    max-width: none;
    text-align: left;
    padding: 20px 22px;
    border-right: none;
    border-bottom: 2px solid #ff12be;
    transform: translateY(-20px);  /* alapertelmezett animacio: fentrol jon be */
  }

  /* JS az X-tengelyen csusztatta, mobilon Y-tengelyen jobb */
  /* Felulirjuk a JS altal beallitott translateX-et is */
  .ff-text-block[style] {
    transform-origin: top center;
  }

  .ff-text-block h2::after {
    margin: 12px 0 12px;
  }

  .ff-scroll-container { height: 400vh; }
}