/* ============================================================
   WEBSTUDIO EFFECTS — required styles.
   Copy this alongside effects.js. Colors are inherited from the
   site, so these work with any theme.
   ============================================================ */

/* ---- 2. Text reveal: each word rises out of its own mask ---- */
[data-fx="reveal"] .fx-wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* a touch of padding so letters with tails (g, y) aren't clipped */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
[data-fx="reveal"] .fx-w { display: inline-block; will-change: transform; }

/* ---- 3. Parallax: the frame crops the drifting photo ---- */
[data-fx="parallax"] {
  overflow: hidden;
  position: relative;
}
[data-fx="parallax"] > img,
[data-fx="parallax"] > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* ---- 4. Before / after slider ---- */
.fx-compare {
  --fx-pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  touch-action: none;       /* so dragging works on phones */
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.fx-compare img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.fx-compare img + img {    /* the AFTER image sits on top, clipped */
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 var(--fx-pos));
}
.fx-compare .fx-compare-line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--fx-pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.45);
  pointer-events: none;
}
.fx-compare .fx-compare-line::after {   /* the drag knob */
  content: "\2194";                      /* left-right arrow */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #333;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.fx-compare .fx-compare-label {
  position: absolute;
  bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  pointer-events: none;
}
.fx-compare .fx-compare-label-a { left: 10px; }
.fx-compare .fx-compare-label-b { right: 10px; }
/* the invisible-but-focusable range input that makes it keyboard friendly */
.fx-compare input[type="range"] {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  height: 44px;
  cursor: ew-resize;
}
.fx-compare input[type="range"]:focus-visible ~ .fx-compare-line::after {
  outline: 3px solid #4A90D9;
  outline-offset: 2px;
}

/* ---- 5. Hero video: starts invisible only while loading ---- */
video[data-fx="hero-video"] { transition: opacity .8s ease; }
video[data-fx="hero-video"].fx-video-loading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  video[data-fx="hero-video"], video[data-fx="hero-video"].fx-video-loading {
    opacity: 1; transition: none;
  }
}