/* INDEX — clean, reference-led composition. Kept separate from shared page styles. */
.index-experience {
  --paper: #f3e7d0;
  --paper-light: #fbf2df;
  --sand: #d8bf96;
  --ink: #352b27;
  --muted: #80664f;
  --accent: #a65d49;
  --line: #b58c60;
  overflow-x: clip;
  background: var(--paper);
}
.index-experience main { min-height: 100svh; background: var(--paper); }
.index-experience .hero {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: max(780px, 100svh);
  min-height: 780px;
  overflow: hidden;
  padding: 0;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255,249,235,.96) 0%, rgba(248,237,216,.72) 46%, transparent 76%),
    linear-gradient(180deg, #f5e9d2 0%, #f2e3c8 57%, #f0dfbf 100%);
}
/* Intro remains simple and readable: its own region, never sharing space with the envelope. */
.index-experience .hero-copy {
  position: absolute;
  z-index: 5;
  top: clamp(48px, 6.5vh, 76px);
  left: 50%;
  width: min(91vw, 1120px);
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  transition: opacity .5s ease, filter .5s ease, transform .5s ease;
}
.index-experience .hero-copy .eyebrow {
  max-width: 36ch;
  margin: 0 auto;
  color: var(--muted);
  font: 600 clamp(.62rem, .78vw, .75rem)/1.75 "DM Sans", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.index-experience .hero-copy h1 {
  max-width: 1080px;
  margin: clamp(18px, 2.8vh, 28px) auto clamp(22px, 3vh, 34px);
  color: var(--ink);
  font: 400 clamp(3.45rem, 5.55vw, 6rem)/.99 "Playfair Display", Georgia, serif;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.index-experience .hero-copy h1 em { color: var(--accent); font-weight: 400; }
.index-experience .name-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: min(270px, 75vw);
  margin: 0 auto;
  color: var(--muted);
  text-align: left;
  font: 500 .78rem/1.5 "DM Sans", sans-serif;
}
.index-experience .name-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 39px;
  padding: 3px 2px 7px;
  border: 0;
  border-bottom: 1px solid rgba(83,62,43,.42);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  font: 500 1.45rem/1.2 "Caveat", cursive;
  transition: border-color .25s ease, border-width .25s ease;
}
.index-experience .name-field input::placeholder { color: #80664f; opacity: .88; }
.index-experience .name-field input:focus { border-bottom: 2px solid var(--accent); }
.index-experience .hero-note {
  margin: 12px auto 0;
  color: var(--muted);
  font: 500 clamp(1.2rem, 1.55vw, 1.45rem)/1.2 "Caveat", cursive;
}
.index-experience .send-invitation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 33px;
  margin-top: 15px;
  padding: 7px 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(166,93,73,.5);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: 600 .65rem/1 "DM Sans", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: gap .25s ease, opacity .25s ease;
}
.index-experience .send-invitation:hover { gap: 19px; }
.index-experience .send-invitation:disabled { cursor: wait; }
.index-experience .send-invitation:focus-visible,
.index-experience .landed-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* The landscape occupies the lower half and dissolves into paper at both edges. */
.index-experience .horizon {
  position: absolute;
  z-index: 0;
  left: -5%; right: -5%; bottom: -1%;
  height: 48%;
  overflow: hidden;
  opacity: .88;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.38) 9%, #000 27%, #000 72%, rgba(0,0,0,.55) 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.38) 9%, #000 27%, #000 72%, rgba(0,0,0,.55) 87%, transparent 100%);
}
.index-experience .horizon span {
  position: absolute;
  display: block;
  bottom: -83%;
  width: 94%;
  height: 150%;
  border-radius: 50% 50% 0 0;
  background: #ddc69f;
  filter: blur(.35px);
}
.index-experience .horizon span:nth-child(1) { left: -24%; bottom: -66%; background: #e0c9a2; }
.index-experience .horizon span:nth-child(2) { left: 1%; bottom: -88%; background: #d0b489; }
.index-experience .horizon span:nth-child(3) { left: 29%; bottom: -74%; background: #e6d2ad; }
.index-experience .horizon span:nth-child(4) { right: -20%; bottom: -88%; background: #d4b88b; }
.index-experience .horizon span:nth-child(5) { right: -43%; bottom: -105%; background: #ead9b9; }
.index-experience .landing-ground {
  position: absolute;
  z-index: 1;
  left: -12%; right: -12%; bottom: -16%; height: 40%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 10%, rgba(215,185,140,.55), transparent 67%), linear-gradient(180deg, rgba(224,199,157,.04), rgba(206,174,128,.22));
  filter: blur(12px);
  transition: opacity .8s ease;
}

/* Art enters only after the name is submitted. Initial frame intentionally has no jet/envelope. */
.index-experience .flight-path {
  position: absolute;
  z-index: 2;
  left: 9%; top: 30%; width: 63%; height: 25%;
  opacity: 0;
  pointer-events: none;
}
.index-experience .flight-path svg { display: block; width: 100%; height: 100%; overflow: visible; }
.index-experience .flight-path path {
  fill: none;
  stroke: #b98a5b;
  stroke-width: 1.7;
  stroke-dasharray: 1 1200;
  stroke-linecap: round;
}
.index-experience .paper-jet {
  position: absolute;
  z-index: 4;
  left: 66%; top: 29%;
  width: clamp(88px, 8.2vw, 132px);
  visibility: hidden;
  opacity: 0;
  transform-origin: 40% 60%;
  filter: drop-shadow(0 12px 10px rgba(75,52,29,.16));
  will-change: transform, opacity;
  pointer-events: none;
}
.index-experience .paper-jet svg { display: block; width: 100%; height: auto; overflow: visible; }
.index-experience .paper-jet svg path { fill: #f6e9d1; stroke: #9e754e; stroke-width: 2; stroke-linejoin: round; }
.index-experience .suspension-scene {
  position: absolute;
  z-index: 4;
  left: 65%; top: 43%; right: auto; bottom: auto;
  width: clamp(260px, 22vw, 340px);
  height: clamp(275px, 31vw, 340px);
  visibility: hidden;
  opacity: 0;
  transform: none;
  transform-origin: 50% 8%;
  will-change: transform, opacity;
}
.index-experience .support-line {
  position: absolute;
  left: 10%; right: 10%; top: 22px; height: 2px;
  transform-origin: 100% 50%;
  background: linear-gradient(180deg, #a77d50, #765333);
  box-shadow: 0 2px 3px rgba(96,72,44,.14);
}
.index-experience .line-knot {
  position: absolute; left: calc(50% - 10px); top: -4px;
  width: 20px; height: 11px;
  border: 1.5px solid #9b744a; border-radius: 50%; background: transparent;
}
.index-experience .envelope-loop {
  position: absolute; z-index: 2; left: 50%; top: 18px;
  width: 23px; height: 27px;
  border: 2px solid #9b744a; border-bottom-color: transparent;
  border-radius: 50% 50% 0 0; transform: translateX(-50%);
}
.index-experience .envelope {
  position: absolute; left: 9%; top: 43px; width: 82%; height: 62%;
  transform-origin: 50% 8%;
  filter: drop-shadow(0 18px 20px rgba(81,56,31,.18));
  will-change: transform;
}
.index-experience .envelope-back,
.index-experience .envelope-front,
.index-experience .envelope-flap { position: absolute; inset: 0; }
.index-experience .envelope-back { background: linear-gradient(145deg,#e5c99a,#d7b784); border: 1px solid #b99a6c; }
.index-experience .envelope-front {
  background: linear-gradient(145deg,transparent 49.7%,#e7cda2 50%), linear-gradient(35deg,transparent 49.7%,#efd9b3 50%), #e6c99a;
  border: 1px solid #b99a6c;
}
.index-experience .envelope-flap { z-index: 2; height: 54%; background: #efd9b3; clip-path: polygon(0 0,100% 0,50% 100%); border-bottom: 1px solid #b99a6c; }
.index-experience .envelope-seal {
  position: absolute; z-index: 4; left: 50%; top: 48%; display: grid; place-items: center;
  width: 31px; height: 31px; border-radius: 50%; transform: translate(-50%,-50%);
  color: #f8e8cf; background: #ad604a; box-shadow: 0 3px 5px rgba(116,69,45,.19); font-size: .85rem;
}
.index-experience .scene-caption {
  position: absolute; left: 0; right: 0; bottom: -28px;
  color: #79543c; text-align: center; font: 500 clamp(1.05rem,1.5vw,1.3rem)/1.1 "Caveat", cursive;
}

/* Loose prints emerge with the break, travel through the open space, then clear away. */
.index-experience .falling-photos {
  position: absolute; z-index: 3; inset: 43% 4% 4%;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.index-experience .fall-photo {
  position: absolute; display: block; width: clamp(72px, 8.2vw, 125px); aspect-ratio: .78;
  padding: 6px 6px 18px; box-sizing: border-box;
  background: #fbf3e5; border: 1px solid rgba(132,101,64,.28);
  box-shadow: 0 10px 20px rgba(83,60,36,.17);
  opacity: 0; visibility: hidden; transform-origin: center center;
}
.index-experience .fall-photo::after {
  content: ""; display: block; width: 100%; height: 100%;
  background-image: linear-gradient(160deg,rgba(67,54,44,.05),rgba(67,54,44,.17)), var(--snapshot, linear-gradient(135deg,#c7b18e,#e8d9be 45%,#9e8566));
  background-size: cover; background-position: center;
}
.index-experience .photo-a { left: 9%; top: 8%; --snapshot: url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=260&q=70"); }
.index-experience .photo-b { left: 22%; top: 28%; --snapshot: url("https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?auto=format&fit=crop&w=260&q=70"); }
.index-experience .photo-c { left: 35%; top: 5%; --snapshot: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=260&q=70"); }
.index-experience .photo-d { left: 48%; top: 22%; --snapshot: url("https://images.unsplash.com/photo-1472396961693-142e6e269027?auto=format&fit=crop&w=260&q=70"); }
.index-experience .photo-e { left: 62%; top: 7%; --snapshot: url("https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=260&q=70"); }
.index-experience .photo-f { left: 76%; top: 28%; --snapshot: url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=260&q=70"); }
.index-experience .photo-g { left: 15%; top: 54%; --snapshot: url("https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=260&q=70"); }
.index-experience .photo-h { left: 32%; top: 50%; --snapshot: url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=260&q=70"); }
.index-experience .photo-i { left: 55%; top: 52%; --snapshot: url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=260&q=70"); }
.index-experience .photo-j { left: 71%; top: 53%; --snapshot: url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=260&q=70"); }

/* The final card is staged near the ground and remains the only clickable image. */
.index-experience .landed-photo-wrap {
  position: absolute; z-index: 6; left: 50%; top: 66%;
  width: clamp(190px, 17vw, 245px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 34px) rotate(-8deg) scale(.78);
  transform-origin: center; will-change: transform, opacity; text-align: center;
}
.index-experience .landed-photo {
  display: block; position: relative; width: 100%; box-sizing: border-box;
  padding: 8px 8px 32px; border: 1px solid rgba(128,94,57,.35);
  background: #f5e9d4; color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: 0 24px 48px rgba(74,51,28,.22), 0 2px 7px rgba(74,51,28,.12);
  transition: box-shadow .3s ease, transform .3s ease;
}
.index-experience .landed-photo img { display: block; width: 100%; aspect-ratio: 1.12; object-fit: cover; filter: sepia(.08) saturate(.88); }
.index-experience .landed-photo-caption { position: absolute; left: 10px; bottom: 8px; color: #79543c; font: 500 1.05rem/1 "Caveat", cursive; }
.index-experience .landed-photo-hint { position: absolute; right: 9px; bottom: 10px; color: #a65d49; font: 600 .52rem/1 "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.index-experience .photo-invitation { margin: 13px 0 0; color: #79543c; font: 500 1.18rem/1.2 "Caveat", cursive; }
.index-experience .hero-footer { position: absolute; z-index: 7; left: 50%; right: auto; bottom: 19px; transform: translateX(-50%); color: #79543c; }
.index-experience .hero-footer .scroll-mark { display: block; font: 1.45rem/1 "DM Sans", sans-serif; animation: index-scroll-breathe 2.3s ease-in-out infinite; }
@keyframes index-scroll-breathe { 0%,100% { transform: translateY(0); opacity: .62; } 50% { transform: translateY(5px); opacity: 1; } }
.index-experience .sequence-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.index-experience .hero.is-launched .send-invitation { opacity: 0; pointer-events: none; }
.index-experience .hero.is-launched .hero-copy { opacity: .35; }
.index-experience .hero.is-landed .landing-ground { opacity: 1; }
.index-experience .hero.is-landed .landed-photo-wrap { opacity: 1; visibility: visible; pointer-events: auto; }
.index-experience .hero.is-landed .hero-footer { opacity: 0; }
.index-experience .hero.is-landed .hero-copy { opacity: .18; filter: blur(2px); }
.index-experience .hero.is-landed .flight-path { opacity: 0; }
.index-experience .hero.is-landed .paper-jet { opacity: 0; visibility: hidden; }
.index-experience .hero.is-landed .suspension-scene { opacity: 0; visibility: hidden; pointer-events: none; }
.index-experience .hero.is-transitioning .landed-photo-wrap { z-index: 20; }
.index-experience .hero.is-transitioning .hero-copy,
.index-experience .hero.is-transitioning .horizon,
.index-experience .hero.is-transitioning .landing-ground { filter: blur(7px); }
.index-experience .landed-photo:hover { box-shadow: 0 30px 62px rgba(74,51,28,.26), 0 2px 7px rgba(74,51,28,.12); transform: translateY(-3px); }

@media (min-width: 761px) and (max-width: 1100px) {
  .index-experience .hero-copy h1 { font-size: clamp(3.2rem, 5.2vw, 4.8rem); }
  .index-experience .suspension-scene { left: 61%; width: 295px; }
  .index-experience .fall-photo { width: clamp(65px, 9vw, 95px); }
}
@media (max-width: 760px) {
  .index-experience .hero { height: max(900px, 100svh); min-height: 900px; }
  .index-experience .hero-copy { top: 6%; width: 90vw; }
  .index-experience .hero-copy .eyebrow { max-width: 32ch; font-size: .6rem; }
  .index-experience .hero-copy h1 { max-width: 600px; margin: 18px auto 22px; font-size: clamp(3rem, 10.2vw, 4.5rem); line-height: 1; }
  .index-experience .name-field { width: min(255px, 76vw); }
  .index-experience .hero-note { font-size: 1.2rem; }
  .index-experience .flight-path { left: 4%; top: 37%; width: 90%; height: 18%; }
  .index-experience .paper-jet { left: 61%; top: 39%; width: 76px; }
  .index-experience .suspension-scene { left: 50%; top: 46%; width: 245px; height: 260px; transform: translateX(-50%); }
  .index-experience .horizon { height: 46%; }
  .index-experience .falling-photos { inset: 53% 2% 5%; }
  .index-experience .fall-photo { width: clamp(43px, 10.5vw, 66px); padding: 3px 3px 10px; }
  .index-experience .landed-photo-wrap { top: 68%; width: min(62vw, 225px); }
  .index-experience .photo-invitation { max-width: 260px; margin-inline: auto; }
  .index-experience .hero-footer { bottom: 14px; }
}
@media (max-width: 390px) {
  .index-experience .hero { height: max(860px, 100svh); min-height: 860px; }
  .index-experience .hero-copy h1 { font-size: clamp(2.8rem, 10.7vw, 3.25rem); }
  .index-experience .suspension-scene { width: 220px; height: 238px; }
}
@media (prefers-reduced-motion: reduce) {
  .index-experience .hero-footer .scroll-mark { animation: none; }
  .index-experience *,.index-experience *::before,.index-experience *::after { scroll-behavior: auto !important; }
}

/* PASS 3 — clearer name field, larger handwriting, and a real paper-jet flight path. */
.index-experience .name-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(360px, 84vw);
  margin: 0 auto;
  gap: 8px;
  color: var(--muted);
  text-align: left;
  font: 500 .84rem/1.5 "DM Sans", sans-serif;
}
.index-experience .name-field > label {
  display: block;
  margin: 0 0 2px;
  color: #795c46;
  font: 500 .84rem/1.45 "DM Sans", sans-serif;
}
.index-experience .name-entry-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 54px;
  border-bottom: 2.25px solid rgba(83,62,43,.6);
  transition: border-color .22s ease, border-width .22s ease;
}
.index-experience .name-entry-row:focus-within {
  border-bottom: 3px solid var(--accent);
}
.index-experience .name-entry-row input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  min-height: 51px;
  box-sizing: border-box;
  padding: 2px 6px 8px 2px;
  border: 0 !important;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: 500 clamp(1.55rem, 1.9vw, 1.85rem)/1.1 "Caveat", cursive;
  box-shadow: none !important;
}
.index-experience .name-entry-row input::placeholder { color: #80664f; opacity: .92; }
.index-experience .name-entry-row input:focus { border: 0 !important; }
.index-experience .send-invitation {
  display: grid;
  flex: 0 0 54px;
  place-items: center;
  align-self: stretch;
  width: 54px;
  min-height: 51px;
  margin: 0 0 -2.25px 4px;
  padding: 0 1px 6px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  opacity: 1;
  transition: color .22s ease, transform .22s ease, opacity .3s ease;
}
.index-experience .send-invitation svg {
  display: block;
  width: 39px;
  height: 26px;
  overflow: visible;
}
.index-experience .send-invitation svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.index-experience .send-invitation:hover { transform: translateX(4px); color: #874632; }
.index-experience .send-invitation:active { transform: translateX(6px) scale(.96); }
.index-experience .send-invitation:disabled { cursor: wait; }
.index-experience .hero-note {
  max-width: 440px;
  margin: 15px auto 0;
  color: #755640;
  font: 500 clamp(1.5rem, 1.9vw, 1.8rem)/1.2 "Caveat", cursive;
  letter-spacing: .005em;
}
.index-experience .flight-path {
  left: -6%;
  top: 5%;
  width: 80%;
  height: 40%;
  opacity: 0;
}
.index-experience .flight-path .flight-guide {
  fill: none;
  stroke: #b98a5b;
  stroke-width: 1.8;
  stroke-dasharray: 3 11;
  stroke-dashoffset: 0;
  opacity: .75;
}
.index-experience .flight-path .flight-trail {
  fill: none;
  stroke: #b98a5b;
  stroke-width: 1.35;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  stroke-linecap: round;
  opacity: .7;
}
.index-experience .paper-jet {
  left: 66%;
  top: 29%;
  width: clamp(90px, 8.6vw, 138px);
  filter: drop-shadow(0 13px 11px rgba(75,52,29,.19));
}
.index-experience .paper-jet svg { overflow: visible; }
.index-experience .paper-jet .jet-shadow {
  fill: rgba(114,79,43,.10);
  stroke: none;
  transform: translate(5px,6px);
}
.index-experience .paper-jet .jet-main {
  fill: #f8ecd5;
  stroke: #9e754e;
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.index-experience .paper-jet .jet-fold {
  fill: none;
  stroke: #b68d60;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.index-experience .falling-photos { inset: 40% 2.5% 4%; }
.index-experience .fall-photo { box-shadow: 0 13px 25px rgba(83,60,36,.19); }
.index-experience .landed-photo-wrap { top: 65%; width: clamp(205px, 18vw, 260px); }
.index-experience .landed-photo { padding: 9px 9px 36px; }
.index-experience .landed-photo img { aspect-ratio: 1.1; }
.index-experience .photo-invitation { margin-top: 16px; font-size: clamp(1.3rem, 1.7vw, 1.55rem); }

@media (max-width: 760px) {
  .index-experience .name-field { width: min(345px, 85vw); }
  .index-experience .name-entry-row { min-height: 50px; }
  .index-experience .name-entry-row input { min-height: 48px; font-size: 1.58rem; }
  .index-experience .send-invitation { flex-basis: 47px; width: 47px; min-height: 48px; }
  .index-experience .send-invitation svg { width: 34px; }
  .index-experience .hero-note { max-width: 90vw; font-size: 1.48rem; margin-top: 13px; }
  .index-experience .flight-path { left: -8%; top: 19%; width: 94%; height: 32%; }
  .index-experience .paper-jet { left: 61%; top: 29%; width: 77px; }
  .index-experience .falling-photos { inset: 48% 2% 5%; }
  .index-experience .landed-photo-wrap { top: 68%; width: min(65vw, 232px); }
}
@media (max-width: 390px) {
  .index-experience .name-field { width: 84vw; }
  .index-experience .name-entry-row input { font-size: 1.48rem; }
  .index-experience .hero-note { font-size: 1.38rem; }
}
/* Reset legacy shared styles that would otherwise shift SVG artwork away from its anchor. */
.index-experience .paper-jet { right: auto; transform: none; }
.index-experience .flight-path { right: auto; }
.index-experience .envelope { transform: none; aspect-ratio: auto; }

/* PASS 4 — use the supplied vector artwork while retaining the existing choreography. */
.index-experience .paper-jet {
  width: clamp(112px, 13vw, 190px);
  filter: drop-shadow(0 10px 12px rgba(75,52,29,.18));
}
.index-experience .paper-jet img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.index-experience .envelope {
  width: 88%;
  height: auto;
  aspect-ratio: auto;
  left: 6%;
  top: 37px;
  filter: drop-shadow(0 18px 18px rgba(81,56,31,.17));
}
.index-experience .envelope-art {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.index-experience .envelope-loop {
  left: 56.5%;
  top: 17px;
  width: 22px;
  height: 57px;
  border-width: 2px;
}
.index-experience .support-line {
  left: 10%;
  right: 10%;
  top: 22px;
}
@media (max-width: 760px) {
  .index-experience .paper-jet { width: clamp(85px, 21vw, 126px); }
  .index-experience .envelope { width: 92%; left: 4%; top: 33px; }
  .index-experience .envelope-loop { left: 56.5%; height: 49px; }
}


/* PASS 5 — straight, connected flight rig. No SVG path-following. */
.index-experience .flight-path { display: none !important; }
.index-experience .paper-jet {
  left: 0; top: 34%; width: clamp(112px, 13vw, 190px);
  transform-origin: 50% 50%;
  z-index: 8;
}
.index-experience .suspension-scene {
  left: 0; top: 42%; width: clamp(220px, 24vw, 320px);
  transform-origin: 50% 8%; z-index: 7;
}
.index-experience .flight-rope {
  position: absolute; z-index: 6; left: 0; top: 44%;
  width: clamp(75px, 10vw, 145px); height: 2px;
  background: linear-gradient(90deg, #a77d50, #765333);
  box-shadow: 0 1px 2px rgba(96,72,44,.15);
  transform-origin: left center; opacity: 0; pointer-events: none;
}
.index-experience .support-line { display: none; }
.index-experience .envelope-loop { top: 15px; height: 34px; }
.index-experience .falling-photos { z-index: 9; }
.index-experience .fall-photo { will-change: transform, opacity; }
@media (max-width: 760px) {
  .index-experience .paper-jet { top: 31%; width: clamp(85px, 21vw, 126px); }
  .index-experience .suspension-scene { top: 42%; width: min(72vw, 270px); }
  .index-experience .flight-rope { top: 42%; width: 18vw; }
}


/* Saron-only invitation: one small take-off, then a hanging-photo arrival. */
.index-experience .name-entry-row {
  display: flex; align-items: center; gap: 12px;
}
.index-experience .name-entry-row input { flex: 1; min-width: 0; }
.index-experience .send-invitation {
  flex: 0 0 44px; width: 44px; min-height: 44px; margin: 0; padding: 8px;
  border: 1px solid rgba(166,93,73,.42); border-radius: 50%;
  opacity: 1; transform-origin: center; will-change: transform, opacity;
}
.index-experience .send-invitation svg { display:block; width:100%; height:auto; overflow:visible; }
.index-experience .send-invitation svg path { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.index-experience .hero.is-invalid .name-field { animation: name-nudge .24s ease-in-out 1; }
.index-experience #recipient-name[aria-invalid="true"] { border-bottom-color:#a64f3d; }
.index-experience .landed-photo-wrap {
  display:block; top: 39%; left:50%; width:clamp(190px, 17vw, 245px);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%, -120vh) rotate(0deg);
  transform-origin:50% 0; will-change:transform, opacity;
}
.index-experience .photo-hanging-rope {
  position:absolute; z-index:0; left:50%; top:-42vh; width:2px; height:42vh;
  transform:translateX(-50%); background:linear-gradient(#9b7955,#76583b);
  box-shadow:1px 0 1px rgba(70,48,28,.12);
}
.index-experience .landed-photo {
  z-index:1; position:relative; transition:none; cursor:pointer;
  transform:rotate(-2deg);
}
.index-experience .landed-photo:hover { transform:rotate(-2deg) translateY(-2px); }
.index-experience .landed-photo-wrap .photo-invitation { margin-top:12px; }
.index-experience .hero.is-launched .send-invitation {
  pointer-events:none; animation: send-takeoff 1.15s cubic-bezier(.45,.02,.8,.25) forwards;
}
.index-experience .hero.is-launched .hero-copy { opacity:1; filter:none; }
.index-experience .hero.is-launched .landed-photo-wrap {
  visibility:visible; pointer-events:none; opacity:0;
}
.index-experience .hero.is-photo-arrived .landed-photo-wrap {
  visibility:visible; pointer-events:auto; opacity:1;
  animation: photo-drop-swing 1.45s cubic-bezier(.18,.72,.25,1.08) both,
             photo-gentle-sway 3.8s ease-in-out 1.45s infinite;
}
.index-experience .hero.is-photo-arrived .photo-hanging-rope { height:42vh; }
.index-experience .hero.is-photo-arrived .send-invitation { visibility:hidden; }
.index-experience .hero.is-photo-arrived .hero-copy { opacity:.72; filter:none; }
.index-experience .hero.is-photo-arrived .landed-photo-wrap:focus-within { pointer-events:auto; }
@keyframes send-takeoff {
  0% { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
  16% { opacity:1; transform:translate(-3px,2px) rotate(-12deg) scale(.82); }
  28% { opacity:1; transform:translate(0,0) rotate(0) scale(1.08); }
  48% { opacity:1; transform:translate(18px,-12px) rotate(-18deg) scale(1); }
  72% { opacity:.9; transform:translate(34vw,-34vh) rotate(22deg) scale(.78); }
  100% { opacity:0; transform:translate(65vw,-110vh) rotate(48deg) scale(.4); }
}
@keyframes photo-drop-swing {
  0% { opacity:0; transform:translate(-50%,-120vh) rotate(0deg); }
  66% { opacity:1; transform:translate(-50%,12px) rotate(7deg); }
  82% { opacity:1; transform:translate(-50%,-5px) rotate(-5deg); }
  100% { opacity:1; transform:translate(-50%,0) rotate(3deg); }
}
@keyframes photo-gentle-sway {
  0%,100% { transform:translate(-50%,0) rotate(3deg); }
  25% { transform:translate(-50%,0) rotate(-3.5deg); }
  55% { transform:translate(-50%,0) rotate(2deg); }
  78% { transform:translate(-50%,0) rotate(-1.5deg); }
}
@keyframes name-nudge {
  0%,100% { transform:translateX(0); }
  30% { transform:translateX(-4px); }
  65% { transform:translateX(4px); }
}
@media (max-width:760px) {
  .index-experience .landed-photo-wrap { top:43%; width:min(62vw,225px); }
  .index-experience .photo-hanging-rope { top:-38vh; height:38vh; }
  .index-experience .hero.is-photo-arrived .photo-hanging-rope { height:38vh; }
  .index-experience .send-invitation { flex-basis:42px; width:42px; min-height:42px; }
}
@media (prefers-reduced-motion: reduce) {
  .index-experience .hero.is-launched .send-invitation { animation-duration:.01ms; }
  .index-experience .hero.is-photo-arrived .landed-photo-wrap { animation:none; transform:translate(-50%,0) rotate(0); }
}


/* Refinement: clean arrow, straighter takeoff, rope-top pivot, larger photo. */
.index-experience .send-invitation {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
  background: transparent !important;
  padding: 8px 4px;
}
.index-experience .send-invitation:focus,
.index-experience .send-invitation:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.index-experience .hero.is-launched .send-invitation {
  animation: send-takeoff 1.15s cubic-bezier(.45,.02,.8,.25) forwards;
}
@keyframes send-takeoff {
  0%   { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
  16%  { opacity:1; transform:translate(-3px,1px) rotate(0) scale(.84); }
  29%  { opacity:1; transform:translate(0,0) rotate(0) scale(1.08); }
  48%  { opacity:1; transform:translate(18vw,-1vh) rotate(0) scale(1); }
  75%  { opacity:.9; transform:translate(65vw,-4vh) rotate(0) scale(.88); }
  100% { opacity:0; transform:translate(125vw,-7vh) rotate(0) scale(.72); }
}
.index-experience .landed-photo-wrap {
  width: clamp(245px, 22vw, 310px);
  transform-origin: 50% -100vh;
}
.index-experience .photo-hanging-rope {
  top: -100vh;
  height: 100vh;
  background: linear-gradient(to bottom, rgba(118,88,59,.12), #76583b 72%);
  box-shadow: none;
}
.index-experience .hero.is-photo-arrived .photo-hanging-rope { height: 100vh; }
.index-experience .landed-photo {
  border: 0 !important;
  outline: none !important;
  box-shadow: 0 22px 44px rgba(74,51,28,.2), 0 2px 6px rgba(74,51,28,.1);
}
.index-experience .landed-photo:focus,
.index-experience .landed-photo:focus-visible {
  outline: none !important;
}
.index-experience .landed-photo img {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.index-experience .hero.is-photo-arrived .landed-photo-wrap {
  animation: photo-drop-swing 1.55s cubic-bezier(.2,.8,.25,1.16) both,
             photo-gentle-sway 4.2s ease-in-out 1.55s infinite;
}
@keyframes photo-drop-swing {
  0%   { opacity:0; transform:translate(-50%,-120vh) rotate(0deg); }
  48%  { opacity:1; transform:translate(-50%,14px) rotate(8deg); }
  66%  { opacity:1; transform:translate(-50%,-5px) rotate(-6deg); }
  82%  { opacity:1; transform:translate(-50%,2px) rotate(4deg); }
  100% { opacity:1; transform:translate(-50%,0) rotate(2deg); }
}
@keyframes photo-gentle-sway {
  0%,100% { transform:translate(-50%,0) rotate(2deg); }
  24% { transform:translate(-50%,0) rotate(-5deg); }
  52% { transform:translate(-50%,0) rotate(3.5deg); }
  76% { transform:translate(-50%,0) rotate(-2deg); }
}
@media (max-width:760px) {
  .index-experience .landed-photo-wrap { width:min(76vw,280px); }
  .index-experience .photo-hanging-rope { top:-100vh; height:100vh; }
  .index-experience .hero.is-photo-arrived .photo-hanging-rope { height:100vh; }
}
@media (prefers-reduced-motion: reduce) {
  .index-experience .hero.is-photo-arrived .landed-photo-wrap { animation:none; transform:translate(-50%,0) rotate(0); }
}

/* PASS 6 — softer misty mountain atmosphere and a gentler photo arrival. */
.index-experience .hero {
  background:
    linear-gradient(180deg,
      rgba(248,239,222,.97) 0%,
      rgba(248,237,216,.88) 26%,
      rgba(248,237,216,.42) 52%,
      rgba(243,231,208,.16) 76%,
      rgba(243,231,208,.38) 100%),
    url("Assets/foggy-mountain-bg.jpg") center bottom / 100% 58% no-repeat,
    radial-gradient(ellipse at 50% 15%, rgba(255,249,235,.96) 0%, rgba(248,237,216,.72) 46%, transparent 76%),
    linear-gradient(180deg, #f5e9d2 0%, #f2e3c8 57%, #f0dfbf 100%);
}
.index-experience .horizon { display: none !important; }
.index-experience .landing-ground { opacity: .24; }

/* A softer, less abrupt notification drop: gradual reveal, smaller overshoot. */
.index-experience .hero.is-photo-arrived .landed-photo-wrap {
  animation:
    photo-drop-swing 1.85s cubic-bezier(.16, 1, .3, 1) both,
    photo-gentle-sway 4.6s ease-in-out 1.85s infinite;
}
@keyframes photo-drop-swing {
  0% {
    opacity: 0;
    transform: translate(-50%, -120vh) rotate(0deg);
  }
  26% {
    opacity: 0;
    transform: translate(-50%, -72vh) rotate(0deg);
  }
  43% {
    opacity: .42;
    transform: translate(-50%, -37vh) rotate(1deg);
  }
  61% {
    opacity: 1;
    transform: translate(-50%, 8px) rotate(4.5deg);
  }
  76% {
    opacity: 1;
    transform: translate(-50%, -3px) rotate(-3deg);
  }
  89% {
    opacity: 1;
    transform: translate(-50%, 1px) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) rotate(1.5deg);
  }
}
@keyframes photo-gentle-sway {
  0%, 100% { transform: translate(-50%, 0) rotate(1.5deg); }
  24% { transform: translate(-50%, 0) rotate(-3.2deg); }
  51% { transform: translate(-50%, 0) rotate(2.6deg); }
  76% { transform: translate(-50%, 0) rotate(-1.3deg); }
}
@media (max-width: 760px) {
  .index-experience .hero {
    background-size: auto, auto 48%, auto, auto;
    background-position: center, center bottom, center, center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .index-experience .hero.is-photo-arrived .landed-photo-wrap {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0) rotate(0deg);
  }
}


/* PASS 7 — background workaround: preserve the landscape's natural proportions and blend it into the paper tone. */
.index-experience .hero {
  background-color: #f3e7d0 !important;
  background-image: linear-gradient(180deg, rgba(248,239,222,.78) 0%, rgba(248,237,216,.48) 28%, rgba(243,231,208,.14) 58%, rgba(243,231,208,.10) 78%, rgba(243,231,208,.42) 100%), url("Assets/foggy-mountain-bg.jpg") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center bottom !important;
  background-size: 100% 100%, cover !important;
}
@media (max-width: 760px) {
  .index-experience .hero { background-size: 100% 100%, auto 58% !important; background-position: center, center bottom !important; }
}


/* REFERENCE MATCH — warm textured paper with quiet rolling sand ridges, not mountains. */
.index-experience .hero {
  background-color: #f5e8d0 !important;
  background-image:
    radial-gradient(ellipse at 50% 18%, rgba(255,250,238,.72) 0%, rgba(250,240,220,.28) 48%, transparent 78%),
    linear-gradient(180deg, #f7ecd7 0%, #f4e5ca 64%, #eddbb9 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  position: relative;
}
.index-experience .hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  opacity: .94;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 330' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C130 65 205 112 330 108 C450 102 475 76 585 95 C700 115 770 150 900 144 C1030 139 1090 180 1210 160 C1350 137 1450 60 1600 50 L1600 330 L0 330 Z' fill='%23e6d0a9' fill-opacity='.64'/%3E%3Cpath d='M0 150 C145 136 240 160 350 184 C480 211 600 160 730 170 C865 180 940 222 1075 207 C1220 190 1330 160 1440 178 C1510 190 1560 205 1600 198 L1600 330 L0 330 Z' fill='%23d9bf91' fill-opacity='.57'/%3E%3Cpath d='M0 236 C180 220 270 250 420 242 C570 232 680 196 820 215 C970 235 1090 270 1230 255 C1390 236 1500 220 1600 230 L1600 330 L0 330 Z' fill='%23e9d7b5' fill-opacity='.86'/%3E%3Cpath d='M0 278 C160 255 270 278 430 275 C610 270 730 244 900 265 C1070 286 1200 303 1370 282 C1470 270 1540 265 1600 272 L1600 330 L0 330 Z' fill='%23d5b98a' fill-opacity='.3'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
}
.index-experience .horizon { display: none !important; }
/* Keep the page copy above the hills and give the paper a faint tactile grain. */
.index-experience .hero-copy { z-index: 5; }
.index-experience .paper-grain {
  z-index: 20;
  opacity: .085;
  mix-blend-mode: multiply;
}
/* Reference composition: airy upper space and restrained sandy color near the bottom. */
@media (max-width: 760px) {
  .index-experience .hero::before { height: 28%; opacity: .82; }
}

@media (min-width: 761px) {
  .index-experience .hero-copy { top: clamp(92px, 13.5vh, 128px); }
  .index-experience .hero-copy h1 {
    margin-top: clamp(36px, 6.4vh, 58px);
    margin-bottom: clamp(26px, 3.8vh, 36px);
  }
}