/* The cover: the garden gates, tied with a ribbon, which open onto the card.

   Two pictures per screen shape, made to line up: the gateway with its gates
   shut (the leaves are cut from it, assets/cover/leaf-l/r*.webp, the jaali's
   holes see-through where the garden shows) and the same gateway standing
   open onto the garden (beyond*.webp, which is also the wall and the roses).
   Each leaf is its own box, hinged at its outer edge. geometry.css (generated)
   sets which pictures, where the leaves and the ribbon go, and --shape, which
   js/cover.js reads for the petals and butterflies.

   Sizes: on phones and tablets the gates cover the screen, drawn for its
   shape. On a laptop or desktop they fill the card's 3:4 column, with the
   blush room either side. */

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

html.is-shut .card {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* ------------------------------------------------------------ the gate */

.gate {
  --d-h: max(100vh, calc(100vw / var(--gate-r)));
  --d-w: max(100vw, calc(100vh * var(--gate-r)));
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: var(--pearl);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

@supports (height: 100svh) {
  .gate {
    --d-h: max(100svh, calc(100vw / var(--gate-r)));
    --d-w: max(100vw, calc(100svh * var(--gate-r)));
  }
}

@media (min-aspect-ratio: 751/1000) {
  html:not(.is-tablet) .gate {
    --d-h: 100vh;
    --d-w: calc(100vh * var(--gate-r));
  }
  @supports (height: 100svh) {
    html:not(.is-tablet) .gate { --d-h: 100svh; --d-w: calc(100svh * var(--gate-r)); }
  }
}

.gate[hidden] { display: none; }

.gate.is-opening { background: none; }

/* The first frame, before the real pictures have decoded: a 24px copy, blown up. */
html.is-loading .gate,
html.is-arriving .gate { background: var(--pearl) var(--gate-tiny) center / cover no-repeat; }

.gate-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, #fbf3ee 0%, #efdcd5 62%, #dcc3bb 100%);
}

.gate-backdrop::after {
  /* The garden itself, huge and out of focus: the morning around the column. */
  content: "";
  position: absolute;
  inset: -10%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(40px) brightness(1.05) saturate(.9);
  opacity: .7;
}

.gate-inner {
  position: absolute;
  inset: 0;
}

.garden {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--d-w);
  height: var(--d-h);
  transform: translate(-50%, -50%);
  overflow: hidden;            /* petals and butterflies stay in the picture (the laptop column) */
}

.stage {
  position: absolute;
  inset: 0;
  perspective: calc(var(--d-w) * 1.3);
  perspective-origin: 50% 55%;
}

.g-art {
  position: absolute;
  inset: 0;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* The garden's morning light in the gateway, which swells as the gates open. */
.g-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 30% 36% at var(--open-cx) var(--open-cy), #fffdf8, rgba(255, 244, 232, .75) 45%, rgba(255, 236, 222, 0) 100%);
  -webkit-mask: var(--open-mask) 0 0 / 100% 100% no-repeat;
          mask: var(--open-mask) 0 0 / 100% 100% no-repeat;
  opacity: 0;
}

/* ------------------------------------------------------------ the gates */

