/* hol-hero.css — photographic home hero (ph- classes).
   The editor's big photos run edge to edge behind a short serif headline (two or more cross-fade
   slowly with a gentle zoom; hol-site.js), with soft bokeh lights and sparse snow. A paper ticket
   overlaps the photo's bottom edge with the dates and a plain-numeral countdown. */

:root { --ph-overhang: 64px; }

.ph {
  position: relative; isolation: isolate; overflow: visible; z-index: 1; /* above the next section, so the ticket's overhang shows */
  display: flex; flex-direction: column;
  min-height: min(92svh, 880px);
  padding: calc(var(--header-h) + clamp(48px, 9vw, 110px)) 0 0;
  background: var(--night) var(--grain);
  color: var(--on-dark);
}
.ph-no-photo { background: radial-gradient(90% 70% at 50% 0%, var(--pine-3), var(--night) 72%); }

/* Photos: stacked slides; the one with .is-on is visible and slowly zooms. */
.ph-photos { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.ph-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.ph-slide.is-on { opacity: 1; }
.ph-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; transform: scale(1.02); }
.ph-slides .ph-slide.is-on img { transform: scale(1.09); transition: transform 11s linear; }
/* darker at the top for the header, clear in the middle for the photo, dark again under the copy */
.ph-photos::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 31, 25, .62) 0%, rgba(14, 31, 25, .16) 26%, rgba(14, 31, 25, .08) 46%, rgba(14, 31, 25, .72) 76%, rgba(14, 31, 25, .96) 100%);
}

/* Bokeh: soft out-of-focus lights, each one twinkling on its own slow clock (opacity only). */
.ph-bokeh { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.ph-bokeh i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 221, 150, .55) 0%, rgba(255, 221, 150, .18) 45%, transparent 70%);
  filter: blur(5px); opacity: .5;
  animation: ph-tw 7s ease-in-out infinite alternate;
}
.ph-bokeh i:nth-child(1)  { width: 90px;  height: 90px;  left: 6%;  top: 18%; animation-duration: 6.2s; }
.ph-bokeh i:nth-child(2)  { width: 54px;  height: 54px;  left: 18%; top: 62%; animation-duration: 8.1s; animation-delay: -2s; }
.ph-bokeh i:nth-child(3)  { width: 120px; height: 120px; left: 30%; top: 8%;  animation-duration: 9.4s; animation-delay: -4s; }
.ph-bokeh i:nth-child(4)  { width: 40px;  height: 40px;  left: 44%; top: 40%; animation-duration: 5.6s; animation-delay: -1s; }
.ph-bokeh i:nth-child(5)  { width: 76px;  height: 76px;  left: 58%; top: 14%; animation-duration: 7.7s; animation-delay: -3s; }
.ph-bokeh i:nth-child(6)  { width: 110px; height: 110px; left: 70%; top: 52%; animation-duration: 10s;  animation-delay: -5s; }
.ph-bokeh i:nth-child(7)  { width: 46px;  height: 46px;  left: 82%; top: 24%; animation-duration: 6.8s; animation-delay: -2.5s; }
.ph-bokeh i:nth-child(8)  { width: 64px;  height: 64px;  left: 90%; top: 66%; animation-duration: 8.6s; animation-delay: -6s; }
.ph-bokeh i:nth-child(9)  { width: 34px;  height: 34px;  left: 52%; top: 72%; animation-duration: 7.2s; animation-delay: -3.5s; }
.ph-bokeh i:nth-child(10) { width: 96px;  height: 96px;  left: 12%; top: 84%; animation-duration: 9s;   animation-delay: -1.5s; }
@keyframes ph-tw { from { opacity: .22; } to { opacity: .7; } }

.ph .snow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
[data-snow].is-offscreen *, [data-snow].is-offscreen *::before, [data-snow].is-offscreen *::after { animation-play-state: paused; }

