/* ============================================================
   CONCEPTO P — THE CROSSING
   20 October (P: "the transition animation takes too long ... water ripples fast and elegant, spend no time
   rendering weird"): one ripple. The room being left is gone on the frame of the touch; it is never kept under
   the next one, never faded, never blurred, so nothing of it can show through. From the point touched
   (--cp-cx, --cp-cy) one clean ring runs out across the white (--cp-ripple, CP.speed.ripple, on the settle
   curve) and inside it the next room is already standing, sharp, in its place. The ring is water: a hairline
   of shade where the surface turns from the lamp (on the white, just ahead of the ring) and a hairline of
   light where it catches it (on the room, just behind), both gone by the time it reaches the far corner.
   CSS only: one animated number (--cp-u, 0..1) on each layer, no filter, no blur, no canvas.

   app.js cross() writes --cp-cx, --cp-cy and --cp-far (the distance to the far corner) and starts the
   transition; #cp-ripple is the light on the ring, its own layer over the room and under the letterhead.
   The letterhead is its own layer and never moves, and is never doubled.
   Reduced motion: no transition at all; the room is simply there (app.js).
   ============================================================ */
@property --cp-u{ syntax:'<number>'; inherits:false; initial-value:0; }
@keyframes cp-ring{ from{ --cp-u:0; } to{ --cp-u:1; } }

/* the letterhead: one picture, the new one, at once */
#nav{ view-transition-name:cp-nav; }
::view-transition-group(cp-nav){ animation:none; z-index:3; }
::view-transition-old(cp-nav){ animation:none; display:none; }
::view-transition-new(cp-nav){ animation:none; opacity:1; }

/* the ground the ring runs across: the house white, with the ring's shade just ahead of its edge */
::view-transition{
  background-color:#FFFFFF;
  /* the letterhead's band is the house white the whole way: the ring's shade never passes behind the P or the words
     (23 October, v05 t6 / v18 t8). Its first layer is that white, the letterhead's height, over the shade. */
  background-repeat:no-repeat, no-repeat;
  background-size:100% var(--nav-h, 72px), 100% 100%;
  background-image:linear-gradient(#FFFFFF, #FFFFFF), radial-gradient(circle calc(var(--cp-u) * var(--cp-far, 2000px) + 22px) at var(--cp-cx, 50%) var(--cp-cy, 45%),
    rgba(18,22,28,0) calc(100% - 22px),
    rgba(18,22,28,calc(.085 * (1 - var(--cp-u)) * min(1, var(--cp-u) * 10))) calc(100% - 21px),
    rgba(18,22,28,calc(.03 * (1 - var(--cp-u)) * min(1, var(--cp-u) * 10))) calc(100% - 13px),
    rgba(18,22,28,0) 100%);
  animation:cp-ring var(--cp-ripple, .36s) var(--settle, cubic-bezier(.18,.8,.24,1)) both;
}
/* 23 October (P: "no shading in the main navigation"): the ring's shade is born as it leaves the point pressed.
   At u = 0 it was a grey disc exactly behind the word that was clicked, held there while a slow machine built the
   next room; now it has no shade until it has travelled a tenth of the way, and is the same ring after that, and in
   the letterhead's band it has none at all (the first layer above). */
