/* ───────── Eli+Juan: the adoption story ─────────
   Playful and bright. Cosmic orange (#E64F10) leads, with warm tints, a sunny pop and a deep ember ink.
   Floating vector blobs replace Squarespace's canvas "shapes" background. */

.page-elijuan {
  --ej-cosmic: #E64F10;
  --ej-ember: #B83A06;
  --ej-tangerine: #FF7A38;
  --ej-peach: #FFAE85;
  --ej-blush: #FFD9C4;
  --ej-sun: #FFC24B;
  --ej-cream: #FFF5EC;
  --ej-ink: #2B1206;
  --ej-ink-soft: #5A3A2A;
  --bg: var(--ej-cream);
  --fg: var(--ej-ink);
  --muted: var(--ej-ink-soft);
  --line: rgba(43, 18, 6, .14);
  --accent: var(--ej-cosmic);
}

/* Nav on the orange hero, then cream glass once scrolled */
.page-elijuan .nav {
  --n-fg: var(--ej-ink); --n-pill: rgba(255, 255, 255, .28); --n-line: rgba(43, 18, 6, .14);
  --n-glass: rgba(255, 245, 236, .9); --n-active: var(--ej-ink); --n-active-fg: var(--ej-cream);
}
.page-elijuan .nav__mark { background: var(--ej-ink); color: var(--ej-cream); }
.page-elijuan .nav__sheet { background: var(--ej-ember); }
.page-elijuan .nav__sheet a[aria-current="page"]::after { background: var(--ej-sun); }

/* ───────── Shared bits ───────── */
.ej-tag {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--ej-ember);
  font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 8px 20px -12px rgba(43, 18, 6, .5); transform: rotate(-2deg);
}
.ej-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ej-cosmic); }
.ej-tag--ink { background: var(--ej-ink); color: var(--ej-cream); }
.ej-tag--ink::before { background: var(--ej-sun); }
.ej-h2 { font: 700 clamp(36px, 5.2vw, 72px)/1 var(--font-display); letter-spacing: -.035em; color: var(--ej-ink); text-wrap: balance; }
.ej-h3 { font: 700 clamp(22px, 2vw, 28px)/1.15 var(--font-display); letter-spacing: -.02em; color: var(--ej-ink); }

/* ───────── Hero ───────── */
.ej-hero {
  position: relative; isolation: isolate; overflow: hidden; background: var(--ej-cosmic);
  min-height: min(100svh, 920px); display: grid; grid-template-rows: auto 1fr;
  padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 64px));
}
.ej-blobs { position: absolute; inset: 0; z-index: -2; }
.ej-blobs svg { width: 100%; height: 100%; }
.blob { transform-box: fill-box; transform-origin: center; opacity: .9; will-change: transform; }
.b1 { animation: float-a 22s ease-in-out infinite alternate; }
.b2 { animation: float-b 26s ease-in-out infinite alternate; }
.b3 { animation: float-c 30s ease-in-out infinite alternate; }
.b4 { animation: float-a 24s ease-in-out -6s infinite alternate-reverse; }
.b5 { animation: float-b 20s ease-in-out -3s infinite alternate; }
.b6 { animation: float-c 28s ease-in-out -9s infinite alternate-reverse; }
.b7 { animation: float-a 18s ease-in-out -4s infinite alternate; }
.b8 { animation: float-b 16s ease-in-out -2s infinite alternate-reverse; opacity: .8; }
.b9 { animation: float-c 19s ease-in-out -7s infinite alternate; opacity: .8; }
@keyframes float-a { from { transform: translate(0, 0) rotate(0) scale(1); } to { transform: translate(60px, 40px) rotate(24deg) scale(1.12); } }
@keyframes float-b { from { transform: translate(0, 0) rotate(0) scale(1.05); } to { transform: translate(-70px, 30px) rotate(-30deg) scale(.92); } }
@keyframes float-c { from { transform: translate(0, 0) rotate(0) scale(.95); } to { transform: translate(40px, -60px) rotate(18deg) scale(1.1); } }
.ej-hero.is-paused .blob { animation-play-state: paused; }

