/* Title screen (home#show). Key art: Valita the mystical swallow, cropped from the Stitch key
   art without its wordmark (home/valita-hirondelle.webp), pre-upscaled 2× to 1880×1280 so it
   stays crisp at its 49rem maximum on a 2× display, over its own blurred, outpainted sky
   (home/valita-hirondelle-ciel.webp, 712×515). Two sketchbook pages are pinned over its faded
   lower edge: a close-up of the starry wing (home/valita-ailes.webp, 480×860) and the three
   elemental feathers of the Réglages palettes (home/sketch-feathers.jpg, 330×109). */

.title-screen {
  /* Stage: past 92rem × 56.25rem the composition stays centred instead of spreading out. */
  --stage-x: max(0px, (100% - 92rem) / 2);
  --stage-y: max(0px, (100dvh - 56.25rem) / 2);
  --art-w: min(56vw, 49rem);
  --paper: #c5c5c5; /* the grey of the character sheet, so the art has no seam */
  --ink: #26324d;

  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    calc(var(--margin) + var(--stage-y) + env(safe-area-inset-top))
    var(--margin)
    calc(var(--margin) + var(--stage-y) + env(safe-area-inset-bottom))
    calc(var(--margin) + var(--stage-x));
  overflow: hidden;
}

/* Night sky: a few faint stars away from the text column, and two quiet glows. */
.title-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 6% 8%, rgba(248, 250, 252, 0.5) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 3% 17%, rgba(248, 250, 252, 0.3) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 13% 22%, rgba(248, 250, 252, 0.35) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 17% 11%, rgba(248, 250, 252, 0.28) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 21% 5%, rgba(155, 255, 203, 0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 27% 16%, rgba(248, 250, 252, 0.3) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 34% 4%, rgba(248, 250, 252, 0.5) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 9% 29%, rgba(248, 250, 252, 0.28) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 39% 26%, rgba(248, 250, 252, 0.35) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 44% 12%, rgba(245, 180, 66, 0.45) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 49% 21%, rgba(248, 250, 252, 0.38) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 49% 63%, rgba(248, 250, 252, 0.32) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 55% 75%, rgba(248, 250, 252, 0.45) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 64% 58%, rgba(248, 250, 252, 0.28) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 60% 89%, rgba(248, 250, 252, 0.32) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 52% 94%, rgba(245, 180, 66, 0.38) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 96%, rgba(248, 250, 252, 0.32) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 85% 92%, rgba(155, 255, 203, 0.36) 0 1px, transparent 1.6px),
    radial-gradient(circle at 96% 97%, rgba(248, 250, 252, 0.28) 0 0.7px, transparent 1.3px),
    radial-gradient(ellipse 55% 45% at 22% 0%, rgba(46, 234, 163, 0.07), transparent 70%),
    radial-gradient(ellipse 45% 40% at 58% 100%, rgba(118, 91, 247, 0.08), transparent 70%),
    linear-gradient(180deg, #0a0f1c, var(--void) 75%);
}

/* Scrims: deep behind the text column, and along the bottom edge for the caption. */
.title-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 85% at calc(var(--stage-x) + 12%) 100%, rgba(8, 11, 17, 0.92) 0%, rgba(8, 11, 17, 0.8) 40%, rgba(8, 11, 17, 0.35) 72%, rgba(8, 11, 17, 0) 100%),
    linear-gradient(0deg, rgba(8, 11, 17, 0.85) 0%, rgba(8, 11, 17, 0.45) 22%, rgba(8, 11, 17, 0) 45%);
  pointer-events: none;
}

/* The key art's box, top right of the stage. The cards are placed on it. */
.title-screen__scene {
  position: absolute;
  top: var(--stage-y);
  right: var(--stage-x);
  width: var(--art-w);
  aspect-ratio: 940 / 640;
}

.title-screen__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  transform-origin: 27% 61%; /* Valita's head */
  animation: title-drift 24s ease-in-out infinite alternate;
}