.g-leaf {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.g-leaf-l {
  left: var(--lf-l-x);
  top: var(--lf-l-y);
  width: var(--lf-l-w);
  height: var(--lf-l-h);
  transform-origin: 0 50%;
}

.g-leaf-r {
  left: var(--lf-r-x);
  top: var(--lf-r-y);
  width: var(--lf-r-w);
  height: var(--lf-r-h);
  transform-origin: 100% 50%;
}

.g-leaf-art {
  position: absolute;
  inset: 0;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Light through the seam as they give. */
.g-seam {
  position: absolute;
  left: var(--seam-x);
  top: var(--open-t);
  height: calc(var(--open-b) - var(--open-t));
  width: calc(var(--d-w) * .006);
  translate: -50% 0;
  background: linear-gradient(transparent, #fffaf0 12%, #fffef9 50%, #fffaf0 88%, transparent);
  box-shadow: 0 0 calc(var(--d-w) * .03) calc(var(--d-w) * .012) rgba(255, 238, 214, .8);
  opacity: 0;
}

/* ------------------------------------------------------------ petals and butterflies */

.g-petals,
.g-flies {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.g-petal {
  position: absolute;
  left: 0;
  top: 0;
  perspective: 300px;
  will-change: transform;
}

.g-petal b {
  display: block;
  transform-style: preserve-3d;
}

.g-petal img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 3px rgba(120, 70, 70, .18));
}

/* A butterfly: one picture, drawn twice, each wing turning about the body. */
.g-fly {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--fly, 40px);
  aspect-ratio: var(--fly-r);
  margin: calc(var(--fly, 40px) / var(--fly-r) * -.5) 0 0 calc(var(--fly, 40px) * -.5);
  will-change: transform;
}

.g-fly-in {
  position: absolute;
  inset: 0;
  perspective: calc(var(--fly, 40px) * 3);
  filter: drop-shadow(0 3px 3px rgba(90, 60, 50, .22));
}

.g-wing {
  position: absolute;
  inset: 0;
  background: url(../assets/cover/butterfly.webp) 0 0 / 100% 100% no-repeat;
  transform-origin: var(--fly-body) 50%;
}

.g-wing-l { clip-path: inset(0 calc(100% - var(--fly-body)) 0 0); }
.g-wing-r { clip-path: inset(0 0 0 var(--fly-body)); }

/* ------------------------------------------------------------ the ribbon */

.ribbon {
  position: absolute;
  left: var(--rb-x);
  top: var(--rb-y);
  width: var(--rb-w);
  aspect-ratio: var(--rb-r);
  translate: -50% calc(var(--rb-knot) * -100%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.rb-band,
.rb-bow {
  position: absolute;
  inset: 0;
  background: url(../assets/cover/ribbon.webp) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(var(--d-w) * .004) calc(var(--d-w) * .005) rgba(110, 60, 60, .25));
}

.rb-band-l { clip-path: inset(0 calc(100% - var(--rb-bow-l)) 0 0); transform-origin: var(--rb-bow-l) var(--rb-knot-y); }
.rb-band-r { clip-path: inset(0 0 0 var(--rb-bow-r)); transform-origin: var(--rb-bow-r) var(--rb-knot-y); }
.rb-bow { clip-path: inset(0 calc(100% - var(--rb-bow-r)) 0 var(--rb-bow-l)); transform-origin: 50% var(--rb-knot-y); }

.gate.is-pressed .rb-bow { transform: scale(.96); transition: transform 140ms ease; }

/* An invitation to touch: a soft ring leaving the knot. */
.rb-ring {
  position: absolute;
  left: 50%;
  top: calc(var(--rb-knot) * 100%);
  width: calc(var(--rb-bow-r) - var(--rb-bow-l));
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 10px rgba(255, 220, 215, .6);
  opacity: 0;
  animation: rb-ring 2.8s cubic-bezier(.2, .6, .3, 1) 1.2s infinite;
  pointer-events: none;
}

@keyframes rb-ring {
  0%   { opacity: .95; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.5); }
}

.ribbon:focus-visible .rb-ring { opacity: 1; animation: none; transform: scale(1.05); }

/* Tapping the gates anywhere but the bow points to it. */
.gate.is-nudged .rb-ring { animation: rb-ring 900ms cubic-bezier(.2, .6, .3, 1) 2; }
.gate.is-nudged .gate-hint { animation: hint-flash 900ms ease; }

/* ------------------------------------------------------------ words and buttons */

.gate-hint {
  position: absolute;
  left: 50%;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px), 4.5vh);
  width: max-content;
  max-width: 86vw;
  margin: 0;
  padding: 10px 20px 10px calc(20px + .26em);
  translate: -50% 0;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  background: rgba(255, 250, 246, .62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(120, 70, 70, .12);
  color: var(--rose);
  font: 600 12px/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  animation: hint-pulse 3.2s ease-in-out 1.4s infinite;
  pointer-events: none;
}

@keyframes hint-pulse {
  0%, 100% { opacity: .92; }
  50%      { opacity: .66; }
}

@keyframes hint-flash {
  0%, 100% { opacity: .92; }
  30%      { opacity: 1; background: rgba(255, 255, 255, .9); }
}

/* The garden's light, as the view passes through the gateway. */
.g-flood {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #fffefb, #fff8f2 45%, #f8e8e1 90%);
  opacity: 0;
  pointer-events: none;
}

.sound-toggle {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: rgba(255, 250, 246, .55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--rose);
  cursor: pointer;
}

.sound-toggle svg { width: 100%; height: 100%; display: block; }
.sound-toggle path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .spk { fill: currentColor; }
.sound-toggle[aria-pressed="true"] .mute,
.sound-toggle[aria-pressed="false"] .wave { display: none; }
.sound-toggle:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* ------------------------------------------------------------ arriving */

html.is-loading .stage,
html.is-loading .ribbon,
html.is-loading .gate-hint,
html.is-loading .sound-toggle { opacity: 0; }

html.is-arriving .stage        { animation: arrive-gates 1300ms cubic-bezier(.2, .7, .2, 1) both; }
html.is-arriving .ribbon       { animation: arrive-bow 900ms cubic-bezier(.2, 1.3, .35, 1) 420ms both; }
html.is-arriving .gate-hint    { animation: arrive-fade 900ms ease 1000ms both, hint-pulse 3.2s ease-in-out 1.9s infinite; }
html.is-arriving .sound-toggle { animation: arrive-fade 700ms ease 1100ms both; }

@keyframes arrive-gates {
  from { opacity: 0; transform: scale(1.05); filter: brightness(1.25) saturate(.7); }
  to   { opacity: 1; transform: none; filter: none; }
}

@keyframes arrive-bow {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: none; }
}

@keyframes arrive-fade { from { opacity: 0; } to { opacity: 1; } }

.gate.is-opening .gate-hint,
.gate.is-opening .rb-ring { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .rb-ring, .gate-hint { animation: none !important; }
}