/* Inner-page gimmicks (Manu's request of 29 Oct 2026, built 8 Nov 2026), on brand with the "drop":
   1. the oil line: a lime scroll-progress line along the top with a drop at its tip;
   2. photos below the fold open like a drop spreading on water as they scroll into view;
   3. a small drop ring where a primary button is pressed.
   Loaded only on inner pages (functions.php: never the home page or the booking, account, office and e-mail pages).
   Everything is off under prefers-reduced-motion. Only transform, opacity and clip-path animate. */

/* 1. Oil line. --sd-oil (0..1) comes from gimmicks.js; browsers with scroll timelines drive it in CSS instead. */
.sd-oil{position:fixed;inset:0 0 auto 0;height:3px;z-index:1001;pointer-events:none;opacity:0;transition:opacity .45s cubic-bezier(.22,1,.36,1)}
.sd-oil.is-on{opacity:1}
.sd-oil__line{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--sd-oil,0));background:linear-gradient(90deg,rgba(212,243,107,.25),#d4f36b 65%,#ecfbbd);border-radius:0 3px 3px 0}
.sd-oil__drop{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50% 50% 50% 0;background:#d4f36b;box-shadow:0 0 0 1px rgba(14,75,79,.25),0 0 12px rgba(212,243,107,.75);
  transform:translateX(calc(var(--sd-oil,0) * var(--sd-oil-w,100vw))) rotate(45deg)}
@supports (animation-timeline:scroll()){
  .sd-oil__line{animation:sd-oil-line linear both;animation-timeline:scroll(root block)}
  .sd-oil__drop{animation:sd-oil-drop linear both;animation-timeline:scroll(root block)}
}
@keyframes sd-oil-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sd-oil-drop{from{transform:translateX(0) rotate(45deg)}to{transform:translateX(var(--sd-oil-w,100vw)) rotate(45deg)}}

/* 2. Photos: a small round "drop" of the picture shows first, then spreads to the edges. A keyframe animation, not a
   transition, so card styles that set their own image transition (hover zoom) neither block it nor get overridden. */
main .sd-drop-reveal{clip-path:circle(22% at 50% 55%);opacity:.5}
main .sd-drop-reveal.is-dropped{clip-path:none;opacity:1;animation:sd-drop-open .95s cubic-bezier(.22,1,.36,1) both}
@keyframes sd-drop-open{
  from{clip-path:circle(22% at 50% 55%);opacity:.5}
  55%{opacity:1}
  to{clip-path:circle(75% at 50% 50%);opacity:1}
}

/* 3. Press on a primary button: one lime ring, 450 ms, from where the finger or pointer landed. */
.sd-splash{position:fixed;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid #d4f36b;pointer-events:none;z-index:2000;
  opacity:.75;transform:translate(var(--x,0),var(--y,0)) scale(.45);animation:sd-splash .45s cubic-bezier(.22,1,.36,1) forwards}
@keyframes sd-splash{to{opacity:0;transform:translate(var(--x,0),var(--y,0)) scale(1.5)}}

@media (prefers-reduced-motion:reduce){
  .sd-oil,.sd-splash{display:none}
  main .sd-drop-reveal,main .sd-drop-reveal.is-dropped{clip-path:none;opacity:1;animation:none}
}