/* Depth of field. Under the sharp art lies its sky (home/valita-hirondelle-ciel.webp): the
   same key art, widened by 242 px on the sides and 195 px top and bottom (the painting's own
   forest and desert where it has them, outpainted beyond) and blurred, mapped so its core
   matches the art exactly. The sharp art fades into light of the same colour and
   brightness, and the sky alone fades into the night, over a long eased ramp. A wider,
   dimmer halo sits under both. */
.title-screen__art::before,
.title-screen__art::after {
  content: "";
  position: absolute;
  background: url("/assets/home/valita-hirondelle-ciel-949da260.webp") 0 0 / 100% 100% no-repeat;
}

/* The art spans 17–83 % of this box across and 19–81 % up (242/1424 and 195/1030). Valita
   flies toward the text, her head a fifth of the way in: the left side fades across the art's
   edge, from the outpainted forest to her beak. The bottom fades inside the art, the other
   two sides in the outpainted margin. */
.title-screen__art::before {
  --fade-x: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, 0.12) 12%, rgba(0, 0, 0, 0.38) 16.5%, rgba(0, 0, 0, 0.7) 21%, rgba(0, 0, 0, 0.92) 25.5%, #000 30%, #000 83%, rgba(0, 0, 0, 0.78) 87%, rgba(0, 0, 0, 0.45) 92%, rgba(0, 0, 0, 0.15) 96.5%, transparent);
  --fade-y: linear-gradient(0deg, transparent 19%, rgba(0, 0, 0, 0.12) 24%, rgba(0, 0, 0, 0.38) 29%, rgba(0, 0, 0, 0.7) 35%, rgba(0, 0, 0, 0.92) 40%, #000 44%, #000 81%, rgba(0, 0, 0, 0.78) 85.5%, rgba(0, 0, 0, 0.45) 91%, rgba(0, 0, 0, 0.15) 96%, transparent);

  inset: -30.5% -25.7%;
  z-index: -1;
  -webkit-mask-image: var(--fade-x), var(--fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-x), var(--fade-y);
  mask-composite: intersect;
}

.title-screen__art::after {
  inset: -30% -22%;
  z-index: -2;
  filter: blur(40px) saturate(1.15);
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.18) 82%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.18) 82%, transparent);
}

.title-screen__art img {
  --fade-x: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1) 3.5%, rgba(0, 0, 0, 0.35) 7.5%, rgba(0, 0, 0, 0.68) 12%, rgba(0, 0, 0, 0.9) 16%, #000 19.5%);
  --fade-y: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.28) 9%, rgba(0, 0, 0, 0.6) 16%, rgba(0, 0, 0, 0.88) 23%, #000 30%);

  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: var(--fade-x), var(--fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-x), var(--fade-y);
  mask-composite: intersect;
}

/* Wide screens: the art leaves the right edge of the screen, so that side fades too. The
   swallow's wing tip sits at 79 %: past 86 % there is only sky and crystals. */
@media (min-width: 92.05rem) {
  .title-screen__art img {
    --fade-x: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1) 3.5%, rgba(0, 0, 0, 0.35) 7.5%, rgba(0, 0, 0, 0.68) 12%, rgba(0, 0, 0, 0.9) 16%, #000 19.5%, #000 86%, rgba(0, 0, 0, 0.72) 91%, rgba(0, 0, 0, 0.3) 95.5%, transparent);
  }
}

/* Tall screens: the art leaves the top edge. The raised wing tip is 6 % from the top. */
@media (min-width: 1024px) and (min-height: 56.3rem) {
  .title-screen__art img {
    --fade-y: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.28) 9%, rgba(0, 0, 0, 0.6) 16%, rgba(0, 0, 0, 0.88) 23%, #000 30%, #000 94%, rgba(0, 0, 0, 0.72) 96.5%, rgba(0, 0, 0, 0.3) 98.5%, transparent);
  }
}

/* Wide screens at 1× density: the art is shown larger, up to 60rem. The 1880 px file still
   has more pixels than it needs there. */
