/* 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 this template was ported from). */
#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 inherited from geetansh-fiza (640x613 at frame
 * (220,239), since deleted) 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.
     Fitted to the raster: digit centres 78/158/240/321/403/482/564, baselines
     237.5/312/387/464.5/544. */
  --c0: 78;
  --cp: 81.1;
  --r0: 237.5;
  --rp: 76.6;
}

/* 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 the marked day. The old one was 52x45 round a single "5";
   "22" is two digits, so it is 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 "22" 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); }

/* Weekday + time, directly under the date (where the venue line used to be).
   Same Cormorant run as the date but smaller and in the lighter brown, so the
   date stays the loudest thing in the block. */
.block__time {
  color: var(--c-brown-mid);
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}

/* Venue, below the ornament -- only rendered when config block.venue is set
   (TODO(production): venue not supplied). Tracked small caps in the sans
   stand-in, matching the kicker's treatment at the other end of the block. */
.block__venue {
  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;
}