.photo-journey{isolation:isolate;background:#f7edda;height:250svh;position:relative}.photo-stage{--photo-progress:0;--photo-swap:0;--field-grow:0;--photo-enter:0;isolation:isolate;perspective:1400px;background:#faf6ef;height:100svh;min-height:650px;position:sticky;top:0;overflow:hidden}.photo-atmosphere{z-index:-1;opacity:calc(.25 + var(--field-grow) * .75);background:radial-gradient(at 50% 48%,#fffdf7 5%,#f7e8c8 58%,#dec28a 110%);position:absolute;inset:0}.photo-atmosphere:after{content:"";background:linear-gradient(#faf6ef,#0000 23% 78%,#faf6ef99);position:absolute;inset:0}.photo-heading{z-index:5;text-align:center;transform:translateY(calc((1 - var(--photo-enter)) * 18px));position:absolute;top:6%;left:20px;right:20px}.photo-heading p{letter-spacing:3px;color:#7a6140;margin-bottom:13px;font:12px/1.5 Arial,sans-serif}.photo-heading h2{letter-spacing:-1.4px;color:#624b32;font-size:clamp(30px,3.4vw,52px)}.photo-heading h2 em{color:#a25d3d}.photo-pair{z-index:2;perspective:1600px;justify-content:center;align-items:center;gap:clamp(28px,5vw,84px);display:flex;position:absolute;inset:23% 0 12%}.memory{width:min(33vw,39svh);height:100%;max-height:61svh;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 20px 22px #6e4b2526);flex-shrink:0;margin:0;position:relative}.memory img{object-fit:cover;object-position:50% 52%;border:7px solid #fffaf0;border-radius:2px;outline:1px solid #b38e4929;width:100%;height:100%}.memory-laugh{transform:translate3d(calc((1 - var(--photo-enter)) * -55px),calc(-22px + var(--photo-progress) * 27px),0) rotateY(calc(8deg - var(--photo-progress) * 6deg)) rotate(calc(-5deg + var(--photo-progress) * 3deg))}.memory-embrace{transform:translate3d(calc((1 - var(--photo-enter)) * 55px),calc(18px - var(--photo-progress) * 27px),35px) rotateY(calc(-8deg + var(--photo-progress) * 6deg)) rotate(calc(5deg - var(--photo-progress) * 3deg))}.memory figcaption{text-align:center;color:#795d3d;width:100%;font:italic 18px/1.4 Georgia,serif;position:absolute;top:calc(100% + 15px)}.photo-wind{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.photo-wind-back{z-index:1}.photo-wind-front{z-index:6}.wheat-garden{pointer-events:none;display:contents}.wheat{left:var(--x);height:var(--stalk-height);width:calc(var(--stalk-height) * .67);transform:translateX(-50%) rotate(var(--tilt)) scaleX(var(--flip));transform-origin:50% 100%;pointer-events:none;position:absolute;bottom:-12%}.wheat-reveal{transform-origin:50% 100%;width:100%;height:100%;transform:translateY(calc((1 - var(--field-grow)) * 70%)) scaleY(calc(.28 + var(--field-grow) * .72));opacity:clamp(0,calc((var(--field-grow) - var(--delay)) * 4),1);will-change:transform;-webkit-mask-image:linear-gradient(#000 88%,#0000);mask-image:linear-gradient(#000 88%,#0000)}.wheat img{object-fit:contain;transform-origin:50% 96%;width:100%;height:100%;animation:wheat-breeze var(--sway-time) ease-in-out var(--sway-offset) infinite alternate}.wheat-far{z-index:0;filter:blur(5px);opacity:.3}.wheat-back{z-index:1;filter:blur(1px);opacity:.75}.wheat-front{z-index:4;opacity:.9}.wheat-near{z-index:4;filter:blur(2px);opacity:.8}.photo-bottom{z-index:7;justify-content:space-between;align-items:center;gap:15px;display:flex;position:absolute;bottom:3.2%;left:4%;right:4%}.photo-stage:after{content:"";z-index:6;pointer-events:none;background:linear-gradient(#0000,#faf6efe8);height:11%;position:absolute;inset:auto 0 0}.photo-bottom p{text-shadow:0 1px 8px #faf6ef,0 0 16px #faf6ef;color:#755736;text-align:center;font:italic 19px/1.5 Georgia,serif}.photo-bottom>a{background:#faf6ef9c;border:1px solid #97764c55;border-radius:50%;padding:12px;display:flex}.is-paused .wheat img,.is-offscreen .wheat img{animation-play-state:paused}@keyframes wheat-breeze{0%{transform:rotate(-2deg)}to{transform:rotate(3deg)}}@media (min-width:1600px){.memory{width:40svh}.photo-pair{gap:7vw}}@media (max-width:650px){.photo-journey{height:265svh}.photo-stage{min-height:650px}.photo-heading{top:8%;left:28px;right:28px}.photo-heading p{letter-spacing:2px;margin-bottom:15px;font-size:11px}.photo-heading h2{max-width:320px;margin:auto;font-size:35px;line-height:1.1}.photo-heading em{display:block}.photo-pair{perspective:1000px;display:block;inset:29% 0 15%}.memory{width:min(74vw,36svh);height:100%;max-height:52svh;position:absolute;top:0;left:50%}.memory img{border-width:5px}.memory-laugh{z-index:2;transform:translate3d(calc(-50% - var(--photo-swap) * 72%),calc(var(--photo-swap) * -12px),calc(var(--photo-swap) * -100px)) rotate(calc(-4deg - var(--photo-swap) * 12deg));opacity:calc(1 - var(--photo-swap) * .75)}.memory-embrace{z-index:3;transform:translate3d(calc(62% - var(--photo-swap) * 112%),calc(20px - var(--photo-swap) * 20px),0) rotate(calc(12deg - var(--photo-swap) * 9deg));opacity:calc(.35 + var(--photo-swap) * .65)}.memory figcaption{text-shadow:0 0 8px #faf6ef;font-size:16px;top:calc(100% + 14px)}.wheat{width:calc(var(--stalk-height) * .4);height:calc(var(--stalk-height) * .68);bottom:-3%}.wheat-front{height:calc(var(--stalk-height) * .65);opacity:.85;bottom:-4%}.wheat-far{opacity:.22}.wheat-near{opacity:.7}.photo-bottom{gap:10px;bottom:3%;left:20px;right:20px}.photo-bottom p{max-width:210px;font-size:16px}.photo-bottom>a{padding:8px}.photo-bottom .motion-toggle{padding:10px}}@media (max-height:700px) and (min-width:651px){.photo-heading{top:4%}.photo-heading h2{font-size:32px}.photo-pair{top:23%;bottom:17%}.memory{max-height:57svh}.photo-bottom{bottom:2%}}@media (prefers-reduced-motion:reduce){.photo-journey{height:auto}.photo-stage{height:auto;min-height:850px;padding:80px 24px 100px;position:relative}.photo-heading{position:relative;inset:auto;transform:none}.photo-pair{gap:36px;margin:55px auto 80px;position:relative;inset:auto}.memory{opacity:1;will-change:auto;width:320px;height:480px;max-height:none;position:relative;inset:auto;transform:none}.wheat-reveal{will-change:auto}.photo-bottom .motion-toggle{display:none}}@media (prefers-reduced-motion:reduce) and (max-width:650px){.photo-pair{flex-direction:column;align-items:center;gap:65px;display:flex}.memory{aspect-ratio:2/3;width:80vw;max-width:320px;height:auto}.photo-bottom p{max-width:none}.photo-stage{padding-inline:20px}.photo-heading h2{font-size:32px}}