@media (min-width: 92.05rem) and (max-resolution: 1.49dppx) {
  .title-screen {
    --art-w: min(50vw, 60rem);
  }
}

.title-screen__content {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  max-width: 34rem;
  animation: title-rise 0.9s var(--ease-out-expo) both;
}

.title-screen__logo {
  margin: 0 0 var(--space-xs);
  padding-right: 0.1em; /* the italic V overhangs */
  background: linear-gradient(115deg, var(--text-strong) 25%, var(--emerald-pale) 60%, var(--cyan) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: italic 600 clamp(5.25rem, min(22vw, 24vh), 9.5rem)/0.95 var(--font-display);
  letter-spacing: -0.03em;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 32px rgba(56, 225, 255, 0.25));
}

.title-screen__lede {
  max-width: 31rem;
  margin: 0;
  color: #bacbbf;
  font: 400 1rem/1.625rem var(--font-ui);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  text-wrap: pretty;
}

.title-screen__menu {
  display: grid;
  gap: var(--space-sm);
  width: min(17rem, 100%);
  margin-top: var(--space-md);
}

.title-screen__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.title-screen__mode {
  text-decoration: none;
}

.title-screen__mode:hover {
  border-color: var(--hairline-strong);
  color: var(--text-strong);
}

.title-screen__stars {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-muted);
  font: 700 0.625rem/0.875rem var(--font-ui);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
}

.title-screen__stars .icon {
  color: var(--amber);
}

/* Sketchbook: the wing card overlaps the art's faded lower edge, the feather card and the
   caption sit to its left. */
.title-screen__carnet {
  position: absolute;
  top: 80%;
  right: 5%;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    ".        ailes"
    "feathers ailes"
    "caption  ailes";
  column-gap: var(--space-lg);
  margin: 0;
  animation: title-rise 1s var(--ease-out-expo) 0.3s both;
}

.title-screen__paper {
  position: relative;
  padding: 0.625rem;
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 14px 28px -10px rgba(0, 0, 0, 0.7),
    0 36px 72px -24px rgba(0, 0, 0, 0.75);
}

.title-screen__paper img {
  display: block;
  width: 100%;
  height: auto;
}

/* Light from the top left and a darker rim, laid over paper and drawing alike so each card
   reads as one sheet. The whole card is a little dimmer than the sheet: it stays under the logo. */
.title-screen__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
    radial-gradient(140% 120% at 50% 45%, rgba(38, 50, 77, 0) 60%, rgba(38, 50, 77, 0.26) 100%),
    rgba(15, 21, 35, 0.16);
  pointer-events: none;
}

/* Translucent amber washi tape with torn ends. */
.title-screen__paper::before {
  content: "";
  position: absolute;
  top: -0.6875rem;
  left: 50%;
  z-index: 2;
  width: 4.5rem;
  height: 1.375rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.06)),
    rgba(245, 196, 110, 0.62);
  clip-path: polygon(0 4%, 100% 0, 97% 22%, 100% 44%, 96.5% 66%, 100% 86%, 98% 100%, 1% 97%, 3.5% 76%, 0 56%, 3% 34%, 0.5% 18%);
  translate: -50% 0;
  rotate: var(--tape-tilt);
}

.title-screen__paper--ailes {
  --tape-tilt: -4deg;
  grid-area: ailes;
  width: clamp(8.5rem, 22vh, 12.5rem);
  rotate: 3deg;
}

.title-screen__paper--feathers {
  --tape-tilt: 3deg;
  grid-area: feathers;
  z-index: 1;
  justify-self: end;
  width: clamp(11rem, 15vw, 14.5rem);
  margin: 0 -2.75rem var(--space-lg) 0;
  padding: 0.5rem 0.5rem 0.375rem;
  rotate: -4deg;
}

.title-screen__swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 0.3125rem;
  color: var(--ink);
  font: 700 0.625rem/0.875rem var(--font-ui);
  letter-spacing: var(--tracking-label-md);
  text-align: center;
  text-transform: uppercase;
}