.ej-hero__inner { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: clamp(14px, 2.4vh, 24px); }
.ej-hero__logo { margin: 0; width: min(560px, 82vw); filter: drop-shadow(0 6px 18px rgba(120, 30, 0, .35)); }
.ej-hero__logo img { width: 100%; }
.ej-hero__cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; text-decoration: none;
  background: var(--ej-ink); color: var(--ej-cream); font: 600 15px/1 var(--font-body);
  box-shadow: 0 12px 24px -12px rgba(43, 18, 6, .6); transition: transform .3s var(--ease), background .3s;
}
.ej-hero__cta svg { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .3s var(--ease); }
.ej-hero__cta:hover { transform: translateY(-2px) rotate(-1deg); background: #000; }
.ej-hero__cta:hover svg { transform: rotate(90deg) translateX(3px); }
.ej-hero__boys {
  position: relative; z-index: 1; align-self: end; justify-self: center; width: min(1000px, 92vw, calc((100svh - var(--nav-h) - 250px) * 1.356)); height: auto; margin-top: clamp(8px, 2vh, 24px);
  margin-bottom: -2px; filter: drop-shadow(0 20px 30px rgba(90, 20, 0, .35));
}
.ej-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; width: 100%; height: clamp(34px, 5vw, 80px); fill: var(--ej-cream); }

.js .ej-hero [data-in] { opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .9s var(--ease), transform .9s cubic-bezier(.3, 1.4, .5, 1); }
.js .is-ready .ej-hero [data-in] { opacity: 1; transform: none; }
.js .is-ready .ej-hero [data-in]:nth-child(2) { transition-delay: .12s; }
.js .is-ready .ej-hero [data-in]:nth-child(3) { transition-delay: .26s; }
.js .is-ready .ej-tag[data-in] { transform: rotate(-2deg); }
.js .ej-hero__boys { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease) .2s, transform 1.2s cubic-bezier(.25, 1.25, .5, 1) .2s; }
.js .is-ready .ej-hero__boys { opacity: 1; transform: none; }

/* ───────── Adoption story ───────── */
.ej-story { padding-block: clamp(64px, 11vh, 130px); background:
  radial-gradient(circle at 12% 8%, rgba(255, 194, 75, .18) 0 120px, transparent 121px),
  radial-gradient(circle at 92% 38%, rgba(230, 79, 16, .08) 0 180px, transparent 181px),
  var(--ej-cream); }
.ej-story__head { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto clamp(48px, 8vh, 90px); }

.ej-timeline { position: relative; display: grid; gap: clamp(40px, 7vh, 80px); max-width: 1080px; margin: 0 auto; }
.ej-track {
  /* dotted path down the middle, filled in orange as you scroll */
  position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; translate: -50% 0; border-radius: 6px;
  background: radial-gradient(circle, rgba(230, 79, 16, .35) 2px, transparent 2.5px) center top / 6px 14px repeat-y;
}
.ej-track__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--ej-sun), var(--ej-cosmic)); transform-origin: top; transform: scaleY(var(--p, 0)); }

.ej-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: center; }
.ej-step > .ej-card { grid-column: 1; grid-row: 1; }
.ej-step:nth-of-type(odd) > .ej-card { grid-column: 3; }
.ej-step > .ej-polaroids { grid-row: 1; grid-column: 3; }
.ej-step:nth-of-type(odd) > .ej-polaroids { grid-column: 1; }
.ej-dot {
  grid-column: 2; grid-row: 1; justify-self: center; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--ej-cosmic); color: #fff; box-shadow: 0 0 0 7px var(--ej-cream), 0 10px 20px -6px rgba(184, 58, 6, .55);
  transition: transform .6s cubic-bezier(.3, 1.6, .5, 1);
}
.ej-dot svg { width: 26px; height: 26px; }
.js .ej-step:not(.is-in) .ej-dot { transform: scale(.4) rotate(-40deg); }
.ej-dot--star { width: 76px; height: 76px; background: var(--ej-sun); color: var(--ej-ember); }
.ej-dot--star svg { width: 34px; height: 34px; }

.ej-card {
  position: relative; padding: clamp(22px, 2.6vw, 34px); border-radius: 26px; background: #fff; min-width: 0;
  box-shadow: 0 2px 0 rgba(43, 18, 6, .04), 0 24px 50px -30px rgba(120, 40, 0, .45);
  border: 2px solid transparent; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), border-color .3s;
}
.ej-card:hover { transform: translateY(-4px) rotate(-.4deg); border-color: var(--ej-blush); }
.ej-card p:not(.ej-when) { margin-top: 12px; color: var(--ej-ink-soft); font-size: 17px; line-height: 1.7; }
.ej-when {
  display: inline-block; margin-bottom: 10px; padding: 6px 12px; border-radius: 999px; background: var(--ej-blush); color: var(--ej-ember);
  font: 700 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
}

