/* 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 (inherited from
   the geetansh-fiza PSDs). */
#calendar .scene__backdrop {
  background-image: url('../assets/slide3-pattern.webp?v=1');
  background-size: auto 100dvh;
  background-repeat: repeat-x;
}

/* ---------------------------------------------------------- calendar card
 * Live HTML, built by js/calendar.js from data/config.js. It replaces the
 * flattened December raster in geetansh-fiza (640x613 at frame (220,239)) and
 * copies its look: every number below was sampled out of that PNG --
 * card fill rgb(241,214,198), corner radius ~85px, ink rgb(99,46,10), the
 * month cap height (40px), the weekday cap height (15px), the old-style day
 * figures (17px x-height), the seven column centres and the five row
 * baselines. All coordinates are CARD-LOCAL design px.
 */
.cal {
  position: absolute;
  left: 220px;
  top: 239px;
  width: 640px;
  height: 613px;
  z-index: 1;
  background: #f1d6c6;
  border-radius: 85px;
  color: var(--c-brown-deep);
  /* Grid geometry: column centre = c0 + col * cp; row baseline = r0 + row * rp.
     Columns fitted to the raster: digit centres 78/158/240/321/403/482/564.
     January 2027 needs SIX rows (it starts on a Friday), so the raster's 76.6
     row pitch is tightened to end on its last baseline, 545. */
  --c0: 78;
  --cp: 81.1;
  --r0: 237.5;
  --rp: 61.5;
}

/* One line of calendar text, placed by its BASELINE like `.t` (css/base.css),
   but in a 140px box centred on --x so 31 cells do not each carry a 1080px
   layout box. */
.cal__t {
  position: absolute;
  width: 140px;
  left: calc(var(--x) * 1px - 70px);
  top: calc((var(--y) - var(--fs) * var(--bl-serif)) * 1px);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: calc(var(--fs) * 1px);
  line-height: 0;
  text-align: center;
  white-space: nowrap;
}

.cal__month {
  --x: 320; --y: 96; --fs: 62;
  width: 600px;
  left: 20px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-indent: 0.01em;   /* tracking is trailing-side; re-centre */
}

.cal__wd   { --fs: 23; --y: 174; letter-spacing: 0.02em; text-indent: 0.02em; }
.cal__num  { --fs: 41; }
.cal__wd, .cal__num, .cal__heart, .cal__day {
  --x: calc(var(--c0) + var(--col) * var(--cp));
}
.cal__num, .cal__heart, .cal__day {
  --y: calc(var(--r0) + var(--row) * var(--rp));
}
/* The raster's figures are Cormorant's own old-style digits (no `case`). */
.cal__num { font-feature-settings: normal; }

/* The heart over a marked day. The raster's was 52x45 round a single "5"; two
   digits need the same art at 1.42x. Centred on the cell column, a few px above
   the row baseline so it fully covers the brown old-style figures underneath. */
.cal__heart {
  position: absolute;
  width: 74px;
  height: 64px;
  left: calc(var(--x) * 1px - 37px);
  top: calc((var(--y) - 6) * 1px - 32px);
  z-index: 2;
  transform-origin: 50% 50%;
}

/* The white day on the heart: lining figures (`case`), as the old "5" was. */
.cal__day {
  --fs: 38;
  top: calc((var(--y) + 3 - var(--fs) * var(--bl-serif)) * 1px);
  z-index: 3;
  color: #fff;
  font-feature-settings: 'case' 1;
}

/* 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, .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;
}