/* Camp KayTay. Ink and watercolour on paper. */

@font-face { font-family: 'Mr De Haviland'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/mr-de-haviland.woff2) format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english.woff2) format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english-italic.woff2) format('woff2'); }
@font-face { font-family: 'IM Fell English SC'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english-sc.woff2) format('woff2'); }

:root {
  --paper: #F6F1E7;
  --paper-deep: #E9E1D1;
  --ink: #22397F;
  --ink-hover: #2F5DA8;
  --sun: #F2C14E;
  --terracotta: #E8786A;
  --pool: #2F5DA8;
  --script: 'Mr De Haviland', cursive;
  --body: 'IM Fell English', Georgia, serif;
  --caps: 'IM Fell English SC', Georgia, serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

html, body { margin: 0; background: var(--paper-deep); color: var(--ink); }
p, h1, h2, ol { margin: 0; padding: 0; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-hover); }
img { display: block; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Page ---------- */

.landing {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: clamp(20px, 4vw, 48px) clamp(22px, 6vw, 72px);
  -webkit-tap-highlight-color: transparent;
}

.site-head {
  position: relative;
  font: 15px/1.2 var(--caps);
  letter-spacing: .08em;
}

.centre {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.5vh, 32px);
  text-align: center;
  padding: clamp(20px, 4vh, 48px) 0;
}

