/* Aeronovate Fold — one authoritative fold system for the whole site.

   Physical model:
     1. the surface itself is masked, so the folded-away corner is REMOVED
        (genuinely transparent — whatever sits behind the surface shows through)
     2. a small flap is drawn back over the surface: the backside of the same
        material, mirrored across the crease.

   No underlay colour is painted anywhere. Move a folded surface onto any
   background and the exposed corner adapts automatically. */

:root {
  --fold-size-micro: 26px;
  --fold-size-sm: 32px;
  --fold-size-md: 38px;
  --fold-size-lg: 44px;
  --fold-size-xl: 50px;

  /* backside material of a light paper/card surface (default) */
  --fold-face-1: #fbfdfe;
  --fold-face-2: #c5d2dc;
  --fold-crease: rgba(20, 38, 66, 0.3);
}

/* The surface that folds. Its corner is physically removed with a mask, so
   the real parent background becomes visible through the opening. */
.aeron-fold-host {
  position: relative;
  --fold-size: var(--fold-size-md);
  --aeron-fold-cut: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 0 H100 V100 C64 88 26 56 0 0 Z' fill='%23000'/></svg>");
  -webkit-mask-image: linear-gradient(#000, #000), var(--aeron-fold-cut);
  mask-image: linear-gradient(#000, #000), var(--aeron-fold-cut);
  -webkit-mask-size:
    100% 100%,
    var(--fold-size) var(--fold-size);
  mask-size:
    100% 100%,
    var(--fold-size) var(--fold-size);
  -webkit-mask-position:
    0 0,
    100% 0;
  mask-position:
    0 0,
    100% 0;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.aeron-fold-host[data-size="micro"] {
  --fold-size: var(--fold-size-micro);
}
.aeron-fold-host[data-size="sm"] {
  --fold-size: var(--fold-size-sm);
}
.aeron-fold-host[data-size="md"] {
  --fold-size: var(--fold-size-md);
}
.aeron-fold-host[data-size="lg"] {
  --fold-size: var(--fold-size-lg);
}
.aeron-fold-host[data-size="xl"] {
  --fold-size: var(--fold-size-xl);
}

/* The flap: backside of the folded corner, mirrored across the crease.
   It sits over the retained surface, never over the opening. */
.aeron-fold {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: var(--fold-size, var(--fold-size-md));
  height: var(--fold-size, var(--fold-size-md));
  display: block;
  pointer-events: none;
  background: none;
  border: 0;
  box-shadow: none;
  clip-path: none;
  border-radius: 0;
  overflow: visible;
  opacity: 1;
  z-index: 2;
}

.aeron-fold[data-size="micro"] {
  --fold-size: var(--fold-size-micro);
}
.aeron-fold[data-size="sm"] {
  --fold-size: var(--fold-size-sm);
}
.aeron-fold[data-size="md"] {
  --fold-size: var(--fold-size-md);
}
.aeron-fold[data-size="lg"] {
  --fold-size: var(--fold-size-lg);
}
.aeron-fold[data-size="xl"] {
  --fold-size: var(--fold-size-xl);
}

.aeron-fold svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.aeron-fold .aeron-fold__cast,
.aeron-fold .aeron-fold__gloss,
.aeron-fold .aeron-fold__shade {
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Restrained hover: shadow deepens marginally, nothing moves more than 1px. */
@media (hover: hover) {
  .aeron-fold-host:hover .aeron-fold .aeron-fold__cast {
    opacity: 0.9;
    transform: translate(-1px, 1px);
  }
  .aeron-fold-host:hover .aeron-fold .aeron-fold__gloss {
    opacity: 0.85;
  }
}

/* Darker surfaces carry a darker backside. */
.aeron-fold-host[data-fold-material="navy"] {
  --fold-face-1: #123058;
  --fold-face-2: #06152f;
  --fold-crease: rgba(0, 0, 0, 0.4);
}
.aeron-fold-host[data-fold-material="silverblue"] {
  --fold-face-1: #f2f8fb;
  --fold-face-2: #d3e2ea;
  --fold-crease: rgba(20, 38, 66, 0.18);
}

/* Content safe area helpers (used only where content could collide). */
.aeron-fold-safe-sm {
  padding-right: max(36px, var(--fold-safe-pad, 0px));
}
.aeron-fold-safe-md {
  padding-right: max(52px, var(--fold-safe-pad, 0px));
}
.aeron-fold-safe-lg {
  padding-right: max(70px, var(--fold-safe-pad, 0px));
}
.aeron-fold-safe-xl {
  padding-right: max(92px, var(--fold-safe-pad, 0px));
}

@media (max-width: 767px) {
  :root {
    --fold-size-micro: 22px;
    --fold-size-sm: 26px;
    --fold-size-md: 30px;
    --fold-size-lg: 34px;
    --fold-size-xl: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aeron-fold,
  .aeron-fold * {
    transition: none !important;
    animation: none !important;
  }
}

/* Legacy corner cues that the runtime converts into the shared Fold: only the
   position survives, every piece of old paint is gone (backgrounds, gold
   diagonals, conic gradients, rotations, triangles). */
.aeron-fold::before,
.aeron-fold::after {
  content: none !important;
}
.oi-fold-line.aeron-fold,
.swa .swa-navy-fold.aeron-fold,
.wb-fold.aeron-fold,
.wc-fold.aeron-fold,
.wd-fold.aeron-fold,
.we-fold.aeron-fold,
.wf-fold.aeron-fold,
.wf-rail-fold.aeron-fold,
.ht__fold.aeron-fold,
.cs-fold.aeron-fold {
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: var(--fold-size, var(--fold-size-md)) !important;
  height: var(--fold-size, var(--fold-size-md)) !important;
  background: none !important;
  border: 0 !important;
  transform: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}