::view-transition-group(root){ animation:none; }
/* the room left behind: not shown, not for a single frame */
::view-transition-old(root){ animation:none; display:none; }
/* the room arriving: whole and sharp inside the ring */
::view-transition-new(root){
  -webkit-mask-image:radial-gradient(circle calc(var(--cp-u) * var(--cp-far, 2000px)) at var(--cp-cx, 50%) var(--cp-cy, 45%), #000 calc(100% - 1px), transparent 100%);
          mask-image:radial-gradient(circle calc(var(--cp-u) * var(--cp-far, 2000px)) at var(--cp-cx, 50%) var(--cp-cy, 45%), #000 calc(100% - 1px), transparent 100%);
  animation:cp-ring var(--cp-ripple, .36s) var(--settle, cubic-bezier(.18,.8,.24,1)) both;
}

/* the light on the ring: a fine crest the lamp catches, just inside the edge, over the room */
#cp-ripple{ position:fixed; inset:0; pointer-events:none; display:none; z-index:2147483000; }
#cp-ripple.is-on{ display:block; view-transition-name:cp-ripple; }
::view-transition-group(cp-ripple){ animation:none; z-index:2; }
::view-transition-old(cp-ripple){ display:none; }
/* the crest and its wake run over the room, never through the letterhead's band (23 October): nothing of the ring,
   light or shade, is behind the P and the words */
::view-transition-new(cp-ripple){
  -webkit-mask-image:linear-gradient(to bottom, transparent var(--nav-h, 72px), #000 var(--nav-h, 72px));
          mask-image:linear-gradient(to bottom, transparent var(--nav-h, 72px), #000 var(--nav-h, 72px));
  background-image:radial-gradient(circle calc(var(--cp-u) * var(--cp-far, 2000px)) at var(--cp-cx, 50%) var(--cp-cy, 45%),
    rgba(255,255,255,0) calc(100% - 16px),
    rgba(255,255,255,calc(.5 * (1 - var(--cp-u)))) calc(100% - 4px),
    rgba(255,255,255,calc(.9 * (1 - var(--cp-u)))) calc(100% - 1.5px),
    rgba(255,255,255,0) 100%),
  /* and its wake: one smaller ring behind it, finer, gone sooner */
    radial-gradient(circle calc(var(--cp-u) * var(--cp-far, 2000px) * .8) at var(--cp-cx, 50%) var(--cp-cy, 45%),
    rgba(18,22,28,0) calc(100% - 9px),
    rgba(255,255,255,calc(.55 * (1 - var(--cp-u)) * (1 - var(--cp-u)))) calc(100% - 4px),
    rgba(18,22,28,calc(.05 * (1 - var(--cp-u)) * (1 - var(--cp-u)) * min(1, var(--cp-u) * 10))) calc(100% - 1px),
    rgba(18,22,28,0) 100%);
  animation:cp-ring var(--cp-ripple, .36s) var(--settle, cubic-bezier(.18,.8,.24,1)) both;
}

/* a browser without View Transitions: the white lifts off the next room as the same ring (house/water.js, W.ripple) */
.cp-lift{ position:fixed; inset:0; z-index:2147482000; pointer-events:none; background:transparent;
  /* in the letterhead's band the white outside the ring is laid over the shade (--cp-cx/--cp-cy are pixels, so the
     band's own circle is the same circle) */
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-size:100% var(--nav-h, 72px), 100% 100%, 100% 100%;
  background-image:radial-gradient(circle calc(var(--cp-u) * var(--cp-far, 2000px)) at var(--cp-cx, 50%) var(--cp-cy, 45%), rgba(255,255,255,0) calc(100% - 1px), #FFFFFF 100%),
    radial-gradient(circle calc(var(--cp-u) * var(--cp-far, 2000px) + 22px) at var(--cp-cx, 50%) var(--cp-cy, 45%),
    rgba(255,255,255,0) calc(100% - 22px), rgba(18,22,28,calc(.085 * (1 - var(--cp-u)) * min(1, var(--cp-u) * 10))) calc(100% - 21px), rgba(18,22,28,0) 100%),
    radial-gradient(circle calc(var(--cp-u) * var(--cp-far, 2000px)) at var(--cp-cx, 50%) var(--cp-cy, 45%), rgba(255,255,255,0) calc(100% - 1px), #FFFFFF 100%);
  animation:cp-ring var(--cp-ripple, .36s) var(--settle, cubic-bezier(.18,.8,.24,1)) both; }

/* the first room of a visit: a white veil with the room's word, opened by drops (house/water.js, W.veil) */
.cp-veil{ position:fixed; inset:0; z-index:2147482000; background:#FFFFFF; display:grid; place-items:center; pointer-events:none; }
.cp-veil-w{ margin:0; font-size:clamp(64px, 12vw, 220px) !important; line-height:.9; letter-spacing:-.03em !important; filter:url(#cp-vinyl); color:#141413; }
.cp-veil.is-open{
  -webkit-mask-image:
    radial-gradient(circle at var(--v1, 50% 50%), transparent calc(var(--vr1, 0px) - 2px), #000 calc(var(--vr1, 0px) + 8vmax)),
    radial-gradient(circle at var(--v2, 50% 50%), transparent calc(var(--vr2, 0px) - 2px), #000 calc(var(--vr2, 0px) + 6vmax)),
    radial-gradient(circle at var(--v3, 50% 50%), transparent calc(var(--vr3, 0px) - 2px), #000 calc(var(--vr3, 0px) + 6vmax)),
    radial-gradient(circle at var(--v4, 50% 50%), transparent calc(var(--vr4, 0px) - 2px), #000 calc(var(--vr4, 0px) + 6vmax));
  -webkit-mask-composite:source-in, source-in, source-in;
          mask-image:
    radial-gradient(circle at var(--v1, 50% 50%), transparent calc(var(--vr1, 0px) - 2px), #000 calc(var(--vr1, 0px) + 8vmax)),
    radial-gradient(circle at var(--v2, 50% 50%), transparent calc(var(--vr2, 0px) - 2px), #000 calc(var(--vr2, 0px) + 6vmax)),
    radial-gradient(circle at var(--v3, 50% 50%), transparent calc(var(--vr3, 0px) - 2px), #000 calc(var(--vr3, 0px) + 6vmax)),
    radial-gradient(circle at var(--v4, 50% 50%), transparent calc(var(--vr4, 0px) - 2px), #000 calc(var(--vr4, 0px) + 6vmax));
          mask-composite:intersect;
  filter:url(#cp-wet);
}
/* covering (no View Transitions): the white comes in as drops from the touched point; inside them, the veil */
.cp-veil.is-cover{
  -webkit-mask-image:
    radial-gradient(circle at var(--c1, 50% 50%), #000 calc(var(--cr1, 0px) - 6vmax), transparent var(--cr1, 0px)),
    radial-gradient(circle at var(--c2, 50% 50%), #000 calc(var(--cr2, 0px) - 4vmax), transparent var(--cr2, 0px)),
    radial-gradient(circle at var(--c3, 50% 50%), #000 calc(var(--cr3, 0px) - 4vmax), transparent var(--cr3, 0px)),
    radial-gradient(circle at var(--c4, 50% 50%), #000 calc(var(--cr4, 0px) - 4vmax), transparent var(--cr4, 0px));
          mask-image:
    radial-gradient(circle at var(--c1, 50% 50%), #000 calc(var(--cr1, 0px) - 6vmax), transparent var(--cr1, 0px)),
    radial-gradient(circle at var(--c2, 50% 50%), #000 calc(var(--cr2, 0px) - 4vmax), transparent var(--cr2, 0px)),
    radial-gradient(circle at var(--c3, 50% 50%), #000 calc(var(--cr3, 0px) - 4vmax), transparent var(--cr3, 0px)),
    radial-gradient(circle at var(--c4, 50% 50%), #000 calc(var(--cr4, 0px) - 4vmax), transparent var(--cr4, 0px));
}