.status {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 440px;
  animation: kt-fade 1s 4.8s ease-out both;
}
.status p { text-wrap: pretty; font-style: italic; font-family: var(--body); line-height: 1.4; }
.line1 { font-size: clamp(16px, 1.9vw, 19px); }
.line2 { font-size: clamp(14px, 1.6vw, 16px); }
.psst { margin-top: 6px; font: clamp(28px, 3.2vw, 36px)/1 var(--script); filter: url(#ink); }

/* ---------- Page motifs ---------- */

.m { position: absolute; }
.m img, .flyer img { width: 100%; height: 100%; mix-blend-mode: multiply; }
.dodge { width: 100%; height: 100%; transition: transform .7s var(--spring); }
.m img, .card img { -webkit-user-drag: none; user-select: none; }

.m-birds   { left: clamp(10px, 6vw, 90px);  top: clamp(70px, 12vh, 130px); width: clamp(54px, 8vw, 96px);  aspect-ratio: 1; animation: kt-hover 5s ease-in-out infinite; }
.m-turret  { right: clamp(8px, 5vw, 80px);  top: clamp(20px, 5vh, 56px);   width: clamp(96px, 15vw, 190px); aspect-ratio: 1; }
.m-cypress { left: clamp(-10px, 4vw, 80px); bottom: clamp(40px, 10vh, 120px); width: clamp(80px, 12vw, 160px); aspect-ratio: 1; transform-origin: 50% 100%; animation: kt-breeze 6s ease-in-out infinite; }
.m-parasol { right: clamp(8px, 6vw, 100px); bottom: clamp(56px, 12vh, 140px); width: clamp(90px, 13vw, 170px); aspect-ratio: 1; transform-origin: 50% 95%; animation: kt-sway 4.5s ease-in-out infinite; }
.m-ring    { right: clamp(90px, 19vw, 280px); bottom: clamp(30px, 6vh, 80px); width: clamp(48px, 6vw, 80px); aspect-ratio: 1; transform: rotate(-10deg); animation: kt-bob 3.2s ease-in-out infinite; }

/* On phones the card fills the width and the page motifs would sit on the
   status text, so only the turret stays (peeking over the card). */
@media (max-width: 600px) {
  .m-birds, .m-ring, .m-cypress, .m-parasol { display: none; }
}

.flyer {
  position: absolute;
  left: 0; top: 0;
  width: clamp(56px, 7vw, 90px);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
}

.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: .5;
}
.grain rect { filter: url(#grain); }

/* ---------- The invitation ---------- */

.card-wrap {
  position: relative;
  width: max(240px, min(420px, 88vw, calc((100vh - 240px) * .714)));
  width: max(240px, min(420px, 88vw, calc((100svh - 240px) * .714)));
  aspect-ratio: 5 / 7;
  perspective: 1600px;
  container-type: inline-size;
  animation: kt-deal 1s cubic-bezier(.2, .8, .2, 1) both;
}

.card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.card:focus-visible .face { outline: 2px dashed var(--ink); outline-offset: 6px; }

.face {
  position: absolute;
  inset: 0;
  background: var(--paper);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 1px 1px rgba(60, 45, 20, .12), 0 22px 40px -20px rgba(60, 45, 20, .5);
}
.back { transform: rotateY(180deg); visibility: hidden; }

/* Front */
.title-wash { position: absolute; left: 11cqw; top: 39.5cqw; width: 85.7cqw; height: 47.6cqw; mix-blend-mode: multiply; overflow: visible; }
.title-wash g { transform-box: fill-box; transform-origin: center; animation: kt-bloom 1.6s .5s cubic-bezier(.2, .7, .2, 1) both; }
.title-wash ellipse { fill: var(--sun); filter: url(#wash); }

.cm { position: absolute; mix-blend-mode: multiply; }
.cm-birds   { left: 48.6cqw; top: 9.5cqw; width: 14.8cqw; height: 14.8cqw; }
.cm-turret  { right: 5.2cqw; top: 4.8cqw; width: 29cqw; height: 29cqw; }
.cm-parasol { right: 5.2cqw; bottom: 20cqw; width: 24.8cqw; height: 24.8cqw; }
.cm-ring    { right: 28.1cqw; bottom: 17.6cqw; width: 13.3cqw; height: 13.3cqw; transform: rotate(-10deg); }

.our-room {
  position: absolute; right: 9.5cqw; top: 34.3cqw;
  display: flex; flex-direction: column; align-items: center; gap: .5cqw;
  animation: kt-fade .8s 4.4s ease-out both;
}
.our-room svg { width: 3.8cqw; height: 3.3cqw; overflow: visible; }
.our-room path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.our-room span { font: italic 3.1cqw/1.1 var(--body); }

.front-body {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding: 10.5cqw 10.5cqw 8.6cqw;
  display: flex;
  flex-direction: column;
}
.kicker { font: italic 4.05cqw/1.35 var(--body); max-width: 38cqw; animation: kt-fade .9s .9s ease-out both; }
.title { margin-top: 15.7cqw; font-weight: 400; filter: url(#ink); }
.camp { display: block; font: 16.7cqw/.8 var(--script); animation: kt-write 1s 1.2s ease-in-out both; }
.kaytay { display: block; font: 30.5cqw/.95 var(--script); margin-left: 8.1cqw; animation: kt-write 1.5s 2s ease-in-out both; }
.date { font: 11.9cqw/1 var(--script); margin-top: 5.2cqw; filter: url(#ink); animation: kt-write 1.1s 3.4s ease-in-out both; }
.venue { font: 5.2cqw/1.2 var(--caps); letter-spacing: .04em; margin-top: 4.8cqw; animation: kt-fade .8s 4.2s ease-out both; }
.place { font: italic 4.3cqw/1.3 var(--body); animation: kt-fade .8s 4.3s ease-out both; }
.front-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 3.8cqw;
  font: italic 3.6cqw/1.35 var(--body);
  animation: kt-fade .8s 4.5s ease-out both;
}
.no-vows { max-width: 45cqw; }
.reply { white-space: nowrap; }

/* Back: Le programme */
.back-body {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding: 9.5cqw 9.5cqw 8.1cqw;
  display: flex;
  flex-direction: column;
}
.prog-title { font: 400 15.2cqw/1 var(--script); filter: url(#ink); }
.prog-sub { font: italic 3.8cqw/1.3 var(--body); margin-top: 1cqw; }
.days { list-style: none; display: flex; flex-direction: column; gap: 3.3cqw; margin-top: 5.2cqw; }
.days li { display: flex; gap: 3.8cqw; align-items: center; }
.days img { width: 16.2cqw; height: 16.2cqw; flex: none; }
.days li > div { display: flex; flex-direction: column; gap: 1cqw; }
.day { font: 3.33cqw/1 var(--caps); letter-spacing: .06em; }
.what { font: 4.05cqw/1.3 var(--body); }
.back-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2.9cqw;
  font: italic 3.33cqw/1.35 var(--body);
}
.back-foot span { max-width: 55cqw; }
.back-foot img { width: 13.3cqw; height: 13.3cqw; flex: none; }

/* ---------- Motion ---------- */

@keyframes kt-write { from { clip-path: inset(-20% 100% -20% -10%); } to { clip-path: inset(-20% -10% -20% -10%); } }
@keyframes kt-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kt-bloom { 0% { opacity: 0; transform: scale(.55); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes kt-deal { from { opacity: 0; transform: translateY(40px) rotate(-6deg); } to { opacity: 1; transform: rotate(-1deg); } }
@keyframes kt-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes kt-breeze { 0%, 100% { transform: skewX(-1.5deg); } 50% { transform: skewX(1.5deg); } }
@keyframes kt-bob { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-7px); } }
@keyframes kt-hover { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -5px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card-wrap { transform: rotate(-1deg); }
}