/* Harrogate Dance Centre — index-specific styles (Colour Supplement) */

/* hero band refinements */
.hero .d1 { max-width: 16ch; margin: 0 auto; }
.hero__sub {
  display: block;
  font-size: 0.42em;
  margin-top: 14px;
  letter-spacing: 0.02em;
  color: #fff;
  box-shadow: inset 0 -0.34em 0 rgba(23, 92, 76, 0.55);
  width: fit-content;
  margin-inline: auto;
  padding: 0 6px;
}
.hero__kicker { margin-bottom: 22px; }
.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* H1 block sits on a translucent black panel over the photo */
.hero::before { background: linear-gradient(180deg, rgba(10,10,10,0.28), rgba(10,10,10,0.08) 45%, rgba(10,10,10,0.3)); }
.hero__panel {
  background: rgba(8, 8, 8, 0.62);
  padding: 42px 48px 40px;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .hero__panel { padding: 28px 20px 26px; }
}

/* ---- Paparazzi opening (one-off on load; transforms/opacity only) ---- */
/* camera flashes: a white layer blinks twice, then is gone for good */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flashPop 1.1s linear 1 both;
}
@keyframes flashPop {
  0%, 26% { opacity: 0; }
  28% { opacity: 0.95; }   /* first flash */
  33% { opacity: 0; }
  49% { opacity: 0; }
  51% { opacity: 0.8; }    /* second, shorter flash */
  54% { opacity: 0; }
  60% { opacity: 0.35; }   /* faint after-blink */
  63%, 100% { opacity: 0; }
}
/* the photo takes the exposure: tiny brightness kicks with each flash */
.hero > img { animation: exposure 1.1s linear 1 both; }
@keyframes exposure {
  0%, 26% { filter: brightness(0.92); }
  30% { filter: brightness(1.25); }
  40% { filter: brightness(0.96); }
  52% { filter: brightness(1.18); }
  100% { filter: brightness(1); }
}
/* the panel develops after the flashes */
.hero__panel { animation: panelUp .5s cubic-bezier(.2,.7,.2,1) .75s both; }
@keyframes panelUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* its contents stamp in, one after another */
.hero__kicker { animation: stampIn .3s cubic-bezier(.2,.8,.25,1) .95s both; }
.hero .d1 { animation: stampIn .34s cubic-bezier(.2,.8,.25,1) 1.1s both; }
.hero .band__deck { animation: stampIn .3s cubic-bezier(.2,.8,.25,1) 1.3s both; }
.hero .hero__cta { animation: stampIn .3s cubic-bezier(.2,.8,.25,1) 1.45s both; }
@keyframes stampIn {
  from { opacity: 0; transform: scale(1.09); }
  60% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero > img, .hero__panel,
  .hero__kicker, .hero .d1, .hero .band__deck, .hero .hero__cta { animation: none; }
}

/* intro statement */
.intro-note { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; color: var(--green); }

/* prices split */
.pricesplit { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; }
.pricesplit .form-card { margin-top: 8px; }

/* steps */
.steps { counter-reset: step; border-top: 1.5px solid var(--ink); }
.steps > div {
  counter-increment: step;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 20px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.steps > div::before {
  content: 'Nº ' counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-size: 20px;
  color: var(--green);
}
.steps .t { font-weight: 700; font-size: 15.5px; }
.steps .t small { display: block; font-weight: 450; font-size: 13px; color: rgba(17,17,17,0.7); margin-top: 4px; max-width: 58ch; }

/* mid-band text panel (same treatment as the hero's) */
.band__panel {
  background: rgba(8, 8, 8, 0.62);
  padding: 36px 42px 34px;
  max-width: 680px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .band__panel { padding: 24px 18px 22px; }
}

/* wedding strip */
.wedstrip {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--ink);
  padding: 30px;
}
.wedstrip img { border: 1.5px solid var(--ink); aspect-ratio: 1/1; object-fit: cover; }

/* area / about split */
.areasplit { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.areasplit .story__ph { max-width: 520px; }

/* mobile */
@media (max-width: 900px) {
  .pricesplit, .areasplit { grid-template-columns: 1fr; }
  .wedstrip { grid-template-columns: 1fr; padding: 20px; }
  .steps > div { grid-template-columns: 58px 1fr; }
}