/* ═══════════════════════════════════════════════
   FRAYMFUL — Custom CSS
   
   VAIN asiat joita Bricks EI pysty tekemään:
   - Grain overlay
   - Custom scrollbar
   - Scroll reveal animaatiot (JS-pohjainen)
   - Complex hover states (::before, multi-target)
   - Hero video sizing
   
   Kaikki muu → Bricks Theme Styles + Style Manager
   ═══════════════════════════════════════════════ */

/* ── Grain ── */
.fm-grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A1A25; }
::-webkit-scrollbar-thumb { background: #1a2f3d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2a3f4d; }

/* ── Nav scroll (JS adds .scrolled) ── */
.fm-nav.scrolled {
  background: rgba(10,26,37,0.9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Hero video cover ── */
.fm-video-bg iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;
  min-height: 100vh; min-width: 177.78vh;
  transform: translate(-50%,-50%);
  pointer-events: none; border: none;
}

/* ── Scroll dot bounce ── */
@keyframes scrollDot {
  0%,100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(12px); opacity: 0; }
}
.fm-scroll-dot { animation: scrollDot 2s ease-in-out infinite; }

/* ── Scroll Reveal (JS toggles .active) ── */
.fm-reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
              transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.fm-reveal.from-left { transform: translateX(-30px); }
.fm-reveal.from-right { transform: translateX(30px); }
.fm-reveal.active { opacity: 1; transform: none; }
.fm-reveal.d1 { transition-delay:.1s }
.fm-reveal.d2 { transition-delay:.2s }
.fm-reveal.d3 { transition-delay:.3s }
.fm-reveal.d4 { transition-delay:.4s }
.fm-reveal.d5 { transition-delay:.5s }

/* ── Case Card hover (multi-target, needs CSS) ── */
.fm-case-card { transition: transform .5s cubic-bezier(0.22,1,0.36,1); }
.fm-case-card:hover { transform: translateY(-8px); }
.fm-case-card:hover img { transform: scale(1.05); }
.fm-case-card .fm-card-overlay { opacity: 0; transition: opacity .5s; }
.fm-case-card:hover .fm-card-overlay { opacity: 1; }
.fm-case-card .fm-card-arrow {
  opacity: 0; transform: translateY(8px); transition: all .3s;
}
.fm-case-card:hover .fm-card-arrow { opacity: 1; transform: translateY(0); }

/* ── Service Card hover (::before accent line) ── */
.fm-service-card { position: relative; overflow: hidden; transition: border-color .5s; }
.fm-service-card:hover { border-color: rgba(255,244,222,0.3) !important; }
.fm-service-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 2px; background: #FFF4DE;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s;
}
.fm-service-card:hover::before { transform: scaleX(1); }

/* ── Process timeline connector ── */
.fm-process-step { position: relative; }
.fm-process-step:not(:last-child)::after {
  content: ''; position: absolute;
  left: 23px; top: 48px; width: 1px;
  height: calc(100% - 8px);
  background: rgba(218,227,230,0.1);
}

/* ── Gallery hover ── */
.fm-gallery-item img { transition: transform .6s cubic-bezier(0.22,1,0.36,1); }
.fm-gallery-item:hover img { transform: scale(1.05); }

/* ── Video play overlay ── */
.fm-video-block:hover .fm-video-overlay { background: rgba(10,26,37,0.15); }
.fm-video-block:hover .fm-play-btn { background: rgba(255,244,222,0.3); }

/* ── CF7 form overrides ── */
.fm-form .wpcf7-form-control-wrap { display: block; }