.ej-polaroids { position: relative; display: flex; justify-content: center; gap: 0; padding: 10px; }
.ej-polaroid {
  margin: 0; padding: 10px 10px 14px; background: #fff; border-radius: 6px; width: min(210px, 44%);
  box-shadow: 0 20px 40px -22px rgba(60, 20, 0, .55); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1);
}
.ej-polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.ej-polaroid--l { transform: rotate(-6deg) translateY(8px); }
.ej-polaroid--r { transform: rotate(5deg) translateX(-14px); }
.ej-polaroid--wide { width: min(380px, 90%); transform: rotate(3deg); }
.ej-polaroid--wide img { aspect-ratio: 4 / 3; }
.ej-polaroid figcaption { padding-top: 10px; text-align: center; font: 600 15px/1.2 var(--font-display); color: var(--ej-ember); }
.ej-polaroid:hover { transform: rotate(0) scale(1.04); z-index: 2; }

/* Adoption day: the big moment spans the whole width */
.ej-step--big { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; }
.ej-step--big > .ej-dot { grid-column: 1; grid-row: 1; }
.ej-step--big > .ej-card, .ej-step:nth-of-type(odd).ej-step--big > .ej-card { grid-column: 1; grid-row: 2; }
.ej-card--big { width: min(100%, 920px); text-align: center; background: var(--ej-cosmic); color: #fff; border: 0; overflow: visible; }
.ej-card--big:hover { transform: none; }
.ej-card--big .ej-when { background: rgba(255, 255, 255, .22); color: #fff; }
.ej-card--big .ej-h3 { color: #fff; font-size: clamp(28px, 3.4vw, 46px); }
.ej-feature { margin: 22px 0 0; }
.ej-feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 24px 40px -24px rgba(60, 10, 0, .7); }

.ej-confetti { position: absolute; left: 50%; top: 20px; width: 0; height: 0; pointer-events: none; }
.ej-confetti i { position: absolute; width: 10px; height: 16px; border-radius: 2px; opacity: 0; }
.ej-confetti i:nth-child(3n) { background: var(--ej-sun); }
.ej-confetti i:nth-child(3n+1) { background: #fff; border-radius: 50%; width: 10px; height: 10px; }
.ej-confetti i:nth-child(3n+2) { background: var(--ej-ink); }
.is-in .ej-confetti i { animation: pop 1.6s cubic-bezier(.2, .8, .3, 1) forwards; animation-delay: .35s; }
.ej-confetti i:nth-child(1)  { --x: -300px; --y: -60px; --r: 200deg; }
.ej-confetti i:nth-child(2)  { --x: -230px; --y: -140px; --r: -160deg; }
.ej-confetti i:nth-child(3)  { --x: -150px; --y: -190px; --r: 120deg; }
.ej-confetti i:nth-child(4)  { --x: -70px;  --y: -220px; --r: -220deg; }
.ej-confetti i:nth-child(5)  { --x: 20px;   --y: -240px; --r: 260deg; }
.ej-confetti i:nth-child(6)  { --x: 110px;  --y: -210px; --r: -140deg; }
.ej-confetti i:nth-child(7)  { --x: 190px;  --y: -170px; --r: 180deg; }
.ej-confetti i:nth-child(8)  { --x: 270px;  --y: -110px; --r: -240deg; }
.ej-confetti i:nth-child(9)  { --x: 320px;  --y: -30px;  --r: 150deg; }
.ej-confetti i:nth-child(10) { --x: -340px; --y: 20px;   --r: -200deg; }
.ej-confetti i:nth-child(11) { --x: 350px;  --y: 40px;   --r: 220deg; }
.ej-confetti i:nth-child(12) { --x: -40px;  --y: -120px; --r: -300deg; }
@keyframes pop {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 90px)) rotate(var(--r)) scale(1); }
}