.title-screen__caption {
  grid-area: caption;
  display: grid;
  justify-items: end;
  gap: 0.125rem;
  max-width: 13rem;
  margin-bottom: var(--space-sm);
  text-align: right;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.title-screen__caption-title {
  color: var(--text-strong);
  font: italic 500 1.25rem/1.5rem var(--font-display);
}

.title-screen__caption-source {
  margin-bottom: var(--space-xs);
  color: var(--amber);
  font: 600 0.75rem/1rem var(--font-ui);
}

.title-screen__caption-text {
  color: var(--text-muted);
  font: 400 0.8125rem/1.25rem var(--font-ui);
  text-wrap: pretty;
}

/* Stacked layout (tablets in portrait, phones): the art becomes a band at the top, the
   sketchbook closes the page. */
@media (max-width: 1023px) {
  .title-screen {
    display: flex;
    flex-direction: column;
    padding: 0 var(--margin) calc(var(--margin) + env(safe-area-inset-bottom));
  }

  .title-screen::before {
    background:
      radial-gradient(ellipse 80% 40% at 50% 100%, rgba(118, 91, 247, 0.08), transparent 70%),
      var(--void);
  }

  .title-screen::after {
    background: linear-gradient(180deg, rgba(8, 11, 17, 0.4), rgba(8, 11, 17, 0) 5rem);
  }

  .title-screen__scene {
    display: contents;
  }

  .title-screen__art {
    position: relative;
    inset: auto;
    order: -1;
    flex: none;
    height: clamp(12rem, min(80vw, 62vh), 28rem);
    margin: 0 calc(-1 * var(--margin));
  }

  /* The band spans the screen: its sky only continues below the art. */
  .title-screen__art::before {
    inset: 0 0 -3rem;
    background: url("/assets/home/valita-hirondelle-b68b0cb0.webp") 35% 30% / cover no-repeat;
    filter: blur(24px);
    -webkit-mask-image: linear-gradient(180deg, #000 60%, rgba(0, 0, 0, 0.6) 76%, rgba(0, 0, 0, 0.22) 90%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, rgba(0, 0, 0, 0.6) 76%, rgba(0, 0, 0, 0.22) 90%, transparent);
  }

  .title-screen__art::after {
    inset: -30% -22%;
    background-size: cover;
    background-position: 35% 30%;
  }

  .title-screen__art img {
    object-position: 35% 30%; /* keeps Valita's head, her wing tips and her tail in frame */
    -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.75) 68%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.12) 91%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.75) 68%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.12) 91%, transparent);
  }

  .title-screen__content {
    position: relative;
    margin-top: -3rem;
  }

  .title-screen__carnet {
    position: static;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      "ailes ."
      "ailes caption"
      "ailes feathers"
      "ailes .";
    row-gap: var(--space-md);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--hairline);
  }

  .title-screen__paper--ailes {
    width: auto;
    margin-left: var(--space-xs);
    padding: 0.4375rem;
    rotate: -3deg;
  }

  .title-screen__paper--feathers {
    justify-self: start;
    width: min(100%, 13rem);
    margin: 0;
    padding: 0.375rem 0.375rem 0.25rem;
    rotate: 2deg;
  }

  .title-screen__paper::before {
    width: 3.5rem;
    height: 1.125rem;
  }

  .title-screen__caption {
    justify-items: start;
    max-width: 22rem;
    margin: 0;
    text-align: left;
  }
}

/* Landscape phones: the band is a letterbox. It frames her head and body. */
@media (max-width: 1023px) and (max-height: 500px) {
  .title-screen__art img {
    object-position: 35% 68%;
  }

  .title-screen__art::before {
    background-position: 35% 68%;
  }
}

@media (max-width: 767px) {
  .title-screen {
    padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
  }

  .title-screen__menu {
    width: 100%;
  }
}

@keyframes title-drift {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}

@keyframes title-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .title-screen__art,
  .title-screen__content,
  .title-screen__carnet {
    animation: none;
  }
}