/**
 * Smart Catering Child — Soft veil page transition (paired with
 * assets/js/page-transition.js + inc/page-transition.php). Timing synced with
 * DURATION (450ms). The critical cover rule is also inlined at wp_body_open so
 * the veil covers before first paint even if this file loads async.
 *
 * @package SmartCateringChild
 */

.scc-veil {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient( circle at 50% 50%, rgba(30, 30, 33, 0.96) 0%, rgba(11, 11, 13, 0.99) 70% );
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

/* ENTER — veil covers instantly before paint (class set at wp_body_open).
   Removing the class lets the base transition fade it 1 → 0 (reveal). */
html.scc-veil-cover .scc-veil {
  opacity: 1;
  pointer-events: all;
  transition: none;
}

/* EXIT — fade the veil in to cover the page, then navigation happens. */
.scc-veil.is-leaving {
  opacity: 1;
  pointer-events: all;
}

/* Brand mark — the original Smart Catering logo recolored gold (mask = logo
   shape, gold fill), with a soft shimmer sweep. The shimmer is a translating
   highlight (transform only → GPU-composited, cheap), clipped to the logo by
   the parent mask. Responsive via clamp(); entrance is fade + gentle scale. */
.scc-veil__mark {
  position: relative;
  width: clamp(170px, 42vw, 320px);
  aspect-ratio: 541 / 399;
  background-color: var(--color-gold, #d99e39);
  -webkit-mask: url(../../img/logo-horizontal-gold.svg) center / contain no-repeat;
          mask: url(../../img/logo-horizontal-gold.svg) center / contain no-repeat;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 350ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.scc-veil__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 244, 214, 0.75) 50%, transparent 58%);
  transform: translateX(-160%);
}
html.scc-veil-cover .scc-veil__mark,
.scc-veil.is-leaving .scc-veil__mark {
  opacity: 1;
  transform: scale(1);
}
html.scc-veil-cover .scc-veil__mark::after,
.scc-veil.is-leaving .scc-veil__mark::after {
  animation: scc-veil-shimmer 1.9s cubic-bezier(0.4, 0, 0.2, 1) 0.2s infinite;
}

@keyframes scc-veil-shimmer {
  0%        { transform: translateX(-160%); }
  60%, 100% { transform: translateX(160%); }
}

/* Reduced motion — keep the veil (no SPA flash) but drop all movement:
   the logo simply appears, no shimmer, no scale. */
@media (prefers-reduced-motion: reduce) {
  .scc-veil__mark {
    transform: none;
    transition: opacity 200ms ease;
  }
  .scc-veil__mark::after { display: none; }
}