.ej-closing { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1080px; margin: clamp(80px, 12vh, 140px) auto 0; }
.ej-closing__photo { margin: 0; padding: 12px 12px 16px; background: #fff; border-radius: 10px; transform: rotate(-2deg); box-shadow: 0 30px 60px -30px rgba(60, 20, 0, .55); }
.ej-closing__photo img { width: 100%; border-radius: 5px; }
.ej-closing__photo figcaption { padding-top: 12px; text-align: center; font: 700 16px/1 var(--font-display); color: var(--ej-ember); }
.ej-closing__text { font: 500 clamp(24px, 2.4vw, 34px)/1.3 var(--font-display); letter-spacing: -.02em; color: var(--ej-ink); }
.ej-closing__text strong { color: var(--ej-cosmic); font-weight: 700; }

/* ───────── Quote ─────────
   The photo is shown untinted and sized to its own proportions (2000 x 1013) so the family is never cropped;
   the orange gradient lives only on the quote card. */
.ej-quote { position: relative; isolation: isolate; overflow: hidden; color: #fff; display: grid; align-items: center;
  aspect-ratio: 2000 / 1013; min-height: 540px; max-height: 1100px; }
.ej-quote__bg { position: absolute; inset: 0; z-index: -2; background: url("../images/elijuan/family-steps-wide.webp") 72% 30% / cover no-repeat; }
.ej-quote::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(43, 18, 6, .28), rgba(43, 18, 6, 0) 50%); }
.ej-quote__inner { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; }
.ej-quote__card {
  margin: 0; width: min(560px, 46%); padding: clamp(28px, 3vw, 44px); border-radius: 28px;
  background: linear-gradient(140deg, rgba(230, 79, 16, .94), rgba(184, 58, 6, .92));
  box-shadow: 0 30px 60px -30px rgba(60, 15, 0, .7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transform: rotate(-1.2deg);
}
.js .ej-quote__card.reveal { transform: rotate(-1.2deg) translateY(28px); }
.js .ej-quote__card.reveal.is-in { transform: rotate(-1.2deg); }
.ej-quote blockquote { margin: 0; }
.ej-quote blockquote p { font: 700 clamp(26px, 2.7vw, 42px)/1.12 var(--font-display); letter-spacing: -.03em; }
.ej-quote blockquote p::before { content: "“"; display: block; height: .55em; font-size: 2.4em; line-height: 1; color: var(--ej-sun); }
.ej-quote figcaption { margin-top: 22px; font: 600 13px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }

/* Footer on cream */
.page-elijuan .atg-foot { --atg-foot-fg: var(--ej-ink); --atg-foot-line: rgba(43, 18, 6, .12); background: var(--ej-cream); }
.page-elijuan .atg-foot__credit { color: #6a5043; }

/* ───────── Responsive ───────── */
@media (max-width: 860px) {
  .ej-track { left: 30px; }
  .ej-step, .ej-step:nth-of-type(odd) { grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; row-gap: 18px; align-items: start; }
  .ej-dot { grid-column: 1; width: 50px; height: 50px; justify-self: center; }
  .ej-dot svg { width: 22px; height: 22px; }
  .ej-step > .ej-card, .ej-step:nth-of-type(odd) > .ej-card { grid-column: 2; grid-row: 1; }
  .ej-step > .ej-polaroids, .ej-step:nth-of-type(odd) > .ej-polaroids { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .ej-step--big { grid-template-columns: 60px minmax(0, 1fr); justify-items: stretch; }
  .ej-step--big > .ej-dot { grid-column: 1; grid-row: 1; }
  .ej-step--big > .ej-card, .ej-step:nth-of-type(odd).ej-step--big > .ej-card { grid-column: 2; grid-row: 1; }
  .ej-dot--star { width: 58px; height: 58px; }
  .ej-closing { grid-template-columns: minmax(0, 1fr); }
  /* Small screens: the full photo sits on top, the quote card overlaps its bottom edge */
  .ej-quote { display: block; aspect-ratio: auto; min-height: 0; max-height: none; overflow: visible; padding-bottom: clamp(48px, 8vh, 80px); background: var(--ej-cream); }
  .ej-quote__bg { position: relative; inset: auto; aspect-ratio: 2000 / 1013; background-size: cover; background-position: center; }
  .ej-quote::after { display: none; }
  .ej-quote__card { width: 100%; margin-top: -48px; }
}
@media (max-width: 600px) {
  .ej-card { border-radius: 20px; }
  .ej-card p:not(.ej-when) { font-size: 16px; }
  .ej-polaroid { width: 46%; }
  .ej-polaroid--wide { width: min(380px, 100%); }
  .ej-hero { min-height: 0; }
  .ej-hero__boys { width: 100vw; max-width: none; }
  .ej-confetti i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .blob, .ej-confetti i { animation: none !important; }
}