/* Issy & Billy — wedding site
   Tokens from the issy-billy-wedding design system. */

@font-face {
  font-family: 'Moulin';
  src: url('../assets/fonts/Moulin-Regular-Trial.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Commons';
  src: url('../assets/fonts/TT-Commons-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-black: rgb(0, 0, 0);
  --color-white: rgb(255, 255, 255);
  --color-confetti-yellow: rgb(255, 210, 75);
  --color-confetti-green: rgb(30, 171, 84);

  --font-display: 'Moulin', Georgia, serif;
  --font-body: 'TT Commons', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

body {
  margin: 0;
  background: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-black);
}

a { color: var(--color-black); text-decoration: none; }
a:hover { color: var(--color-confetti-green); }

.type-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 12.5vw, 100px);
  line-height: 1;
}
.type-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
}
.type-body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
}

/* ---- page scaffold ---------------------------------------------------- */

.page {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* hero title sits behind the confetti layer */
.layer-title {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* load sequence: white page, then the text fades in */
.layer-title,
.layer-content,
.footer {
  opacity: 0;
  animation: fade-in 0.9s ease 0.25s forwards;
}
@keyframes fade-in {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .layer-title,
  .layer-content,
  .footer { opacity: 1; animation: none; }
}

/* confetti canvas: one canvas anchored to the whole page, scrolls with it,
   sits above the title and footer message but below the rest of the copy */
#flip-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* ---- footer: confetti pile hiding the sign-off message ------------------ */

/* z-index 1 keeps the message under the canvas, like the hero title */
.footer {
  position: relative;
  z-index: 1;
  height: 740px;
}
.footer-message {
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 18px;
}
/* small photo tucked behind the confetti pile, just above the sign-off */
.footer-photo {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, calc(-100% - 36px));
  width: 200px;
  height: auto;
  border-radius: 4px;
}

/* all copy sits above the confetti; only links take the pointer.
   In flow (not absolute) so the tail section drives the page height:
   the fixed-position blocks hang from padding-top, the tail flows after it. */
.layer-content {
  position: relative;
  z-index: 3;
  padding-top: 3830px;
  pointer-events: none;
}
.layer-content a { pointer-events: auto; }

/* ---- positioned copy --------------------------------------------------- */

.block {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  white-space: pre-line;
}

h1.type-display { top: 238px; margin: 0; }
.s-date      { top: 400px; }
.s-venue     { top: 540px; }
.s-intro     { top: 900px; }
.s-nextday   { top: 2460px; }
.s-nextday-address { top: 2535px; }
.h-dresscode { top: 2780px; }
.s-dresscode { top: 2850px; }
.h-rsvp      { top: 3060px; }
.s-rsvp      { top: 3130px; }
.h-gifting   { top: 3420px; }
.s-gifting   { top: 3490px; }
.s-weddinglist {
  top: 3600px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}
/* tail: Useful Info + accordions + confetti pile flow together, so opening
   an accordion pushes the pile down instead of leaving a fixed gap */
.tail .block { position: static; }

/* ---- useful info accordions --------------------------------------------- */

:root { interpolate-size: allow-keywords; }

.accordions {
  width: 560px;
  margin: 50px auto 0;
  pointer-events: auto;
}

.acc summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  padding: 16px 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--color-confetti-green); }

.acc-body {
  text-align: center;
  white-space: pre-line;
  padding: 14px 0 30px;
}

/* animated open/collapse where supported; instant elsewhere */
.acc::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.acc[open]::details-content { block-size: auto; }

/* ---- schedule: staggered yellow dots ------------------------------------ */

/* horizontal scatter in "spread units": 10px at full width, shrinking
   linearly below ~980px viewport so the outermost dots and their labels
   never get clipped at the page edges */
.schedule-dots {
  --su: min(10px, calc((50vw - 190px) / 30));
}

.schedule-dots .dot {
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  /* matches the confetti pieces: same compensated yellow at the same 80%
     alpha (on the background only, so the time labels stay solid black) */
  background: rgba(255, 199, 30, 0.8);
}
.schedule-dots .dot .type-body {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  text-align: center;
  font-size: 22px;
  white-space: pre-line;
}

/* ---- mobile ------------------------------------------------------------- */

@media (max-width: 700px) {
  .type-heading { font-size: 26px; }
  .type-body { font-size: 17px; }

  /* the page becomes a flowing column instead of a fixed-height canvas */
  .page { height: auto; }
  /* the `.block { position: static }` rule below would otherwise pin the
     title to the page top; keep it absolute, centered in the first viewport */
  h1.type-display {
    position: absolute;
    top: 50vh;
    top: 50svh;
    transform: translateY(-50%);
  }

  .layer-content {
    position: relative;
    inset: auto;
    z-index: 3;
    padding: calc(50vh + 90px) 24px 90px;
    padding-top: calc(50svh + 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .block { position: static; }
  .tail { display: contents; } /* children join the flex column directly */

  .s-venue { margin-top: 28px; }
  /* enough margin that the intro lands past the first viewport */
  .s-intro {
    margin-top: calc(50vh - 180px);
    margin-top: max(90px, calc(50svh - 180px));
    max-width: 320px;
  }
  .s-nextday { margin-top: 70px; max-width: 340px; }
  .s-nextday-address { margin-top: 16px; }
  .h-dresscode, .h-rsvp, .h-gifting, .h-info { margin-top: 95px; }
  .s-dresscode, .s-rsvp, .s-gifting { margin-top: 20px; }
  .s-weddinglist { margin-top: 20px; }

  /* schedule dots stack in flow with a gentle left/right stagger */
  .schedule-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    margin: 70px 0 0;
  }
  .schedule-dots .dot {
    position: relative;
    left: 0 !important;
    top: 0 !important;
    width: 72px;
    height: 72px;
    flex: none;
  }
  .schedule-dots .dot .type-body { font-size: 15px; width: 130px; }
  .schedule-dots .dot:nth-child(odd) { transform: translateX(-56px); }
  .schedule-dots .dot:nth-child(even) { transform: translateX(56px); }
  .schedule-dots .dot:nth-child(3n) { transform: translateX(20px); }

  .accordions {
    position: static;
    width: 100%;
    max-width: 560px;
    margin: 20px auto 0;
  }

  .footer { height: 580px; }
  .footer-message {
    max-width: 240px;
    margin: 0 auto;
    font-size: 14px;
  }
  .footer-photo { width: 160px; }
}