/* Scene 4 — the calendar slide (calender.psd > 'slide 3').
 *
 * The section carries `hidden` in index.html and js/main.js removes it on the
 * scratch reveal, so before that it is out of layout and out of the a11y tree
 * — the reference app's `u && <Calendar/>` in markup terms.
 *
 * Every child is positioned in raw PSD px inside the 1080x1920 .frame, rebased
 * from the PSD's y 1920..3840 to the scene's own 0..1920. The numbers are the
 * same ones scene 3 uses, because calender.psd's 'slide 3' is 2.psd's 'slide 3'
 * minus the foil group.
 */

/* Desktop letterbox: the same tiled pattern band as scene 3. Proven identical
   to calender.psd's own band by tools/extract_gf.py, which writes a separate
   calendar-pattern.webp the day that stops being true. */
#calendar .scene__backdrop {
  background-image: url('../assets/slide3-pattern.webp?v=8');
  background-size: auto 100dvh;
  background-repeat: repeat-x;
}

/* PSD (220,2159)-(860,2772) */
.cal__art {
  position: absolute;
  left: 220px;
  top: 239px;
  width: 640px;
  height: 613px;
  z-index: 1;
}

/* PSD (761,2371)-(813,2416) */
.cal__heart {
  position: absolute;
  left: 761px;
  top: 451px;
  width: 52px;
  height: 45px;
  z-index: 2;
  transform-origin: 50% 50%;
}

.cal__day { z-index: 3; color: #fff; }

/* The heart beats only here now: scene 3's card no longer holds one, so the
   keyframes moved out of css/scratch.css with it. */
.breathing-heart { animation: heartbeat 2.5s ease-in-out infinite; }
@keyframes heartbeat {
  0%   { opacity: 0.85; filter: drop-shadow(0 0 2px rgba(212,175,55,0.4)); transform: scale(1); }
  50%  { opacity: 1;    filter: drop-shadow(0 0 8px rgba(212,175,55,0.8)); transform: scale(1.15); }
  100% { opacity: 0.85; filter: drop-shadow(0 0 2px rgba(212,175,55,0.4)); transform: scale(1); }
}

/* ------------------------------------------------------------ copy block
   Positioned from the PSD 'text' group baselines. Hidden until the calendar
   choreography reaches it (js/calendar.js). */
.block { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.block__kicker {
  color: var(--c-brown-mid);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  font-weight: 700;   /* the PSD run is FauxBold */
}

.block__date {
  color: var(--c-brown-deep);
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.block__date sup {
  font-size: 0.52em;
  vertical-align: baseline;
  top: -0.42em;
  position: relative;
}

.block__quote { color: var(--c-brown-mid); }

/* Venue, directly under the date. Same Cormorant run as the date but smaller
   and in the lighter brown, so the date stays the loudest thing in the block. */
.block__venue {
  color: var(--c-brown-mid);
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}

/* Closing note, below the ornament. Tracked small caps in the sans stand-in,
   matching the kicker's treatment at the other end of the block. */
.block__closing {
  color: var(--c-brown-mid);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  opacity: 0.9;
}

.block__ornament {
  position: absolute;
  left: 383px;
  top: 1659px;   /* PSD 3579 - 1920 */
  width: 314px;
  height: 60px;
}

/* The whole slide starts invisible; js/calendar.js clears these with GSAP the
   moment the section scrolls into view. Set here rather than inline so a
   no-JS reader still gets… nothing: the section is `hidden` without JS too. */
.cal__art, .cal__heart, .cal__day, .block [data-animate] { opacity: 0; }


/* ------------------------------------------------------------------ credit
 * Studio credit, below scene 4 rather than inside its 9:16 frame: the PSD's
 * own copy runs to y=1800 of 1920, which leaves ~48 CSS px on a phone — too
 * little for a 44px tap target clear of the iOS toolbar. Out here the link
 * gets real room, and the sand ground continues the slide so it does not
 * read as a detached strip.
 */
.credit {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--c-sand);
  padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
}

.credit__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* tap target */
  padding: 0 12px;
  color: var(--c-brown-mid);
  font-family: var(--font-sans);
  font-size: clamp(0.68rem, 2.6vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;             /* tracking is trailing-side; re-centre */
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.credit__link:hover,
.credit__link:focus-visible {
  color: var(--c-brown-deep);
  border-bottom-color: currentColor;
}

.credit__link:focus-visible {
  outline: 2px solid var(--c-brown-deep);
  outline-offset: 4px;
}