/* ------------------------------------------------------------
   Lentefeest Oscar — climbing & growth
   palette: warm rock, fresh spring green, bright yellow (his shirt)
------------------------------------------------------------ */

:root{
  --rock-1:#f7f3ed;
  --rock-2:#ece4d6;
  --rock-3:#c9b89a;
  --rock-4:#7a6850;
  --ink:#2a221b;
  --ink-soft:#5a4f42;

  --leaf:#7cc05a;
  --leaf-deep:#3f7a3a;
  --moss:#2d5a3a;

  --hold-yellow:#f3c43a;   /* oscar's t-shirt */
  --hold-orange:#e07a3a;
  --hold-red:#c44a3a;
  --hold-blue:#3a7ec0;
  --hold-green:#5aa84a;
  --hold-grey:#9aa0a6;

  --shadow-1: 0 6px 20px rgba(40,30,15,.12);
  --shadow-2: 0 18px 50px rgba(40,30,15,.22);

  --maxw: 1400px;
}

@media (min-width: 1600px){ :root{ --maxw: 1600px } }
@media (min-width: 1900px){ :root{ --maxw: 1760px } }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color:var(--ink);
  background:var(--rock-1);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* climbing-hold dots scattered top to bottom — the "route" up the page */
.route{position:fixed;inset:0;pointer-events:none;z-index:0}
.hold{
  position:absolute;
  width:62px;height:60px;border-radius:50% 60% 55% 45%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.28));
  opacity:.9;
}
.hold::after{
  content:"";position:absolute;inset:35% 35% auto auto;
  width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.4);
}
.h1{top:8vh;  left:4vw;  background:var(--hold-yellow); transform:rotate(15deg);  width:72px;height:60px}
.h2{top:22vh; right:6vw; background:var(--hold-blue);   transform:rotate(-25deg); width:84px;height:54px;border-radius:60% 40% 50% 50%}
.h3{top:38vh; left:9vw;  background:var(--hold-green);  transform:rotate(40deg);  width:54px;height:54px}
.h4{top:55vh; right:4vw; background:var(--hold-red);    transform:rotate(10deg);  width:90px;height:64px;border-radius:55% 45% 60% 40%}
.h5{top:72vh; left:3vw;  background:var(--hold-orange); transform:rotate(-15deg); width:72px;height:58px}
.h6{top:88vh; right:10vw;background:var(--hold-grey);   transform:rotate(30deg);  width:60px;height:60px}
.h7{top:140vh;left:6vw;  background:var(--hold-yellow); transform:rotate(-30deg); width:78px;height:56px}
.h8{top:170vh;right:5vw; background:var(--hold-green);  transform:rotate(20deg);  width:66px;height:62px}
.h9{top:210vh;left:12vw; background:var(--hold-blue);   transform:rotate(-10deg); width:56px;height:56px}

