/* ==========================================================================
   PICKER SAFARI COMPOSITING FIX (override over default.css)
   ==========================================================================

   Problem:
   On Safari/WebKit the date/time picker overlay flashes (a hard repaint flicker)
   when it opens over the large hero image. Chrome is unaffected.

   Root cause (in default.css, NOT changed here):
   - .picker__holder is a `position: fixed` fullscreen layer with
     `transform: translateY(100%)` while closed and `translateY(0)` when opened.
   - The transition for transform is `transform 0s 0.15s` (zero duration, 150ms
     delay), so the holder teleports into place in a single frame.
   - Combined with `backface-visibility: hidden` and a semi-transparent
     `background: rgba(0,0,0,.32)` painted over the hero, WebKit promotes the
     layer and forces a full-screen hardware repaint at that single frame,
     producing the flash. Chrome smooths this; WebKit does not.

   Strategy (clean, library left intact):
   - Stop hiding/showing the holder by moving it off-screen via transform.
     Instead keep it in place and toggle `visibility` + `opacity`, which the
     compositor can blend smoothly without a teleport repaint.
   - Remove `backface-visibility: hidden` (the compositing-promotion trigger).
   - Narrow the frame transition from `all` to `opacity` only, so layout
     properties are not dragged into the animation (extra paints).
   - pickadate's JS only relies on the `.picker--opened` class, not on the
     transform, so behavior is preserved. Closed state still blocks no clicks
     because `visibility: hidden` disables pointer events on the layer.
*/

/* Closed state: keep the holder in place, hide it via visibility/opacity
   instead of an off-screen transform teleport. */
.picker__holder {
  /* Cancel the off-screen transform model that causes the WebKit teleport. */
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  /* Hide without compositing a moving fixed layer. */
  visibility: hidden;
  opacity: 0;
  /* Smoothly fade the dim background; toggle visibility after the fade out. */
  transition: opacity 0.15s ease-out, visibility 0s 0.15s, background 0.15s ease-out !important;
  /* Remove the compositing-promotion trigger responsible for the flash. */
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}

/* The frame must not be translated either; it is shown via opacity only. */
.picker__frame {
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  /* Animate opacity only, not `all`, to avoid layout-driven repaints. */
  transition: opacity 0.15s ease-out !important;
}

/* Opened state: reveal the holder in place; no transform, just fade in. */
.picker--opened .picker__holder {
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  visibility: visible;
  opacity: 1;
  /* No delay on the way in: fade visibility/opacity/background together. */
  transition: opacity 0.15s ease-out, visibility 0s 0s, background 0.15s ease-out !important;
}

.picker--opened .picker__frame {
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  opacity: 1;
}

/* ==========================================================================
   TIME PICKER ONLY: full-screen repaint flash on open
   ==========================================================================

   Root cause: the dim overlay background rgba(0,0,0,.32) is painted onto the
   fixed full-screen holder the instant the time picker opens. On Safari,
   hard-setting background-color on a fixed full-screen layer over the large
   hero image triggers a one-frame screen-wide repaint (the flash, most
   visible at the top). The date picker does not hit this noticeably because
   its content/box covers the layer differently.

   Fix (keeps the dim overlay UX): don't paint the dim color directly on the
   holder. Instead paint it on a ::before pseudo-layer and fade it in via
   `opacity`. Opacity transitions on a promoted layer are composited by Safari
   without a full repaint, so the dim appears smoothly with no flash.

   Scoped to .picker--time only; the date picker keeps its existing behavior. */

/* Neutralize the direct background paint on the time holder (the flash source). */
.picker--time .picker__holder,
.picker--time.picker--opened .picker__holder {
  background: transparent !important;
}

/* Dim overlay moved to a pseudo-layer that fades via opacity instead of a
   hard background paint. Closed = transparent, opened = .32. */
.picker--time .picker__holder::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000000;
  opacity: 0;
  /* Sit behind the picker frame/box but cover the page. */
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
  /* Promote so the opacity fade is composited, not repainted. */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.picker--time.picker--opened .picker__holder::before {
  opacity: 0.32;
}