/* Attract screen: two light worlds meeting on a diagonal seam.
   Composed as a printed poster - title band, photographic plate band,
   label band - so no text ever sits on top of a photograph.
   The seam runs from x=1074 at the top to x=846 at the bottom. */

:root {
  /* Proportions of the authored 1920 width, so the diagonal holds its place
     whatever extra width the stage is given. 1074/1920 and 846/1920. */
  --seam-top: 55.94%;
  --seam-bot: 44.06%;
  --seam-top-dark: 56.15%;
  --seam-bot-dark: 44.27%;
}

.attract { position: absolute; inset: 0; background: var(--t1-paper); }

.half { position: absolute; inset: 0; overflow: hidden; }
.half--light {
  clip-path: polygon(0 0, var(--seam-top) 0, var(--seam-bot) 100%, 0 100%);
  background: var(--t1-paper);
  color: var(--t1-ink);
}
.half--dark {
  clip-path: polygon(var(--seam-top-dark) 0, 100% 0, 100% 100%, var(--seam-bot-dark) 100%);
  background: var(--d2-abyss);
  color: var(--d2-ink);
}

/* The plate band. One continuous horizontal strip, cut in two by the seam. */
.half__media {
  position: absolute;
  top: 258px;
  bottom: 374px;
  overflow: hidden;
}
/* Each half's photograph is laid out inside its own wedge, overlapping the
   seam, so the clip never eats the subject. */
.half--light .half__media { left: 0; right: 42.71%; }
.half--dark  .half__media { left: 45.31%; right: 0; }
.half__media img { width: 100%; height: 100%; object-fit: cover; }
.half--light .half__media img { object-position: 50% 34%; }
.half--dark  .half__media img { object-position: 50% 50%; }
.half--light .half__media { border-top: 1px solid var(--t1-rule); border-bottom: 1px solid var(--t1-rule); }
.half--dark .half__media { border-top: 1px solid var(--d2-rule); border-bottom: 1px solid var(--d2-rule); }

.half--light .half__media::after,
.half--dark .half__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.half--light .half__media::after { background: linear-gradient(90deg, transparent 52%, rgba(236,238,241,0.62) 94%); }
.half--dark .half__media::after { background: linear-gradient(270deg, transparent 52%, rgba(4,7,13,0.66) 94%); }

/* Label band, on flat ground below the plate. */
.half__meta { position: absolute; z-index: 4; bottom: 58px; width: 44.8%; }
.half--light .half__meta { left: 3.96%; }
.half--dark  .half__meta { right: 3.96%; text-align: right; }

.half__no { font-family: var(--data); font-size: 19px; letter-spacing: 0.28em; text-transform: uppercase; }
.half--light .half__no { color: var(--t1-accent); }
.half--dark  .half__no { color: var(--d2-accent); }

.half__name { font-family: var(--sign); font-weight: 800; font-size: 58px; text-transform: uppercase; line-height: 0.86; letter-spacing: 0.006em; margin-top: 14px; }
.half__hook { font-size: 24px; line-height: 1.44; margin-top: 16px; }
.half--light .half__hook { color: var(--t1-ink-soft); }
.half--dark  .half__hook { color: var(--d2-ink-soft); }

.touchcue {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  min-height: 92px;
  padding: 0 44px;
  border: 1px solid currentColor;
  font-family: var(--data);
  font-size: 19px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.half--light .touchcue { color: var(--t1-ink); }
.half--light .touchcue:active { background: var(--t1-ink); color: var(--t1-paper); }
.half--dark  .touchcue { color: var(--d2-ink); }
.half--dark  .touchcue:active { background: var(--d2-accent); color: var(--d2-abyss); border-color: var(--d2-accent); }
@media (hover: hover) {
  .half--light .touchcue:hover { background: var(--t1-accent); border-color: var(--t1-accent); color: var(--t1-paper); }
  .half--dark  .touchcue:hover { background: var(--d2-accent); border-color: var(--d2-accent); color: var(--d2-abyss); }
}
.touchcue__dot { width: 14px; height: 14px; border-radius: 50%; background: currentColor; }

/* The whole half is the hit target. The cue is only the invitation. */
.half__hit { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; }

/* Title spans the seam and inverts across it. */
.seamtitle { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: grid; place-items: start center; padding-top: 28px; }
.seamtitle__word {
  font-family: var(--sign);
  font-weight: 800;
  font-size: 172px;
  letter-spacing: 0.016em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.seamtitle--light { clip-path: polygon(0 0, var(--seam-top) 0, var(--seam-bot) 100%, 0 100%); color: var(--t1-ink); }
.seamtitle--dark  { clip-path: polygon(var(--seam-top-dark) 0, 100% 0, 100% 100%, var(--seam-bot-dark) 100%); color: var(--d2-ink); }

.seamsub { position: absolute; inset: auto 0 auto 0; top: 212px; z-index: 5; text-align: center; pointer-events: none; }
.seamsub__line { font-family: var(--data); font-size: 17px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--t1-ink-faint); }
.seamsub--dark { clip-path: polygon(var(--seam-top-dark) 0, 100% 0, 100% 100%, var(--seam-bot-dark) 100%); }
.seamsub--dark .seamsub__line { color: var(--d2-ink-soft); }

/* The seam is drawn as SVG on the same 1920x1080 grid the clip paths use, so
   the line and the cut stay welded together at any stage size. */
.seam {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.seam__base { stroke: #1b1f26; stroke-width: 2; }
.seam__glow {
  stroke: #8ef0e2;
  stroke-width: 3;
  stroke-dasharray: 260 1300;
  filter: drop-shadow(0 0 7px rgba(142, 240, 226, 0.85));
}

/* Small fullscreen control, parked in the light half's quiet corner. */
.fsbtn {
  position: absolute;
  z-index: 8;
  top: 26px;
  left: 3.96%;
  min-height: 62px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--t1-rule);
  color: var(--t1-ink-soft);
  font-family: var(--data);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fsbtn:active { background: var(--t1-ink); color: var(--t1-paper); }
@media (hover: hover) { .fsbtn:hover { background: var(--t1-accent); border-color: var(--t1-accent); color: var(--t1-paper); } }