/* Family AI Garden: shared visitor choices and the proposed arrival sequence. */
:root{--visitor-colour:#f1d28b}
.garden-backdrop .garden-welcome-text{font:600 25px Georgia,serif;fill:#573918;stroke:#fff1c566;stroke-width:.7px;paint-order:stroke;letter-spacing:.5px}
:lang(th) .garden-backdrop .garden-welcome-text{font:500 23px 'Leelawadee UI',Tahoma,sans-serif;letter-spacing:0}
/* Reserve the arch's lower edge in the artwork's centered cover crop. */
#courtyard{margin-top:max(20px,calc(min(20.73svh,50svh - 16.48vw) + 24px - 96px))}
@media(max-width:900px){#courtyard{margin-top:max(20px,calc(min(20.73svh,50svh - 16.48vw) + 24px - 84px))}}
@media(max-width:650px){#courtyard{margin-top:max(14px,calc(min(20.73svh,50svh - 16.48vw) + 24px - 80px))}}
.garden-tools{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px 12px;max-width:760px;margin:2px auto 34px;padding:0 20px}.garden-tools button{font-size:12px;min-width:0;text-wrap:balance}
.garden-tools #enjoy-garden{grid-column:1;grid-row:1;justify-self:end}.garden-tools #open-palette{grid-column:2;grid-row:1;justify-self:stretch}.garden-tools #replay-arrival{grid-column:3;grid-row:1;justify-self:start}
@media(max-width:520px){.garden-tools{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:12px 8px;padding:0 12px}.garden-tools .choice-stone{padding:13px 12px}.garden-tools #enjoy-garden,.garden-tools #replay-arrival{padding:6px 3px;line-height:1.5}}
.choice-stone{border-radius:48% 43% 46% 40%;background:radial-gradient(ellipse at 40% 20%,#647564,#263d33 70%);border:1px solid #b8ccb078;box-shadow:inset 0 2px 7px #e7dabe28,0 0 22px #c6e6b025;animation:stone-glimmer 5s ease-in-out infinite}
.choice-stone{padding:15px 28px;min-height:54px}.garden-tools #replay-arrival,.garden-tools #enjoy-garden{border:0;background:transparent;text-decoration:underline;text-underline-offset:5px}
#palette-dialog{width:min(820px,calc(100% - 24px));background:linear-gradient(145deg,#183d31,#10231e 70%);max-height:92svh}#palette-dialog .dialog-header{position:sticky;top:0;z-index:2;background:#17382ff2;backdrop-filter:blur(12px)}#palette-dialog .eyebrow{font-size:9px;margin:0 0 7px}#palette-dialog h2{font-size:27px;line-height:1.3}#close-palette{font-size:11px;max-width:150px;flex-shrink:0}
.palette-content{padding:22px 26px}.palette-intro{font-size:13px;line-height:1.7;margin:0 0 16px;color:#d2decf}.magic-presets{display:flex;gap:8px;margin:0 0 28px}.magic-presets button{flex:1;background:#eee2bb09}.magic-presets [aria-pressed=true]{border-color:#e0cd93;background:#d6bb7228;color:#fff0b7}
.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.palette-grid fieldset{border:0;padding:0;margin:0;min-width:0}.palette-grid legend{font:20px Georgia,serif;color:#ebd29c;margin-bottom:10px}.magic-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:45px;border-bottom:1px solid #eee1b314;font-size:12px;line-height:1.5;cursor:pointer}.magic-toggle input{appearance:none;width:36px;height:21px;background:#8ba39430;border:1px solid #acc4a750;border-radius:20px;flex-shrink:0;position:relative;cursor:pointer}.magic-toggle input::after{content:"";position:absolute;width:13px;height:13px;left:3px;top:3px;border-radius:50%;background:#8a9d8d;transition:transform .2s}.magic-toggle input:checked{background:#cbb37b45;border-color:#e5d091}.magic-toggle input:checked::after{background:#f7dfaa;transform:translateX(15px)}.magic-toggle:has(input:disabled){opacity:.5;cursor:default}
.palette-note{font-size:11px;line-height:1.65;color:#acbeae;margin:12px 0}.magic-select{display:flex;flex-direction:column;gap:8px;font-size:12px;margin:21px 0 12px}.magic-select select{width:100%;min-height:44px;font:inherit;background:#102c24;color:#e9dfc4;border:1px solid #c0c7a549;border-radius:9px;padding:10px}.magic-select option{background:#16392d}#try-magic{font-size:11px;background:#b4a86a13}.comfort{grid-column:1/-1}.magic-range{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:44px;font-size:12px}.magic-range input{width:50%;accent-color:#dac68c;min-height:26px}.imagination-story{border-top:1px solid #d1c18730;margin-top:22px;padding-top:16px}.imagination-story summary{cursor:pointer;font:18px Georgia,serif;min-height:44px;padding:10px 0;color:#eed5a5}.imagination-story p{font:15px/1.85 Georgia,serif;color:#c6d2bd;max-width:580px}.reset-magic{border:0;background:transparent;padding-left:0;text-decoration:underline;text-underline-offset:4px;font-size:11px;color:#b7c7b6;margin-top:10px}
#arrival-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#11251c;color:#fff0d0}#arrival-dialog::backdrop{background:#11251c}.arrival-backdrop{position:absolute;inset:0;background:linear-gradient(#13261a30,#15291f99),url('/data/design/garden-entrance-thailand-05.png') center/cover;filter:blur(22px) brightness(.5);transform:scale(1.08)}
.arrival-scenery{position:absolute;inset:0;display:grid;place-items:center}#arrival-dialog .scene{position:relative;width:min(100vw,177.68svh);aspect-ratio:1672/941;isolation:isolate}#arrival-dialog #art{display:block;width:100%;height:auto}#arrival-dialog #landscape,#arrival-dialog #air,#arrival-dialog .welcome-sign{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#arrival-dialog #landscape{opacity:0}#arrival-dialog .scene.ready:not(.is-still) #landscape{opacity:1}#arrival-dialog .is-still #air{display:none}#arrival-dialog .welcome-sign{z-index:3;overflow:visible}#arrival-dialog .welcome-text{font:600 25px Georgia,serif;fill:#573918;stroke:#fff1c566;stroke-width:.7px;paint-order:stroke;letter-spacing:.5px}#arrival-dialog :lang(th) .welcome-text{font:500 23px 'Leelawadee UI',Tahoma,sans-serif;letter-spacing:0}
.pillar-light{position:absolute;top:27%;width:6%;height:39%;border-radius:45%;background:radial-gradient(ellipse,#d9a5ff60,#a14aed24 55%,transparent 75%);mix-blend-mode:screen;filter:blur(7px);pointer-events:none;animation:pillar-breath 5.5s ease-in-out infinite}.pillar-left{left:25.6%}.pillar-right{left:62.8%;top:27%;height:39%;animation-delay:-2s}.no-pillar-glow .pillar-light{display:none}
.motion-bridge{display:none!important}#image-error{position:absolute;left:15%;right:15%;top:40%;text-align:center;background:#1d3528;padding:16px}
#arrival-mist{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}#arrival-mist i{position:absolute;inset:-30%;background:radial-gradient(ellipse at 30% 50%,#e5c8efed,transparent 53%),radial-gradient(ellipse at 70% 50%,#cedbdcee,transparent 60%),radial-gradient(ellipse at 50% 20%,#f0e1f2cc,transparent 55%);filter:blur(28px);opacity:.94}#arrival-mist i:nth-child(2){background:radial-gradient(ellipse,#cdbbeee0,transparent 63%);inset:-10%;transform:rotate(30deg)}#arrival-mist i:nth-child(3){background:radial-gradient(ellipse at 50% 75%,#ecf2cfeb,transparent 55%);inset:-15%}
.arrival-paused *, .arrival-paused *::before,.arrival-paused *::after{animation-play-state:paused!important}

#visitor-sparks{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}#visitor-sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--visitor-colour);box-shadow:0 0 12px var(--visitor-colour);animation:visitor-spark .8s ease-out forwards}#visitor-sparks i.ripple{width:12px;height:12px;background:none;border:1px solid var(--visitor-colour);box-shadow:none;animation:visitor-ripple .7s ease-out forwards}
body[data-farewell=fireflies] .vanishing .mist span{width:5px;height:5px;filter:none;background:#efdf9c;box-shadow:0 0 14px 3px #ffe2a570;animation:firefly-leave 1.6s ease-out forwards}body[data-farewell=fireflies] .vanishing .cube-position{animation:firefly-cube 1.3s forwards}body[data-farewell=fade] .vanishing .mist{display:none}body[data-farewell=fade] .vanishing .cube-position{animation:simple-fade 1.3s forwards}.wobble-garden .stage.dragging .cube-position{animation:cube-wobble .6s ease-in-out infinite alternate}.cube-arriving .cube-position{animation:cube-arrive .8s ease-out both}
@keyframes pillar-breath{0%,100%{opacity:.4}50%{opacity:1}}@keyframes stone-glimmer{0%,100%{box-shadow:inset 0 2px 7px #e7dabe28,0 0 15px #d5eda820}50%{box-shadow:inset 0 2px 9px #ecffd844,0 0 27px #d8ef9b55}}
@keyframes photo-wing-left{from{transform:scaleX(.28) rotate(-1deg)}to{transform:scaleX(1) rotate(0)}}@keyframes photo-wing-right{from{transform:scaleX(.32) rotate(1deg)}to{transform:scaleX(1) rotate(0)}}
@keyframes visitor-spark{from{opacity:.85;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-30px) scale(.2)}}@keyframes visitor-ripple{from{opacity:.8;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(6)}}
@keyframes firefly-leave{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}@keyframes firefly-cube{0%{opacity:1;filter:brightness(1)}40%{opacity:.7;filter:brightness(1.4)}100%{opacity:0;filter:brightness(1.6);transform:scale(.9)}}@keyframes simple-fade{to{opacity:0}}@keyframes cube-wobble{from{transform:rotate(-1.5deg) scale(1.01,.99)}to{transform:rotate(1.5deg) scale(.99,1.01)}}@keyframes cube-arrive{from{opacity:.3;filter:blur(6px);transform:scale(.91)}to{opacity:1;filter:blur(0);transform:scale(1)}}
body.quiet-garden *,body.quiet-garden *::before,body.quiet-garden *::after{animation:none!important;transition:none!important}body.quiet-garden #visitor-sparks{display:none}
@media(max-width:650px){#palette-dialog .dialog-header{align-items:flex-start;padding:16px}#palette-dialog h2{font-size:23px}#close-palette{font-size:10px;max-width:104px;padding:8px 12px}.palette-content{padding:18px}.palette-grid{grid-template-columns:1fr;gap:25px}.magic-presets{gap:6px}.magic-presets button{font-size:12px;padding:9px}.garden-tools{margin-bottom:24px}:lang(th) #palette-dialog h2{font-size:22px}:lang(th) .palette-grid legend{font:18px 'Leelawadee UI',Tahoma,sans-serif}}
@media(prefers-reduced-motion:reduce){#visitor-sparks{display:none}}

#arrival-loading{position:absolute;z-index:12;bottom:16px;left:50%;transform:translateX(-50%);max-width:90%;margin:0;padding:8px 14px;background:#112b21ed;color:#fff4d1;border-radius:12px;font:16px/1.4 system-ui;text-align:center}

/* Freeze optional CSS effects with the held welcome clock. */
body.garden-effects-held *,body.garden-effects-held *::before,body.garden-effects-held *::after{animation-play-state:paused!important}
@media print{#art{opacity:1!important}#landscape,#air,#visitor-sparks{display:none}body *,body *::before,body *::after{animation-play-state:paused!important}}