/* The current photo's caption, small handwriting in the corner under the header. */
.ph-chip {
  position: absolute; z-index: 1; right: var(--g); top: calc(var(--header-h) + 10px);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(14, 31, 25, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 17px/1 var(--hand); color: var(--gold-2); white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .6s;
}
.ph-chip:empty { opacity: 0; }

.ph-inner { position: relative; z-index: 1; margin-top: auto; padding-bottom: clamp(30px, 4.5vw, 52px); }
.ph-copy { max-width: 760px; }
.ph-copy .eyebrow { color: var(--gold-2); margin-bottom: 14px; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.ph-copy .eyebrow::before, .ph-copy .eyebrow::after { content: "✦"; color: var(--gold); font-size: .85em; margin: 0 10px; }
.ph-copy .eyebrow::before { margin-left: 0; }
.ph h1 {
  font-size: clamp(44px, 10.5vw, 96px); line-height: .95; letter-spacing: -.018em; margin: 0;
  color: var(--on-dark); text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
}
.ph h1 .script { display: block; color: var(--gold-2); font-size: .98em; margin-top: .03em; }
.ph-text { color: var(--on-dark-2); font-size: clamp(16px, 1.5vw, 19px); max-width: 50ch; margin: 18px 0 0; }
.ph-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 20px 0 0;
  font: 600 15px/1.4 var(--sans); letter-spacing: .01em; color: rgba(247, 240, 227, .92);
}
.ph-line i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.ph-actions { margin-top: 26px; }

/* The ticket: paper card straddling the photo's bottom edge */
.ph-ticket-wrap { position: relative; z-index: 2; margin-bottom: calc(var(--ph-overhang) * -1); }
.ph-ticket {
  background: var(--paper) var(--grain); color: var(--ink);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3.4vw, 38px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 36px; align-items: center;
}
.ph-ticket .eyebrow { color: var(--berry); }
.ph-ticket h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 8px 0 0; color: var(--pine); }
.ph-ticket p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.ph-ticket .rich { margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.ph-ticket .live { margin-bottom: 2px; }
.ph-ticket .actions { justify-self: end; }

/* Countdown digits on small paper tiles, like a split-flap clock at rest */
.ph-cd { display: flex; gap: clamp(10px, 1.6vw, 18px); font-variant-numeric: tabular-nums; }
.ph-cd div {
  position: relative; text-align: center; min-width: 64px; padding: 10px 8px 9px;
  background: var(--cream-2); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(30, 33, 29, .08);
}
.ph-cd div::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: rgba(30, 33, 29, .07); }
.ph-cd b { display: block; position: relative; font: 600 clamp(30px, 3.4vw, 44px)/1 var(--display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--pine); }
.ph-cd span { display: block; position: relative; margin-top: 7px; font: 700 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* whatever section comes next makes room for the ticket's overhang */
.ph + .section { padding-top: calc(var(--ph-overhang) + clamp(44px, 5.5vw, 76px)); }

@media (max-width: 760px) {
  :root { --ph-overhang: 44px; }
  .ph { min-height: min(88svh, 800px); }
  /* On a phone the sign sits in the upper third and the copy gets a deeper shade under it. */
  .ph-slide img { object-position: 50% 18%; }
  .ph-photos::after { background: linear-gradient(180deg, rgba(14, 31, 25, .58) 0%, rgba(14, 31, 25, .12) 22%, rgba(14, 31, 25, .18) 40%, rgba(14, 31, 25, .8) 62%, rgba(14, 31, 25, .97) 100%); }
  .ph-chip { font-size: 15px; top: calc(var(--header-h) + 4px); }
  .ph-bokeh i { transform: scale(.7); }
  .ph-ticket { grid-template-columns: 1fr; gap: 16px; }
  .ph-ticket .actions { justify-self: start; }
  .ph-cd { justify-content: space-between; gap: 8px; }
  .ph-cd div { flex: 1; min-width: 0; padding: 10px 4px 8px; }
  .ph-cd b { font-size: clamp(26px, 8vw, 34px); }
}
@media (max-width: 480px) {
  .ph-actions .btn { flex: 1 1 auto; }
  .ph-line { font-size: 14px; }
  .ph-copy .eyebrow::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-slide, .ph-slide img, .ph-slides .ph-slide.is-on img { transition: none; transform: none; }
  .ph-bokeh i { animation: none; opacity: .4; }
}