/* The opening: a tall panel of kashi-kari tiles in the haveli's entrance.

   The panel covers the screen (on a laptop, the 3:4 column on the table), placed in its own
   percentages (assets/cover/cover.css says, for each shape, the picture's ratio and where its
   medallion is). While it waits, soft morning sun drifts over it, and a pool of light that
   follows the tilt of the phone, a finger or the mouse makes the glaze shine (.p-glint, masked
   to the glaze) and glint (.p-sparks, drawn by js/cover.js).

   A touch anywhere turns the tiles over, one after another, in a ripple from that spot. Each
   tile (built by js/cover.js along the painted joints) shows its piece of the courtyard on its
   back: the hero's own picture, exactly where the hero shows it, so when the last tile lands
   the gate goes and the courtyard is simply there. Between the turning tiles, the courtyard
   shows through: the gate itself is clear. */

html.is-shut,
html.is-shut body { overflow: hidden; }

/* Until the panel is ready, nothing shows but the table. */
html.is-loading .card,
html.is-loading .gate-stage { opacity: 0; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
          user-select: none;
}

.gate[hidden] { display: none; }

/* The screen, or the column on a laptop. */
.gate-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--card-w);
  translate: -50% 0;
  overflow: hidden;
  container-type: size;
  cursor: pointer;
  transition: opacity .9s ease;
}

/* The panel's picture, covering the stage. */
.panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--pic-r));
  aspect-ratio: var(--pic-r);
  translate: -50% -50%;
}

.p-art,
.p-sun,
.p-glint,
.p-sparks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.p-art { background: center / 100% 100% no-repeat; }

/* The morning sun: a soft warm light drifting slowly over the tiles, and cool shade at the
   edges, in the courtyard's one light (from the left). */
.p-sun {
  inset: -30%;
  width: auto;
  height: auto;
  background:
    radial-gradient(ellipse 42% 30% at 38% 40%, rgba(255, 226, 170, .55), rgba(255, 214, 150, .18) 55%, transparent 75%);
  mix-blend-mode: soft-light;
  animation: km-sun 26s ease-in-out infinite alternate;
}

/* The shadows of a neem tree just out of view, drifting slowly and stirring in the breeze
   (the picture is set in assets/cover/cover.css, once it is made). */
.p-leaves {
  position: absolute;
  inset: -12%;
  background: center / cover no-repeat;
  opacity: .42;
  pointer-events: none;
  animation: km-leaves 34s ease-in-out infinite alternate, km-breeze 7s ease-in-out infinite;
}

@keyframes km-leaves {
  0% { translate: -5% -3%; }
  100% { translate: 5% 4%; }
}

@keyframes km-breeze {
  0%, 100% { rotate: 0deg; scale: 1; }
  40% { rotate: .5deg; scale: 1.008; }
  70% { rotate: -.3deg; scale: .996; }
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 42% 45%, transparent 55%, rgba(20, 34, 72, .28));
  pointer-events: none;
}

@keyframes km-sun {
  0% { translate: -6% -4%; }
  100% { translate: 8% 7%; }
}

/* The pool of light on the glaze (js/cover.js moves --gx, --gy). */
.p-glint {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  background:
    radial-gradient(circle calc(var(--gr, 26cqmax) * .42) at var(--gx, 50%) var(--gy, 42%),
      rgba(255, 252, 242, .5), rgba(255, 246, 222, .2) 45%, transparent 100%),
    radial-gradient(circle var(--gr, 26cqmax) at var(--gx, 50%) var(--gy, 42%),
      rgba(255, 240, 205, .26), rgba(255, 232, 190, .1) 50%, transparent 100%);
  mix-blend-mode: screen;
}

.p-sparks { mix-blend-mode: screen; }

/* The tiles, built on the touch: each a front (its piece of the panel) and a back (its piece
   of the courtyard), turning in 3D. They sit in the stage's own pixels. */
.tiles {
  position: absolute;
  inset: 0;
  perspective: 1100px;
  pointer-events: none;
}

.tile {
  position: absolute;
  transform-style: preserve-3d;
}

.tile > i {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* the joints show on the tiles' fronts as they loosen; their backs are the courtyard, whole */
.tile > i:first-child { box-shadow: inset 0 0 0 .6px rgba(70, 48, 24, .38); }

.tile > i > b {
  position: absolute;
  inset: 0;
  background: #0b1224;
  opacity: 0;
}

/* The medallion: where the hint points, and the keyboard's way in. */
.medallion {
  position: absolute;
  left: var(--med-x);
  top: var(--med-y);
  width: var(--med-d);
  aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.medallion:focus-visible { outline: 2px solid #fff3d6; outline-offset: 5px; }

.m-ring {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 232, 170, .75), 0 0 22px 6px rgba(255, 214, 130, .4);
  animation: km-ring 2.8s ease-in-out infinite;
}

@keyframes km-ring {
  0%, 100% { opacity: .25; scale: .97; }
  50% { opacity: 1; scale: 1.04; }
}

.gate-hint {
  position: absolute;
  left: 50%;
  top: calc(var(--med-y) + var(--med-d) * var(--pic-r) / 2 + 3.2%);
  translate: -50% 0;
  margin: 0;
  padding: .62em 1.3em .58em;
  border-radius: 99px;
  white-space: nowrap;
  font: 700 clamp(10.5px, min(3cqw, 1.7cqh), 15px)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  color: #fff6e2;
  background: rgba(14, 30, 70, .66);
  box-shadow: 0 0 0 1px rgba(255, 220, 150, .45), 0 4px 14px rgba(0, 0, 0, .3);
  pointer-events: none;
  animation: km-hint 2.8s ease-in-out infinite;
}

@keyframes km-hint {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}

/* A touch that turns into a slide just moves the light; the hint answers a slide with a
   little pulse, to say a tap opens. */
.gate.is-sliding .gate-hint { animation-duration: 1.2s; }

.sound-toggle {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: calc((100% - var(--card-w)) / 2 + 14px);   /* the column's corner on a laptop */
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 30, 70, .55);
  box-shadow: 0 0 0 1px rgba(255, 220, 150, .4);
  cursor: pointer;
}

.sound-toggle svg { width: 22px; margin: 9px; fill: none; stroke: #fff2d8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .mute { display: none; }
.sound-toggle[aria-pressed="false"] .wave { display: none; }
.sound-toggle[aria-pressed="false"] .mute { display: inline; }

/* Arriving: the panel comes up out of the table. */
html.is-arriving .gate-stage { animation: km-arrive 1.1s ease-out both; }

@keyframes km-arrive {
  from { opacity: 0; scale: 1.03; }
  to { opacity: 1; scale: 1; }
}

/* Opening: everything but the tiles goes quickly (js/cover.js fades them; once faded they
   are hidden outright). */
.gate.is-opening .gate-stage { cursor: default; }
.gate.is-faded .p-sun,
.gate.is-faded .p-leaves,
.gate.is-faded .p-glint,
.gate.is-faded .p-sparks,
.gate.is-faded .gate-hint,
.gate.is-faded .m-ring { visibility: hidden; }
.gate.is-opening .medallion { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .p-sun,
  .p-leaves,
  .m-ring,
  .gate-hint { animation: none; }
  .m-ring { opacity: .8; }
}