/* La taille de l'ouverture en W doit etre animable. */
@property --wg-w {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 20%;
}

/* ============================================================
   WEGAM — Signatures de marque.
   1) Grille editoriale : filets verticaux discrets
   2) Transition de page : le W zoome, s'ouvre en creux, la page
      apparait derriere, puis il se dissout.
   ============================================================ */

/* ---------- 1. Grille editoriale ---------- */

.wg-grid {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 clamp(1.5rem, 5vw, 6rem);
}

.wg-grid i {
  border-left: 1px solid rgba(199, 184, 166, 0.07);
}

.wg-grid i:last-child {
  border-right: 1px solid rgba(199, 184, 166, 0.07);
}

body.wg-no-grid .wg-grid { display: none; }

@media (max-width: 900px) {
  .wg-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 2. Transition de page ---------- */

.wg-wipe {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  overflow: hidden;
}

/* Le vermillon plein ecran, perce du W. La taille du W est la variable
   qui pilote le zoom : petite au depart, enorme a l'arrivee, jusqu'a
   ce que l'ouverture mange tout l'ecran. */
.wg-wipe__panel {
  position: absolute;
  inset: 0;
  background: #fb0301;
  opacity: 0;
  --wg-w: 18%;
  -webkit-mask-image: linear-gradient(#fff, #fff), url('/brand/w-mark.svg');
          mask-image: linear-gradient(#fff, #fff), url('/brand/w-mark.svg');
  -webkit-mask-size: 100% 100%, var(--wg-w) auto;
          mask-size: 100% 100%, var(--wg-w) auto;
  -webkit-mask-position: center, center;
          mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity 0.32s ease, --wg-w 0.95s cubic-bezier(0.76, 0, 0.24, 1);
}

.wg-wipe.is-cover .wg-wipe__panel {
  opacity: 1;
}

.wg-wipe.is-reveal .wg-wipe__panel {
  opacity: 0;
  --wg-w: 620%;
  transition: opacity 0.5s ease 0.5s, --wg-w 1s cubic-bezier(0.76, 0, 0.24, 1);
}

.wg-wipe.is-instant .wg-wipe__panel { transition: none; }

/* Le W plein, en noir urbain, pendant que la page se couvre. */
.wg-wipe__mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.wg-wipe__mark svg {
  width: 18vw;
  height: auto;
  fill: #1A1A1A;
}