:root{color-scheme:dark;--ivory:#faf3e4;--muted:#c9d4ce;--gold:#e9c994;--green:#153d38;--progress:0;--dawn:0;--camera:0;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#102a31;color:var(--ivory);overflow:hidden}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button{color:inherit}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}#experience{height:100svh;min-height:580px;position:relative;isolation:isolate;overflow:hidden;background:#18363b}.landscape,.atmosphere,.dawn,#garden,.vignette{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.landscape{background-image:url('assets/garden.png');background-size:cover;background-position:center 58%;transform:scale(calc(1.04 + var(--camera)*.08));filter:saturate(.8);z-index:-5}.atmosphere{z-index:-4;background:linear-gradient(180deg,rgba(4,26,35,.75),rgba(7,32,39,.46) 42%,rgba(6,29,34,.32) 68%,rgba(5,27,31,.84));opacity:calc(1 - var(--dawn)*.34)}.dawn{z-index:-3;background:radial-gradient(ellipse at 52% 36%,rgba(248,187,146,.38),rgba(83,112,100,.05) 60%);opacity:var(--dawn);mix-blend-mode:screen}#garden{z-index:-2}.vignette{z-index:-1;background:linear-gradient(180deg,rgba(3,23,29,.2),transparent 25%,transparent 70%,rgba(5,26,30,.3))}header{height:108px;display:flex;align-items:center;justify-content:space-between;padding:0 4.2%;position:relative;z-index:6}.wordmark{text-decoration:none;display:flex;align-items:center;gap:12px;color:var(--ivory);font-family:Georgia,'Times New Roman',serif;font-size:28px;letter-spacing:-1px}.wordmark svg{width:32px;height:32px;color:var(--gold)}.wordmark-dot{color:var(--gold)}.header-date{font-size:9px;letter-spacing:2.8px;color:#d3ded4;position:absolute;left:50%;transform:translateX(-50%)}.header-date i{font-style:normal;padding:0 9px}nav{display:flex;gap:24px;align-items:center}nav button{background:none;border:0;padding:10px 0;display:flex;align-items:center;gap:8px;font-size:11px}.edit-btn{border-bottom:1px solid #a1b6ad66!important}.edit-btn svg{width:14px}.sound svg{width:18px}.sound-dot{width:4px;height:4px;background:#8caaa2;border-radius:50%}.sound[aria-pressed=true] .sound-dot{background:#eacc93;box-shadow:0 0 9px #f5c876}.panel{position:absolute;text-align:center;left:0;width:100%;pointer-events:none;transition:opacity 1s,transform 1.3s}.intro{top:21%;padding:0 16px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:18px;font-size:9px;letter-spacing:3px;font-weight:400;color:#e8ddbf}.eyebrow>span{height:1px;width:29px;background:#b4b69d70}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(46px,5.7vw,88px);line-height:1.14;letter-spacing:-2.5px;margin:25px 0 22px;text-shadow:0 3px 35px #092c3455}h1 em{color:#ead5ae;font-weight:400}.intro>p{font-size:12px;color:#d1dbd5;letter-spacing:.3px;line-height:1.7}.seed-button{position:absolute;left:50%;top:65%;width:180px;height:150px;transform:translate(-50%,-30%);background:transparent;border:0;display:flex;align-items:center;justify-content:center;flex-direction:column;touch-action:manipulation;transition:opacity .7s,transform .7s}.seed-halo{position:absolute;width:150px;height:150px;top:-20px;border-radius:50%;background:radial-gradient(ellipse,#fdd29128,transparent 66%);animation:breathe 3s ease-in-out infinite}.seed-ring{position:absolute;top:7px;width:73px;height:73px;border:1px solid #dcc39438;border-radius:50%;animation:ripple 4s ease-out infinite}.ring-two{animation-delay:2s}.seed-core{position:absolute;top:23px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 37% 30%,#fffefa,#fff5cd 20%,#ebbc74 56%,#94654d 100%);box-shadow:0 0 25px #f6d5a27a,0 0 75px #ffe5a13a,inset 0 0 10px #fff4e5;animation:float 4s ease-in-out infinite}.seed-core:before,.seed-core:after{content:'';position:absolute;inset:8px -6px;border:1px solid #fff6d395;transform:rotate(-35deg);border-radius:50%}.seed-core:after{transform:rotate(55deg)}.seed-label{font-size:9px;letter-spacing:2.8px;margin-top:97px;color:#f4e8cb}.seed-sub{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#aabfb5;margin-top:10px}.seed-button:hover .seed-core{box-shadow:0 0 35px #ffe3b4,0 0 100px #ffe4a66a}.seed-button:active{transform:translate(-50%,-30%) scale(.94)}footer{position:absolute;left:4.2%;right:4.2%;bottom:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#b7ccc0;pointer-events:none}.footer-note{font-size:8px;letter-spacing:2px}.footer-date{font-family:Georgia,serif;font-size:25px;letter-spacing:3px;color:#e2d9bf}.footer-date span{font-size:15px;color:#93a99d}.chapters{display:flex;align-items:center;gap:17px;font-size:10px}.chapter{opacity:.42;transition:opacity 1s;color:#e6e6d5}.chapter i{font-style:normal;font-size:8px;color:#dcbd88;margin-right:6px}.chapter.active{opacity:1}.chapters b{display:block;width:35px;height:1px;background:#e1e8cc38}.timeline{height:2px;background:#d7c99f15;position:absolute;bottom:0;left:0;right:0}.timeline span{display:block;width:calc(var(--progress)*100%);height:100%;background:#e5c893;box-shadow:0 0 10px #e5c893}.journey-copy{top:22%;opacity:0;transform:translateY(15px)}.journey-copy p{font-family:Georgia,serif;font-size:clamp(30px,3.5vw,52px);font-style:italic;color:#f4e9d1;margin:0 0 15px;letter-spacing:-.5px}.journey-copy span{font-size:11px;letter-spacing:1.5px;color:#cbd9ce}.reveal{inset:0;opacity:0;transform:translateY(8px)}.reveal>.eyebrow{position:absolute;top:23%;left:0;width:100%}.reveal-bottom{position:absolute;top:66%;width:100%;padding:0 20px}.reveal-bottom>p{font-size:clamp(25px,3vw,43px);font-family:Georgia,serif;letter-spacing:-.5px;margin:0 0 15px}.reveal-bottom>p em{color:#f1d0a3}.reveal-bottom>span{font-size:9px;letter-spacing:3px;color:#cdd8c4}.letter-button{pointer-events:auto;display:flex;gap:17px;align-items:center;justify-content:center;border:1px solid #e1c99577;background:#123e3a85;padding:15px 22px;border-radius:40px;margin:27px auto 0;font-size:11px;backdrop-filter:blur(14px);transition:background .3s,transform .3s}.letter-button:hover{background:#2d574ed9;transform:translateY(-3px)}.little-flower{font-size:23px;color:#ebcfa7;line-height:20px}.text-button{background:transparent;border:0;font-size:11px;display:flex;align-items:center;gap:8px;color:#d6dfd1;padding:10px}.text-button span{font-size:19px}.text-button svg{width:16px}.skip{position:absolute;right:4.2%;bottom:96px;display:none}.final-actions{position:absolute;right:4.2%;bottom:96px;display:none;gap:12px}.final-actions button{font-size:10px}.toast{position:fixed;bottom:85px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#f7f1e3;color:#24463e;border-radius:30px;padding:13px 24px;font-size:12px;z-index:100;transition:.3s;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}#experience[data-stage=growing] .intro,#experience[data-stage=flight] .intro,#experience[data-stage=final] .intro{opacity:0;transform:translateY(-25px)}#experience:not([data-stage=intro]) .seed-button{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.2)}#experience[data-stage=growing] .journey-copy,#experience[data-stage=flight] .journey-copy{opacity:1;transform:translateY(0)}#experience[data-stage=growing] .skip,#experience[data-stage=flight] .skip{display:flex}#experience[data-stage=final] .reveal{opacity:1;transform:translateY(0)}#experience[data-stage=final] .final-actions{display:flex}#experience:not([data-stage=final]) .letter-button{pointer-events:none}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.modal{color-scheme:light;border:1px solid #daceb6;border-radius:5px;background:#f7f2e7;color:#23453d;box-shadow:0 30px 120px #041f29a1;padding:48px;width:min(510px,calc(100vw - 32px));max-height:90svh;overflow:auto}.modal::backdrop{background:#071d2699;backdrop-filter:blur(12px)}.modal[open]{animation:modal-in .4s ease both}.close-modal{position:absolute;right:19px;top:14px;background:none;border:0;color:#64766a;font-size:29px;font-weight:200;line-height:1;padding:5px}.modal-kicker{font-size:8px;letter-spacing:2.2px;color:#8c8b70}.modal h2{font-family:Georgia,serif;font-size:41px;line-height:1.16;font-weight:400;letter-spacing:-1px;margin:23px 0 18px}.modal h2 em{color:#9c7558}.form-description{font-size:12px;line-height:1.7;color:#718074;margin-bottom:28px}label{font-size:11px;display:block;margin:19px 0 9px;color:#4c6557}label>span{color:#8d9686;font-size:10px}input,textarea{display:block;background:#fffaf1;border:1px solid #dedbcd;border-radius:3px;color:#26483b;width:100%;padding:12px 13px;outline:none;font-size:14px;line-height:1.7}input:focus,textarea:focus{border-color:#8f9d7b;box-shadow:0 0 0 3px #b9c4a227}textarea{resize:vertical;min-height:95px}.primary{background:#244d40;border:0;color:#fff7e4;padding:16px 18px;margin-top:27px;width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12px;border-radius:3px}.primary:hover{background:#35624f}.local-note{font-size:10px;color:#8b9280;text-align:center;margin:14px 0 0}.letter-modal{padding:65px 46px 38px;text-align:center;width:min(550px,calc(100vw - 32px));background:radial-gradient(ellipse at 90% 0%,#e8e3cf,transparent 48%),#faf5e9}.letter-art{font-size:60px;color:#9b9876;font-family:Georgia,serif;font-weight:400;margin-bottom:25px}.letter-modal h2{margin-bottom:28px}.letter-modal #letter-message{font-family:Georgia,serif;font-size:19px;line-height:1.9;color:#526255;white-space:pre-wrap;overflow-wrap:anywhere}.letter-signature{display:flex;flex-direction:column;gap:12px;margin:30px 0;color:#8c927a;font-size:10px}.letter-signature strong{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#8d7056;font-size:20px;overflow-wrap:anywhere}.letter-return{border:0;border-top:1px solid #d6d5c3;background:transparent;padding:20px 0 0;color:#556e58;font-size:10px;letter-spacing:.7px}.letter-return span{padding-left:14px}@keyframes float{50%{transform:translateY(-8px)}}@keyframes breathe{50%{transform:scale(1.25);opacity:.65}}@keyframes ripple{0%{transform:scale(.65);opacity:0}20%{opacity:.7}100%{transform:scale(1.8);opacity:0}}@keyframes modal-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1600px){.intro{top:22%}.seed-button{top:65%}}@media(max-height:730px) and (min-width:701px){header{height:80px}.intro{top:18%}h1{font-size:62px;margin:20px 0 15px}.seed-button{top:64%}.reveal-bottom{top:63%}.letter-button{margin-top:18px}footer{bottom:24px}}@media(max-width:700px){#experience{min-height:560px}header{height:86px;padding:0 23px}.wordmark{font-size:25px;gap:8px}.wordmark svg{width:26px;height:26px}.header-date{display:none}nav{gap:17px}.sound>span:not(.sound-dot){display:none}.edit-btn{font-size:10px}.edit-btn svg{display:none}.landscape{background-position:51% 50%}.atmosphere{background:linear-gradient(180deg,#062430aa,#082b3466 48%,#06252e44 65%,#09282bdf)}.intro{top:23%}.eyebrow{font-size:8px;letter-spacing:2.1px;gap:12px}.eyebrow>span{width:20px}h1{font-size:clamp(42px,10.4vw,66px);letter-spacing:-1.8px;line-height:1.19;margin:26px 0 21px}.intro>p{max-width:265px;margin:auto;font-size:11px;line-height:1.8}.seed-button{top:64%}.seed-label{font-size:8px;letter-spacing:2.3px}.seed-sub{font-size:11px}footer{left:24px;right:24px;bottom:29px;justify-content:center}.footer-note,.footer-date{display:none}.chapters{gap:12px;font-size:9px}.chapters b{width:24px}.chapter i{font-size:7px;margin-right:3px}.journey-copy{top:25%;padding:0 22px}.journey-copy p{font-size:31px;line-height:1.3}.journey-copy span{font-size:10px;letter-spacing:.8px}.reveal>.eyebrow{top:28%}.reveal-bottom{top:62%}.reveal-bottom>p{font-size:29px;line-height:1.3}.reveal-bottom>span{font-size:8px;letter-spacing:2px}.letter-button{font-size:10px;padding:13px 16px;gap:12px;margin-top:24px}.final-actions{left:0;right:0;bottom:77px;justify-content:center;gap:18px}.skip{right:22px;bottom:76px}.modal{padding:36px 25px}.modal h2{font-size:36px}.letter-modal{padding:43px 28px 28px}.letter-modal #letter-message{font-size:18px}.letter-art{font-size:48px;margin-bottom:20px}}
/* Hidden YouTube player for the background song. Kept rendered (not display:none) so browsers still let it play. */
.yt-holder{position:fixed;left:0;bottom:0;width:200px;height:200px;opacity:0;pointer-events:none;overflow:hidden}

/* Portrait layout: iPhone 11 Pro, including Safari chrome and safe areas. */
@media(max-width:430px){
 header{height:calc(80px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px));}
 .intro{top:23%;} h1{font-size:43px;line-height:1.2;letter-spacing:-1.6px;}
 .edit-btn{min-height:44px}.sound{min-width:38px;min-height:44px;justify-content:center}nav{gap:10px}
 .seed-button{top:63%;width:200px;height:155px}
 footer{bottom:calc(24px + env(safe-area-inset-bottom,0px));}
 .final-actions{bottom:calc(70px + env(safe-area-inset-bottom,0px));}
 .final-actions button,.skip{min-height:44px}
 .skip{bottom:calc(69px + env(safe-area-inset-bottom,0px));}
 .reveal-bottom{top:61%;}.reveal-bottom>p{font-size:27px}.letter-button{min-height:48px}
 .modal{max-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 30px)}
 input,textarea{font-size:16px}.close-modal{min-width:44px;min-height:44px;right:8px;top:6px}
}
@media(max-width:700px) and (max-height:700px){
 #experience{min-height:540px}header{height:calc(67px + env(safe-area-inset-top,0px))}
 .intro{top:20%}.intro .eyebrow{font-size:7px}h1{font-size:39px;margin:17px 0 15px;line-height:1.14}.intro>p{font-size:10px;max-width:250px}
 .seed-button{top:61%}.seed-label{margin-top:87px}.seed-sub{margin-top:7px}
 .journey-copy{top:22%}.journey-copy p{font-size:27px}
 .reveal>.eyebrow{top:24%}.reveal-bottom{top:59%}.reveal-bottom>p{font-size:25px;margin-bottom:10px}.letter-button{margin-top:17px;padding:10px 14px}
 .final-actions{bottom:calc(53px + env(safe-area-inset-bottom,0px))}footer{bottom:calc(18px + env(safe-area-inset-bottom,0px))}.skip{bottom:calc(51px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:700px){.landscape{background-image:url('assets/garden-portrait.png');background-position:center center;}}

#experience{position:fixed;inset:0;overflow:clip;}

/* Clear music control. */
.sound.playing .sound-dot{animation:music-beat 1s ease-in-out infinite;background:#ffe0a0;box-shadow:0 0 7px #ffe0a0}
@keyframes music-beat{50%{transform:scale(1.8);opacity:.5}}
#experience[data-stage=growing] .landscape{transition:filter 5s;filter:saturate(1.03)}
.journey-copy p{font-size:clamp(27px,3.2vw,46px)}
@media(max-width:700px){.sound>.sound-label{display:inline!important;font-size:9px}.sound{gap:5px}.sound-dot{display:none}.edit-btn{font-size:9px}nav{gap:12px}.wordmark{font-size:23px;gap:7px}.wordmark svg{width:24px}.journey-copy{top:23%;padding:0 25px}.journey-copy p{font-size:27px;line-height:1.35}.journey-copy span{font-size:10px;letter-spacing:.2px}.seed-sub{font-size:10px}}

:root{--ivory:#f1faf7;--muted:#c4e0da;--gold:#bce2df;--green:#1d544c}
h1 em,.reveal-bottom>p em{color:#c1e7eb}.eyebrow{color:#d4efdf}.seed-label{color:#e1f8ed}.seed-sub{color:#bdddd5}.footer-date{color:#d1ede7}.chapter i{color:#b7dfd0}.timeline span{background:#a9e8dc;box-shadow:0 0 10px #a9e8dc}
.atmosphere{background:linear-gradient(180deg,rgba(9,38,49,.58),rgba(11,52,63,.32) 42%,rgba(12,50,56,.18) 68%,rgba(7,38,43,.72));opacity:calc(1 - var(--dawn)*.22)}
.dawn{background:radial-gradient(ellipse at 52% 36%,rgba(181,235,224,.28),rgba(126,193,208,.06) 60%)}
.seed-core{background:radial-gradient(circle at 37% 30%,#fff,#effff9 20%,#aee1de 56%,#6599a6 100%);box-shadow:0 0 25px #b8ede87a,0 0 75px #a1e8dd3a,inset 0 0 10px #e5fff9}.seed-halo{background:radial-gradient(ellipse,#b6f5df33,transparent 66%)}.seed-ring{border-color:#b0e2d54d}.seed-core:before,.seed-core:after{border-color:#e6fff9aa}
.letter-button{border-color:#c2e2d77a;background:#164d4ca6}.little-flower{color:#c3e6dc}.letter-button:hover{background:#296a5ed9}
.modal{background:#f0f7f1;color:#244d49;border-color:#c9dcd1}.modal h2 em{color:#57948f}.modal-kicker{color:#6a9588}.letter-modal{background:radial-gradient(ellipse at 90% 0%,#d9eee8,transparent 48%),#f0f7f1}.letter-art{color:#86afa0}.letter-signature strong{color:#578a82}.letter-modal #letter-message{color:#44675c}input,textarea{background:#f8fcf8;border-color:#cbded4}.primary{background:#2b665b}.toast{background:#ecf8f0}.sound.playing .sound-dot{background:#bdebdc;box-shadow:0 0 7px #c8f8ed}

@media(max-width:700px){.landscape{background-image:url('assets/garden-blue-portrait.png')}}

.landscape{background-image:url('assets/garden-blue.png')}
@media(max-width:700px){.landscape{background-image:url('assets/garden-blue-portrait.png')}}

/* Long personal letter: comfortable line lengths and native vertical scrolling. */
.letter-modal #letter-message{text-align:left;font-size:18px;line-height:1.85}.letter-modal{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9cbdad transparent}.letter-signature{align-items:flex-end;text-align:right}
@media(max-width:700px){.letter-modal #letter-message{font-size:17px;line-height:1.85}.letter-modal{padding-left:25px;padding-right:25px}}

/* Lora carries every Vietnamese diacritic; Georgia breaks letters such as "ề". Self-hosted, so no font CDN is needed. */
@font-face{font-family:Lora;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/lora-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lora;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/lora-vietnamese-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Lora;font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/lora-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lora;font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/lora-vietnamese-italic.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
h1,.seed-sub,.footer-date,.journey-copy p,.reveal-bottom>p,.modal h2,.letter-art,.letter-modal #letter-message,.letter-signature strong{font-family:Lora,Georgia,'Times New Roman',serif}

/* White text and the white flower name sat on a bright lake. A deeper middle band and a dark halo on every white text keep them readable without losing the scene. */
.atmosphere{background:radial-gradient(ellipse 90% 40% at 50% 50%,rgba(4,30,38,.42),transparent 75%),linear-gradient(180deg,rgba(9,38,49,.62),rgba(11,52,63,.42) 42%,rgba(12,50,56,.36) 68%,rgba(7,38,43,.76));opacity:calc(1 - var(--dawn)*.12)}
h1,.intro>p,.eyebrow,.seed-label,.seed-sub,.journey-copy,.reveal-bottom>p,.plant-hint,.final-actions,.skip,.chapters,.sound{text-shadow:0 2px 18px rgba(3,24,31,.8),0 1px 4px rgba(3,24,31,.65)}

/* Header holds only the music control, kept on the right. */
header nav{margin-left:auto}

/* Final screen order: eyebrow, flower name, plant hint, wish. The name is canvas-drawn; JS publishes its box as --name-top / --name-bottom. */
.reveal>.eyebrow{top:calc(var(--name-top,23%) - 26px)}
.plant-hint{position:absolute;left:0;width:100%;top:calc(var(--name-bottom,50%) + 8px);margin:0;padding:0 20px;text-align:center;opacity:0;transition:opacity 1s}
#experience[data-stage=final] .plant-hint{opacity:1;transition-delay:1.2s}
/* Blinks until the garden is in bloom, so the invitation is not missed. */
.plant-pill{display:inline-block;padding:7px 16px;border:1px solid #c8f3e877;border-radius:30px;background:#0b343a8c;font-family:Lora,Georgia,serif;font-style:italic;font-size:15px;color:#effffa;animation:hint-blink 1.4s ease-in-out infinite}
.plant-pill b{display:inline-block;font-weight:400;color:#c8f3e8;animation:hint-bloom 2.6s ease-in-out infinite}
.plant-hint.done .plant-pill{animation:none}
@keyframes hint-blink{0%,100%{opacity:1;box-shadow:0 0 0 0 #c8f3e800}50%{opacity:.45;box-shadow:0 0 18px 3px #c8f3e866}}
@keyframes hint-bloom{50%{transform:scale(1.35) rotate(25deg)}}

/* The second journey line sits low, clear of the name forming in the upper third; it fades out before moving. */
.journey-copy.low{top:60%}
.journey-copy.swapping{opacity:0!important;transition:opacity .5s}

/* Big card in the middle once the garden is in bloom. */
.gift-stage{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 24px;background:radial-gradient(ellipse 85% 55% at 50% 52%,rgba(3,22,28,.66),rgba(3,22,28,.28) 70%,transparent);opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s .8s}
#experience.garden-done:not(.card-opened) .gift-stage{opacity:1;visibility:visible;transition:opacity .8s}
.gift-note{margin:0;text-align:center;font-family:Lora,Georgia,serif;font-style:italic;font-size:18px;line-height:1.5;color:#effffa;text-shadow:0 2px 18px rgba(3,24,31,.85)}
.gift-note span{display:block;font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:11px;letter-spacing:3px;margin-bottom:6px;color:#c8f3e8}
.gift-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(300px,calc(100vw - 56px));padding:28px 22px 24px;border:1px solid #ffffffc0;border-radius:22px;background:linear-gradient(160deg,#fbfefb,#e3f3ec 55%,#cfe8df);color:#21473f;overflow:hidden;box-shadow:0 30px 70px #020f13b3;opacity:0;transform:scale(.6) rotate(-6deg);transition:transform 1s cubic-bezier(.2,.9,.25,1.3),opacity .6s}
#experience.garden-done:not(.card-opened) .gift-card{opacity:1;transform:none;animation:card-float 4.5s 1.2s ease-in-out infinite,card-call 2.4s 1s ease-out infinite}
.gift-card:before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffffd0 48%,transparent 66%);transform:translateX(-130%);animation:card-shine 3.8s 1.4s ease-in-out infinite;pointer-events:none}
.gift-card .card-seal{width:64px;height:64px;font-size:30px;margin-bottom:8px}
.gift-kicker{font-size:10px;letter-spacing:2.6px;color:#5f8c80}
.gift-title{font-family:Lora,Georgia,'Times New Roman',serif;font-style:italic;font-size:27px;color:#1f4a42;text-align:center;text-wrap:balance}
.gift-cta{position:relative;margin-top:12px;padding:11px 20px;border-radius:30px;background:#2b665b;color:#f4fff9;font-size:13px;font-weight:600}
.gift-cta b{font-weight:400;padding-left:4px;display:inline-block;animation:cta-nudge 1.6s ease-in-out infinite}

/* The small card under the wish appears only after the letter has been opened once, for re-reading. */
#experience:not(.card-opened) .card-button{opacity:0!important;pointer-events:none!important;animation:none!important}

/* Seed: a blue flower in the garden palette. Every layer is centred 64px from the top of the button. */
.seed-button{width:260px;height:230px}
.seed-halo{width:230px;height:230px;top:-51px}
.seed-ring{width:112px;height:112px;top:8px}
.seed-orbit{position:absolute;top:-6px;width:140px;height:140px;border-radius:50%;animation:spin 9s linear infinite}
/* Outer petals turn one way, inner petals the other, and each petal breathes in turn so a wave runs around the flower. */
.seed-flower{position:absolute;top:6px;width:116px;height:116px;overflow:visible;filter:drop-shadow(0 0 14px #b8ecf599) drop-shadow(0 6px 10px #06222c66);animation:sf-bob 4s ease-in-out infinite}
.sf-ring{transform-box:fill-box;transform-origin:center}
.sf-ring-out{animation:spin 26s linear infinite}
.sf-ring-in{animation:spin 18s linear infinite reverse}
.sf-petal{transform-box:fill-box;transform-origin:50% 100%;stroke:#ffffff59;stroke-width:.6;animation:sf-breathe 3.2s calc(var(--i) * .4s) ease-in-out infinite}
.sf-ring-in .sf-petal{animation-duration:2.6s}
.sf-heart{transform-box:fill-box;transform-origin:center;animation:sf-glow 2.4s ease-in-out infinite}
.seed-button:hover .seed-flower{filter:drop-shadow(0 0 22px #d4f6ffcc) drop-shadow(0 6px 10px #06222c66)}
@keyframes sf-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07,1.14)}}
@keyframes sf-glow{50%{transform:scale(1.25)}}
@keyframes sf-bob{50%{transform:translateY(-6px) scale(1.03)}}
.seed-orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:#f2fffb;box-shadow:0 0 10px #c8f8ed,0 0 22px #a9e8dc}
.seed-orbit i:nth-child(1){top:-4px;left:calc(50% - 3.5px)}
.seed-orbit i:nth-child(2){bottom:17px;left:8px;width:5px;height:5px}
.seed-orbit i:nth-child(3){bottom:17px;right:8px;width:5px;height:5px}
.seed-label{font-size:12px;letter-spacing:3.2px;margin-top:150px}
.seed-sub{font-size:14px;margin-top:10px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Greeting card that rises in after the bloom, so the letter cannot be missed. */
.card-button{pointer-events:auto;position:relative;display:flex;align-items:center;gap:14px;margin:20px auto 0;padding:13px 22px 13px 14px;min-width:248px;max-width:calc(100vw - 48px);border:1px solid #ffffffb0;border-radius:16px;background:linear-gradient(135deg,#fbfefb,#e3f3ec 60%,#d3ebe3);color:#21473f;text-align:left;overflow:hidden;box-shadow:0 18px 44px #03191f99;opacity:0;transform:translateY(34px) rotate(-3deg) scale(.9);transition:opacity .9s .6s,transform 1.2s .6s cubic-bezier(.2,.9,.25,1.25)}
#experience[data-stage=final] .card-button{opacity:1;transform:none;animation:card-float 4.5s 2s ease-in-out infinite,card-call 2.4s 1.8s ease-out infinite}
#experience[data-stage=final] .card-button.opened{animation:card-float 4.5s ease-in-out infinite}
.card-button:before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffffd0 48%,transparent 66%);transform:translateX(-130%);animation:card-shine 3.8s 2.6s ease-in-out infinite;pointer-events:none}
.card-seal{flex:none;position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 30%,#5fa394,#2c6359 70%,#21504a);color:#f4e2bb;font-size:24px;line-height:1;box-shadow:0 3px 8px #12352f55,inset 0 0 0 3px #3f7c70,inset 0 0 0 5px #2a5e55}
.card-text{display:flex;flex-direction:column;gap:3px;position:relative}
.card-kicker{font-size:9px;letter-spacing:2.2px;color:#5f8c80}
.card-title{font-family:Lora,Georgia,'Times New Roman',serif;font-style:italic;font-size:21px;color:#1f4a42;letter-spacing:-.3px}
.card-cta{font-size:12px;color:#2f6a5c;font-weight:600}
.card-cta b{font-weight:400;padding-left:4px;display:inline-block;animation:cta-nudge 1.6s ease-in-out infinite}
.card-button.opened .card-cta b{animation:none}
@keyframes card-float{50%{transform:translateY(-6px)}}
@keyframes card-call{0%{box-shadow:0 18px 44px #03191f99,0 0 0 0 #c8f3e8aa}70%,100%{box-shadow:0 18px 44px #03191f99,0 0 0 16px #c8f3e800}}
@keyframes card-shine{0%{transform:translateX(-130%)}40%,100%{transform:translateX(130%)}}
@keyframes cta-nudge{50%{transform:translate(3px,-3px)}}