.landscape-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.landscape-effect {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.is-effect-ready .landscape-effect { visibility: visible; }

.landscape-effect i {
  position: absolute;
  display: block;
}

.landscape-effect-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: inherit;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Water bends the photograph beneath a roaming glass lens. */
  [data-landscape-effect="water"] .landscape-effect::before {
    position: absolute;
    width: 42%;
    aspect-ratio: 1;
    left: calc(var(--effect-x, 50%) - 21%);
    top: calc(var(--effect-y, 50%) - 31%);
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.3), rgba(87,176,180,.12) 42%, rgba(12,49,59,.08) 68%, transparent 70%);
    box-shadow: inset 0 0 38px rgba(215,255,255,.22), 0 18px 42px rgba(8,41,51,.12);
    backdrop-filter: blur(2px) saturate(1.35) contrast(1.05);
    content: "";
    opacity: 0;
    transform: scale(.25);
    transition: opacity 180ms ease, transform 620ms var(--ease-out-quart), left 220ms var(--ease-out-quart), top 220ms var(--ease-out-quart);
  }
  [data-landscape-effect="water"] .landscape-effect-photo {
    clip-path: circle(0 at var(--effect-x, 50%) var(--effect-y, 50%));
    filter: saturate(1.45) contrast(1.08) brightness(1.07);
    transform: scale(1.13);
    transition: clip-path 620ms var(--ease-out-quart), transform 620ms var(--ease-out-quart);
  }
  [data-landscape-effect="water"].is-effect-active .landscape-effect-photo {
    clip-path: circle(21% at var(--effect-x, 50%) var(--effect-y, 50%));
  }
  [data-landscape-effect="water"] .landscape-effect i {
    inset: 50% auto auto 50%;
    width: 16%;
    aspect-ratio: 1;
    border: 1px solid rgba(224,250,248,.8);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%,-50%) scale(.2);
  }
  [data-landscape-effect="water"].is-effect-active .landscape-effect::before { opacity: 1; transform: scale(1); }
  [data-landscape-effect="water"].is-effect-active .landscape-effect i { animation: portfolio-ripple 1.45s var(--ease-out-quart) both; }
  [data-landscape-effect="water"] .landscape-effect i:nth-of-type(2) { animation-delay: 140ms; }
  [data-landscape-effect="water"] .landscape-effect i:nth-of-type(3) { animation-delay: 280ms; }
  [data-landscape-effect="water"] .landscape-effect i:nth-of-type(4) { animation-delay: 420ms; }

  /* Garden grows duplicate-photo leaves from the planted edge. */
  [data-landscape-effect="planting"] .landscape-effect i {
    bottom: -8%;
    width: 28%;
    height: 54%;
    border-radius: 100% 0 100% 0;
    opacity: 0;
    overflow: hidden;
    transform: rotate(var(--leaf-r, -22deg)) scale(.08);
    transform-origin: 20% 100%;
    transition: opacity 220ms ease, transform 700ms var(--ease-out-quart);
  }
  [data-landscape-effect="planting"] .landscape-effect i .landscape-effect-photo {
    inset: auto;
    bottom: -18%;
    left: -85%;
    width: 360%;
    height: 220%;
    max-width: none;
    filter: brightness(1.07) contrast(1.08);
    transform: scale(1.04);
  }
  [data-landscape-effect="planting"] .landscape-effect i:nth-of-type(1) { left: -4%; --leaf-r: -24deg; }
  [data-landscape-effect="planting"] .landscape-effect i:nth-of-type(2) { left: 10%; bottom: -12%; width: 24%; height: 45%; --leaf-r: 18deg; transition-delay: 60ms; }
  [data-landscape-effect="planting"] .landscape-effect i:nth-of-type(3) { left: 25%; bottom: -15%; width: 25%; height: 48%; --leaf-r: -13deg; transition-delay: 110ms; }
  [data-landscape-effect="planting"] .landscape-effect i:nth-of-type(4) { left: 42%; bottom: -18%; width: 22%; height: 41%; --leaf-r: 27deg; transition-delay: 160ms; }
  [data-landscape-effect="planting"] .landscape-effect i:nth-of-type(2) .landscape-effect-photo { left: -135%; }
  [data-landscape-effect="planting"] .landscape-effect i:nth-of-type(3) .landscape-effect-photo { left: -190%; }
  [data-landscape-effect="planting"] .landscape-effect i:nth-of-type(4) .landscape-effect-photo { left: -245%; }
  [data-landscape-effect="planting"].is-effect-active .landscape-effect i { opacity: 1; transform: rotate(var(--leaf-r, -22deg)) scale(1); }

  /* Landscape light spreads from the actual fixture or illuminated area. */
  [data-landscape-effect="lighting"] .landscape-effect-photo {
    filter: brightness(1.38) saturate(1.08);
    clip-path: circle(0 at var(--effect-x) var(--effect-y));
    opacity: 0;
    transition: clip-path 1100ms var(--ease-out-quart), opacity 220ms ease;
  }
  [data-landscape-effect="lighting"] .landscape-effect::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at var(--effect-x) var(--effect-y), rgba(255,220,146,.26), transparent 56%);
    mix-blend-mode: screen;
    opacity: 0;
    content: "";
    transition: opacity 700ms var(--ease-out-quart);
  }
  [data-landscape-effect="lighting"].is-effect-active .landscape-effect-photo { clip-path: circle(62% at var(--effect-x) var(--effect-y)); opacity: .85; }
  [data-landscape-effect="lighting"].is-effect-active .landscape-effect::before { opacity: 1; }

  /* Fire produces a warm haze and a short, finite ember lift. */
  [data-landscape-effect="fire"] .landscape-effect::before {
    position: absolute;
    width: 60%;
    height: 70%;
    left: calc(var(--effect-x) - 30%);
    top: calc(var(--effect-y) - 55%);
    background: radial-gradient(ellipse at 50% 90%, rgba(255,188,78,.62), rgba(210,62,20,.2) 35%, transparent 68%);
    filter: blur(13px);
    content: "";
    opacity: 0;
    transform: scaleY(.35);
    transform-origin: bottom;
    transition: opacity 260ms ease, transform 620ms var(--ease-out-quart);
  }
  [data-landscape-effect="fire"] .landscape-effect i {
    left: calc(var(--effect-x) + (var(--ember, 0) - 1.5) * 4%);
    top: var(--effect-y);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffd27a;
    box-shadow: 0 0 10px #ff8b32;
    opacity: 0;
  }
  [data-landscape-effect="fire"] .landscape-effect i:nth-child(1) { --ember: 0; }
  [data-landscape-effect="fire"] .landscape-effect i:nth-child(2) { --ember: 1; }
  [data-landscape-effect="fire"] .landscape-effect i:nth-child(3) { --ember: 2; }
  [data-landscape-effect="fire"] .landscape-effect i:nth-child(4) { --ember: 3; }
  [data-landscape-effect="fire"].is-effect-active .landscape-effect::before { opacity: 1; transform: scaleY(1); }
  [data-landscape-effect="fire"].is-effect-active .landscape-effect i { animation: portfolio-ember 1.25s calc(var(--ember) * 110ms) ease-out both; }

  /* Architecture passes through an abstract drafting scan of the real photograph. */
  [data-landscape-effect="drafting"] .landscape-effect-photo {
    clip-path: inset(49% 0 49% 0);
    filter: grayscale(1) contrast(1.65) brightness(1.22);
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(1.025);
    transition: clip-path 760ms var(--ease-in-out), opacity 180ms ease;
  }
  [data-landscape-effect="drafting"] .landscape-effect::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(rgba(235,248,242,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(235,248,242,.28) 1px, transparent 1px);
    background-size: 9% 14%;
    content: "";
    clip-path: inset(49% 0 49% 0);
    opacity: 0;
    transition: clip-path 760ms var(--ease-in-out), opacity 180ms ease;
  }
  [data-landscape-effect="drafting"] .landscape-effect::after {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(245,255,250,.92);
    box-shadow: 0 0 14px rgba(206,255,232,.8);
    content: "";
    opacity: 0;
    transform: scaleX(.08);
    transition: opacity 180ms ease, transform 760ms var(--ease-in-out);
  }
  [data-landscape-effect="drafting"].is-effect-active .landscape-effect-photo,
  [data-landscape-effect="drafting"].is-effect-active .landscape-effect::before { clip-path: inset(7% 0); opacity: .72; }
  [data-landscape-effect="drafting"].is-effect-active .landscape-effect::after { opacity: 1; transform: scaleX(1); }

  /* Paving is laid in staggered courses, clipped to the photographed ground plane. */
  [data-landscape-effect="paving"] .landscape-effect { clip-path: var(--effect-mask, inset(45% 0 0)); }
  [data-landscape-effect="paving"] .landscape-effect i {
    left: 0;
    width: 100%;
    height: 15%;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-8%);
    transition: opacity 180ms ease, clip-path 850ms steps(5, end), transform 850ms var(--ease-out-quart);
  }
  [data-landscape-effect="paving"] .landscape-effect i:nth-of-type(even) { transform: translateX(8%); }
  [data-landscape-effect="paving"] .landscape-effect i::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent calc(100% - 1px), rgba(245,241,233,.7) 0) 0 0 / 20% 100%;
    box-shadow: inset 0 -1px rgba(245,241,233,.7);
    content: "";
  }
  [data-landscape-effect="paving"] .landscape-effect i:nth-of-type(even)::after { background-position-x: 10%; }
  [data-landscape-effect="paving"] .landscape-effect i .landscape-effect-photo { inset: auto 0; width: 100%; height: 666.667%; max-width: none; filter: brightness(1.18) contrast(1.06); }
  [data-landscape-effect="paving"] .landscape-effect i:nth-of-type(1) { top: 40%; }
  [data-landscape-effect="paving"] .landscape-effect i:nth-of-type(2) { top: 55%; transition-delay: 90ms; }
  [data-landscape-effect="paving"] .landscape-effect i:nth-of-type(3) { top: 70%; transition-delay: 180ms; }
  [data-landscape-effect="paving"] .landscape-effect i:nth-of-type(4) { top: 85%; transition-delay: 270ms; }
  [data-landscape-effect="paving"] .landscape-effect i:nth-of-type(1) img { top: -266.667%; }
  [data-landscape-effect="paving"] .landscape-effect i:nth-of-type(2) img { top: -366.667%; }
  [data-landscape-effect="paving"] .landscape-effect i:nth-of-type(3) img { top: -466.667%; }
  [data-landscape-effect="paving"] .landscape-effect i:nth-of-type(4) img { top: -566.667%; }
  [data-landscape-effect="paving"].is-effect-active .landscape-effect i { opacity: .85; clip-path: inset(0); transform: none; }

  @keyframes portfolio-ripple {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
    22% { opacity: .85; }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(4.8); }
  }
  @keyframes portfolio-ember {
    0% { opacity: 0; transform: translate(0, 8px) scale(.5); }
    22% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc((var(--ember) - 1.5) * 13px), -105px) scale(.15); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .landscape-effect { display: none; }
}