/* ------------------------ HERO ------------------------ */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex; align-items:flex-start;
  overflow:hidden;
  isolation:isolate;
}
.hero__img{
  position:absolute; inset:0;
  background-size:cover; background-position:center 40%;
  filter:saturate(1.05) contrast(1.02);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(247,243,237,0) 88%, rgba(247,243,237,.6) 100%);
}
.hero__content{
  position:relative; z-index:2;
  padding: 60px 24px 0;
  margin: 0 auto; max-width:var(--maxw);
  width:100%;
  text-align:right;
  display:flex; flex-direction:column; align-items:flex-end;
}
.eyebrow{
  display:inline-block;
  padding:.4em .9em;
  background:var(--hold-yellow);
  color:var(--ink);
  font-weight:700; font-size:.95rem;
  letter-spacing:.02em;
  border-radius:999px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.85), var(--shadow-1);
  transform: rotate(-1.5deg);
  margin-bottom: 18px;
}
.hero h1{
  font-size: clamp(3rem, 9vw, 7rem);
  line-height:.95;
  margin:0 0 .5em;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--ink);
  /* white halo + soft drop for legibility against the photo */
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.hero h1 .name{
  display:inline-block;
  color: #1f4a25;
  font-style:italic;
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
}
.cta{
  display:inline-block;
  background:var(--ink);
  color:var(--rock-1);
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:hover{transform:translateY(-2px); box-shadow: var(--shadow-2)}

/* ------------------------ INTRO ------------------------ */
.intro{
  position:relative; z-index:1;
  padding: 90px 0 40px;
}
.intro .wrap{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 60px;
  align-items:center;
}
.intro__text h2{
  font-size: 2rem;
  margin: 0 0 .6em;
  color:var(--moss);
}
.intro__text .lead{
  font-size:1.25rem;
  color:var(--ink);
}
.intro__text p{margin: 0 0 1em}
.intro__text em{
  font-style:normal;
  background: linear-gradient(transparent 60%, var(--hold-yellow) 60%);
  padding: 0 .15em;
}
.intro__photo{
  margin:0;
  position:relative;
  --tilt: 2deg;
  transform: rotate(var(--tilt));
  perspective: 900px;
  transform-style: preserve-3d;
}
.intro__photo img{
  border-radius: 18px;
  box-shadow: var(--shadow-2);
  aspect-ratio: 3/4;
  object-fit:cover;
  overflow:hidden;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  will-change: transform;
}
.intro__photo:hover,
.intro__photo.is-inview{ animation: shake3d 0.7s ease both }
.intro__photo:hover img,
.intro__photo.is-inview img{
  transform: scale(1.06);
  box-shadow: 0 28px 60px rgba(40,30,15,.32);
}
.intro__photo figcaption{
  position:absolute;
  left: -10px; bottom: -22px;
  background:var(--ink); color:var(--rock-1);
  padding: 8px 14px; border-radius: 999px;
  font-size:.95rem; font-weight:700;
  transform: rotate(-3deg);
  box-shadow: var(--shadow-1);
}

/* ------------------------ INVITATION CARD ------------------------ */
.invite{
  position:relative; z-index:1;
  padding: 80px 0;
}
.invite__card{
  background: linear-gradient(180deg, #fff, var(--rock-1));
  border-radius: 28px;
  padding: 56px clamp(28px, 6vw, 72px);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--rock-2);
  position:relative;
  overflow:hidden;
}
.invite__card::before{
  /* a chunky climbing hold pinned in the corner */
  content:"";
  position:absolute; right:-30px; top:-30px;
  width:140px; height:120px;
  background:var(--hold-yellow);
  border-radius: 50% 60% 55% 65%;
  box-shadow: inset -10px -10px 25px rgba(0,0,0,.15);
  transform: rotate(20deg);
}
.invite__card::after{
  content:"";
  position:absolute; right:30px; top:60px;
  width:14px;height:14px;border-radius:50%;
  background:rgba(0,0,0,.35);
}
.invite__head{position:relative}
.badge{
  display:inline-block;
  background:var(--moss); color:var(--rock-1);
  padding:.35em .9em; border-radius:999px;
  font-size:.85rem; font-weight:700; letter-spacing:.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.invite__head h2{
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height:1.05; margin:0 0 36px;
  color:var(--ink);
  font-weight:900;
  letter-spacing:-.01em;
  max-width: 16ch;
}

.meta{
  list-style:none; padding:0; margin: 0 0 36px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 2px dashed var(--rock-3);
  border-bottom: 2px dashed var(--rock-3);
  padding: 24px 0;
}
.meta li{display:flex; flex-direction:column; gap:6px}
.meta__k{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-soft); font-weight:700;
}
.meta__v{font-size:1.1rem; font-weight:700; color:var(--ink)}

.gift{
  background: var(--rock-2);
  border-radius: 18px;
  padding: 22px 26px;
  position:relative;
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--rock-2), var(--rock-2)),
    repeating-linear-gradient(135deg, var(--leaf) 0 8px, transparent 8px 16px);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.gift h3{
  margin: 0 0 .35em;
  font-size:1.15rem;
  color:var(--moss);
}
.gift__icon{
  display:inline-block;
  width:1.6em;height:1.6em; line-height:1.6em; text-align:center;
  background:var(--leaf); color:#fff; border-radius:50%;
  font-weight:900; margin-right:.4em;
}
.gift p{margin:0; font-size:1.05rem}

.signoff{
  margin: 32px 0 0;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.sig{
  display:inline-block;
  font-size: 1.6rem;
  font-weight: 900;
  font-style: italic;
  color:var(--ink);
  margin-top: 6px;
}

/* ------------------------ ROUTE / STEPS ------------------------ */
.route-section{
  position:relative; z-index:1;
  padding: 80px 0 100px;
  background: transparent;
}
.section-title{
  font-size: clamp(2rem, 4.5vw, 3rem);
  text-align:center;
  margin: 0 0 .2em;
  color:var(--moss);
  font-weight:900;
}
.section-sub{
  text-align:center;
  color:var(--ink-soft);
  margin: 0 0 60px;
  font-size:1.1rem;
}

.steps{
  list-style:none; margin:0; padding:0;
  position:relative;
}
/* the climbing rope down the middle */
.steps::before{
  content:"";
  position:absolute;
  left:50%; top:30px; bottom:30px;
  width:4px;
  background: repeating-linear-gradient(
    180deg,
    var(--rock-4) 0 14px,
    var(--rock-3) 14px 28px
  );
  border-radius:4px;
  transform: translateX(-50%);
  z-index:0;
}
.step{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) 160px minmax(0, 1fr);
  align-items:center;
  gap: clamp(60px, 6vw, 120px);
  padding: clamp(40px, 6vw, 80px) 0;
  z-index:1;
}
.step__num{
  grid-column: 2;
  justify-self:center;
  width:64px; height:64px;
  background: var(--hold-yellow);
  border-radius:50% 60% 55% 45%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.6rem; color:var(--ink);
  box-shadow: var(--shadow-1), inset -6px -6px 14px rgba(0,0,0,.15);
  z-index:3;
  position:relative;
}
.step:nth-child(2) .step__num{background:var(--hold-blue); color:#fff}
.step:nth-child(3) .step__num{background:var(--hold-red); color:#fff}
.step:nth-child(4) .step__num{background:var(--hold-green); color:#fff}
.step:nth-child(5) .step__num{background:var(--hold-orange); color:#fff}

.step__media{
  perspective: 900px;
  transform-style: preserve-3d;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadow-2);
}
.step__media img{
  width:100%; aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 16px;
  display:block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  transform: scale(1);
  will-change: transform;
}

/* zoom-to-focus when image enters viewport (JS adds .is-inview), and on hover */
.step__media:hover,
.step__media.is-inview{ animation: shake3d 0.7s ease both }
.step__media:hover img,
.step__media.is-inview img{
  transform: scale(1.08);
  filter: saturate(1.05);
}
.step__body{padding: 0 16px}
.step__body h3{
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  margin: 0 0 .4em;
  color:var(--ink);
}
.step__body p{
  margin: 0;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  color:var(--ink-soft);
  max-width: 36ch;
  line-height:1.55;
}

/* alternate sides — explicit columns so num stays in middle */
.step--right .step__media{grid-column:1; --tilt:-1.5deg; transform:rotate(var(--tilt))}
.step--right .step__body {grid-column:3}
.step--left  .step__media{grid-column:3; --tilt:1.5deg; transform:rotate(var(--tilt))}
.step--left  .step__body {grid-column:1; text-align:right}
.step--left  .step__body p{margin-left:auto}

/* ------------------------ TIP ------------------------ */
.tip{
  position:relative; z-index:1;
  padding: 70px 0;
  background: var(--ink);
  color:var(--rock-1);
}
.tip__inner{
  display:flex; align-items:center; gap: 36px;
  flex-wrap:wrap;
}
.tip__avatar img{
  width: 140px; height:140px; border-radius:50%;
  object-fit:cover;
  border: 4px solid var(--hold-yellow);
  box-shadow: var(--shadow-2);
}
.tip__label{
  display:inline-block;
  background:var(--hold-yellow); color:var(--ink);
  padding:.25em .8em; border-radius:999px;
  font-size:.8rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom: 10px;
}
.tip h2{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 .3em;
  color: #fff;
  font-weight:900;
}
.tip p{
  margin:0; color: #cdc6bb;
  font-size: 1.05rem;
}

/* ------------------------ FOOT ------------------------ */
.foot{
  padding: 40px 24px 60px;
  text-align:center;
  color:var(--ink-soft);
  position:relative; z-index:1;
}
.foot p{margin:0 0 8px; font-size:.95rem}

/* growing tree: longer initial trunk, branches and leaves sprout in over ~3.5s */
.foot__tree{
  display:block;
  width: 180px;
  height: 220px;
  margin: 14px auto 0;
  overflow: visible;
}
.foot__tree .t-ground{
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}
.foot__tree .t-trunk{
  /* path length ~250 — animate as a stroke draw */
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}
.foot__tree .t-branch{
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.foot__tree .t-leaf{
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
/* per-leaf origin so each pops near its branch tip */
.foot__tree .l1,.foot__tree .l2{ transform-origin: 60px 152px }
.foot__tree .l3,.foot__tree .l4{ transform-origin: 144px 122px }
.foot__tree .l5,.foot__tree .l6{ transform-origin: 60px 84px }
.foot__tree .l7,.foot__tree .l8{ transform-origin: 142px 48px }
.foot__tree .l9{ transform-origin: 70px 28px }
.foot__tree .l10,.foot__tree .l11,.foot__tree .l12{ transform-origin: 100px 18px }

/* trigger: parent gets .is-growing when scrolled into view */
.foot__tree.is-growing .t-ground{
  animation: drawLine 0.6s ease-out 0.05s forwards;
}
.foot__tree.is-growing .t-trunk{
  animation: drawLine 2.4s cubic-bezier(.6,.0,.4,1) 0.2s forwards;
}
.foot__tree.is-growing .t-b1{ animation: drawLine 0.6s ease-out 1.1s forwards }
.foot__tree.is-growing .t-b2{ animation: drawLine 0.6s ease-out 1.4s forwards }
.foot__tree.is-growing .t-b3{ animation: drawLine 0.55s ease-out 1.7s forwards }
.foot__tree.is-growing .t-b4{ animation: drawLine 0.55s ease-out 2.0s forwards }
.foot__tree.is-growing .t-b5{ animation: drawLine 0.5s ease-out 2.3s forwards }

.foot__tree.is-growing .t-leaf{
  animation: leafPop 0.6s cubic-bezier(.34,1.56,.64,1) forwards;
}
.foot__tree.is-growing .l1 { animation-delay: 1.55s }
.foot__tree.is-growing .l2 { animation-delay: 1.7s  }
.foot__tree.is-growing .l3 { animation-delay: 1.85s }
.foot__tree.is-growing .l4 { animation-delay: 2.0s  }
.foot__tree.is-growing .l5 { animation-delay: 2.15s }
.foot__tree.is-growing .l6 { animation-delay: 2.3s  }
.foot__tree.is-growing .l7 { animation-delay: 2.45s }
.foot__tree.is-growing .l8 { animation-delay: 2.6s  }
.foot__tree.is-growing .l9 { animation-delay: 2.75s }
.foot__tree.is-growing .l10{ animation-delay: 2.9s  }
.foot__tree.is-growing .l11{ animation-delay: 3.05s }
.foot__tree.is-growing .l12{ animation-delay: 3.2s  }

/* gentle sway forever once it's grown */
.foot__tree.is-growing{
  animation: sway 4.5s ease-in-out 3.6s infinite;
  transform-origin: 100px 232px;
}

@keyframes drawLine{
  to{ stroke-dashoffset: 0 }
}
@keyframes leafPop{
  0%   { transform: scale(0)   rotate(-10deg); opacity: 0 }
  60%  { transform: scale(1.15) rotate(4deg);  opacity: 1 }
  100% { transform: scale(1)   rotate(0deg);   opacity: 1 }
}
@keyframes sway{
  0%, 100% { transform: rotate(-1.2deg) }
  50%      { transform: rotate(1.2deg)  }
}

@media (prefers-reduced-motion: reduce){
  .foot__tree.is-growing .t-ground,
  .foot__tree.is-growing .t-trunk,
  .foot__tree.is-growing .t-branch{
    animation: none; stroke-dashoffset: 0;
  }
  .foot__tree.is-growing .t-leaf{
    animation: none; transform: scale(1); opacity: 1;
  }
  .foot__tree.is-growing{ animation: none }
}

/* ------------------------ RESPONSIVE ------------------------ */
@media (max-width: 820px){
  .intro{padding-top:60px}
  .intro .wrap{grid-template-columns: 1fr; gap: 40px}
  .intro__photo{max-width: 480px; margin: 0 auto}

  .invite{padding: 50px 0}
  .invite__card{padding: 40px 22px}
  .meta{grid-template-columns: 1fr; gap: 14px; padding: 18px 0}

  .steps::before{left: 16px}
  .step{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 0 36px 36px;
  }
  .step__num{
    position:absolute;
    left: 16px; top: 28px;
    transform: translate(-50%, 0);
    width:44px; height:44px; font-size:1.2rem;
    grid-column: auto;
  }
  .step--right .step__media,
  .step--left  .step__media{grid-column:1; order:1; transform:none; padding:0}
  .step--right .step__body,
  .step--left  .step__body{grid-column:1; order:2; text-align:left; padding:0}
  .step--left .step__body p{margin-left:0}
  .step__media img{aspect-ratio: 4/5}
  .step__body h3{font-size: 1.35rem}
  .step__body p{font-size: 1rem; max-width:none}

  .tip__inner{justify-content:center; text-align:center}

  /* fewer floaty holds on small screens */
  .h2,.h4,.h6,.h7,.h9{display:none}
}

@media (max-width: 480px){
  .hero{min-height: 88vh}
  .hero__content{padding-bottom: 60px}
  .invite__card::before{width:100px;height:90px}
}

@media (prefers-reduced-motion: no-preference){
  .cta{transition: transform .15s ease, box-shadow .15s ease}
}

/* slight 3D wobble on hover — like a hold giving a little under your weight.
   keeps the per-step base rotation via --tilt so it doesn't snap straight. */
@keyframes shake3d{
  0%   { transform: rotate(var(--tilt,0deg)) }
  20%  { transform: rotate(var(--tilt,0deg)) perspective(800px) rotate3d(1,-1,0, 4deg)  translateZ(8px) }
  40%  { transform: rotate(var(--tilt,0deg)) perspective(800px) rotate3d(-1,1,0, 3deg)  translateZ(6px) }
  60%  { transform: rotate(var(--tilt,0deg)) perspective(800px) rotate3d(1,1,0, -2.5deg) translateZ(4px) }
  80%  { transform: rotate(var(--tilt,0deg)) perspective(800px) rotate3d(-1,-1,0, 1.5deg) translateZ(2px) }
  100% { transform: rotate(var(--tilt,0deg)) }
}