:root{--gold:#ffd99c;--cream:#fff5dd;--ink:#1d120c;--violet:#8d5bb3}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#17110d}body{margin:0;background:#17110d;color:var(--cream);font-family:Georgia,"Times New Roman",serif;overflow-x:hidden}html.smile-locked,body.smile-locked{height:100%;overflow:hidden;overscroll-behavior:none}
button,a{font:inherit}.smile-experience{min-height:100vh}
.garden-stage{position:relative;height:100svh;min-height:620px;overflow:hidden;background:#f8c87d;isolation:isolate;cursor:crosshair}
.garden-world{position:absolute;inset:-7%;overflow:hidden;transform:scale(1.04);will-change:transform;transition:filter 1.4s ease}
.garden-layer{position:absolute;will-change:transform;pointer-events:none;transform-origin:center}.garden-layer img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.layer-far{z-index:1;inset:-2%;filter:saturate(.76) brightness(1.02) blur(.35px)}
.layer-main{z-index:2;inset:-7%;clip-path:polygon(0 8%,100% 8%,100% 100%,0 100%);filter:saturate(1.04) contrast(1.01)}
.layer-mid{z-index:3;inset:-10%;clip-path:polygon(0 76%,28% 72%,54% 77%,78% 71%,100% 74%,100% 100%,0 100%);filter:saturate(1.09) contrast(1.04) brightness(.96)}
.layer-left{z-index:5;inset:-20%;clip-path:polygon(0 0,23% 0,19% 24%,15% 55%,26% 100%,0 100%);filter:saturate(1.12) brightness(.82) contrast(1.1)}
.layer-near{z-index:6;inset:-29%;clip-path:polygon(82% 0,100% 0,100% 100%,73% 100%,83% 62%,79% 31%);filter:saturate(1.16) brightness(.86) contrast(1.1)}
.sun-wash{position:absolute;z-index:7;inset:0;background:radial-gradient(circle at 52% 18%,rgba(255,251,218,.63),rgba(255,205,117,.16) 28%,transparent 60%);mix-blend-mode:screen;animation:sunBreathe 8s ease-in-out infinite}
.light-rays{position:absolute;z-index:8;inset:-18%;background:conic-gradient(from 190deg at 51% 4%,transparent 0 2deg,rgba(255,246,210,.1) 3deg 5deg,transparent 6deg 12deg,rgba(255,242,201,.07) 13deg 15deg,transparent 16deg 23deg,rgba(255,247,218,.08) 24deg 26deg,transparent 27deg 360deg);filter:blur(18px);opacity:.38;mix-blend-mode:screen;animation:rays 18s ease-in-out infinite alternate}
.garden-life{position:absolute;z-index:9;inset:0;width:100%;height:100%;pointer-events:none}.cursor-warmth{position:absolute;z-index:10;width:320px;height:320px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,245,194,.26),rgba(255,190,92,.09) 42%,transparent 70%);mix-blend-mode:screen;filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .5s ease}
.garden-stage.is-awake .cursor-warmth{opacity:1}.edge-vignette{position:absolute;z-index:11;inset:0;box-shadow:inset 0 0 14vw rgba(20,9,5,.34);pointer-events:none}
.garden-title{position:absolute;z-index:20;top:8%;left:50%;width:min(90vw,900px);padding:1.4rem 2rem 1.7rem;text-align:center;transform:translate(-50%,18px);opacity:0;text-shadow:0 3px 24px rgba(22,8,4,.85);transition:opacity 1.8s ease,transform 1.8s ease}.garden-title::before{content:"";position:absolute;z-index:-1;inset:-50% -16%;background:radial-gradient(ellipse,rgba(24,10,7,.52),rgba(24,10,7,.18) 44%,transparent 72%);filter:blur(13px)}.garden-title.is-visible{opacity:1;transform:translate(-50%,0)}.garden-title p{margin:0 0 .35rem;text-transform:uppercase;letter-spacing:.32em;font-size:clamp(.7rem,1vw,.9rem)}.garden-title h1{font-weight:400;margin:0;font-size:clamp(2rem,5vw,5rem);line-height:.95}
.look-hint{position:absolute;z-index:20;left:50%;bottom:12%;transform:translate(-50%,10px);opacity:0;margin:0;color:#fff4dc;text-shadow:0 2px 12px #3f1d0e;font-style:italic;letter-spacing:.05em;transition:opacity 1.2s ease,transform 1.2s ease}.look-hint.is-visible{opacity:.88;transform:translate(-50%,0)}
.meet-smile{position:absolute;z-index:24;left:50%;bottom:5%;transform:translate(-50%,30px) scale(.92);opacity:0;border:1px solid rgba(255,239,198,.72);border-radius:999px;padding:1rem 2.2rem;color:#3d210f;background:linear-gradient(180deg,rgba(255,248,218,.94),rgba(248,190,99,.9));box-shadow:0 0 0 7px rgba(255,230,169,.12),0 12px 40px rgba(73,30,8,.35);cursor:pointer;overflow:hidden;transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.9,.2,1),box-shadow .5s ease}.meet-smile.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}.meet-smile:hover,.meet-smile:focus-visible{transform:translate(-50%,-5px) scale(1.06);box-shadow:0 0 0 12px rgba(255,231,172,.17),0 0 60px rgba(255,215,134,.6)}.button-bloom{position:absolute;inset:-40%;background:radial-gradient(circle,rgba(255,255,255,.86),transparent 56%);transform:scale(.2);opacity:0;transition:.55s}.meet-smile:hover .button-bloom{transform:scale(1);opacity:.7}.meet-smile span:last-child{position:relative;letter-spacing:.11em;text-transform:uppercase;font-size:.9rem}
.sound-toggle{position:absolute;z-index:25;right:1.25rem;top:1.25rem;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:.55rem .9rem;color:white;background:rgba(33,18,11,.34);backdrop-filter:blur(12px);cursor:pointer}.sound-toggle[aria-pressed="true"]{background:rgba(255,237,190,.86);color:#392113}
.garden-intro{position:absolute;z-index:53;inset:0;pointer-events:none;background:#fff9e9;animation:introFade 1.45s ease-out forwards}.intro-bloom{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 50%,#fff 0 8%,#fff3bf 23%,#ffc86b 47%,rgba(255,180,69,.2) 68%,transparent 75%);animation:burst 1.4s ease-out forwards}
.garden-reveal{position:absolute;z-index:51;inset:0;overflow:hidden;pointer-events:none;animation:revealComplete 6.2s linear forwards}.reveal-flash{position:absolute;z-index:3;inset:0;background:radial-gradient(circle,#fff 0 8%,#fff4c9 34%,rgba(255,199,106,.85) 70%,rgba(64,30,12,.16));animation:welcomeFlash 2.1s ease-out forwards}.reveal-tree{position:absolute;z-index:2;top:-8%;bottom:-8%;width:59%;background-repeat:no-repeat;background-size:auto 116%;filter:saturate(.9) brightness(.62) contrast(1.14);will-change:transform}.reveal-tree-left{left:-4%;background-image:linear-gradient(rgba(16,8,6,.12),rgba(16,8,6,.3)),url('../assets/smile/Left Foreground.png');background-position:left center;animation:treesPartLeft 5.5s cubic-bezier(.22,.72,.18,1) .55s forwards}.reveal-tree-right{right:-4%;background-image:linear-gradient(rgba(16,8,6,.12),rgba(16,8,6,.3)),url('../assets/smile/Right Foreground.png');background-position:right center;animation:treesPartRight 5.5s cubic-bezier(.22,.72,.18,1) .55s forwards}
.smile-gallery{position:relative;min-height:100vh;padding:clamp(5rem,10vw,9rem) clamp(1rem,5vw,5rem);background:linear-gradient(180deg,#20150f,#0f0b14 45%,#130d19);overflow:hidden}.gallery-atmosphere{position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(255,211,141,.2),transparent 34%),url('../assets/smile/Far Background.png') center/cover;opacity:.18;filter:blur(3px);transform:scale(1.04)}.gallery-heading,.hero-document,.art-grid,.return-journal{position:relative;z-index:2}.gallery-heading{text-align:center;max-width:820px;margin:0 auto 3rem}.eyebrow{text-transform:uppercase;letter-spacing:.28em;color:#e8b985;font-size:.75rem}.gallery-heading h2{margin:.2rem 0 .8rem;font-size:clamp(3rem,8vw,7rem);font-weight:400;color:#ffe2ab}.gallery-heading>p:last-child{font-size:clamp(1rem,2vw,1.3rem);line-height:1.7;color:#eadbc5}
.hero-document{max-width:980px;margin:0 auto 4rem;padding:clamp(2rem,5vw,4.6rem);border:1px solid rgba(255,220,159,.28);background:linear-gradient(145deg,rgba(40,23,20,.9),rgba(12,9,16,.94));box-shadow:0 30px 80px rgba(0,0,0,.42),inset 0 0 70px rgba(255,195,111,.035)}.hero-document .document-kicker{margin:0 0 .7rem;color:#e8b985;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase}.hero-document h3{margin:0 0 2rem;color:#ffe1aa;font-size:clamp(2.6rem,7vw,5.5rem);font-weight:400;line-height:1}.hero-document p{max-width:760px;margin:1.15rem 0;color:#eadbc5;font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.8}.hero-document .document-opening{color:#fff0cf;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.75}.hero-document strong{color:#ffe2ad;font-weight:400}.hero-document .document-welcome{margin-top:2rem;font-size:clamp(1.2rem,2.2vw,1.55rem)}
.art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.4rem);max-width:1300px;margin:0 auto}.art-card{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid rgba(255,219,160,.3);color:white;text-decoration:none;background:#08070b}.art-card img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .8s}.art-card.portrait-art img{object-position:center top}.art-card span{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.2rem 1rem;background:linear-gradient(transparent,rgba(7,5,10,.94));font-size:1.25rem;color:#ffe0a7;letter-spacing:.04em}.art-card:hover img{transform:scale(1.045);filter:brightness(1.12)}.return-journal{display:block;width:max-content;margin:4rem auto 0;color:#ead5b6;text-decoration:none;border-bottom:1px solid rgba(234,213,182,.45);padding:.5rem}
@keyframes introFade{0%,42%{opacity:1}100%{opacity:0;visibility:hidden}}@keyframes burst{0%{transform:scale(.15);opacity:1}58%{transform:scale(1.2);opacity:1}100%{transform:scale(1.75);opacity:0}}@keyframes welcomeFlash{0%,20%{opacity:1}100%{opacity:0}}@keyframes treesPartLeft{0%,14%{transform:translateX(0) scale(1.04)}100%{transform:translateX(-93%) scale(1.13)}}@keyframes treesPartRight{0%,14%{transform:translateX(0) scale(1.04)}100%{transform:translateX(93%) scale(1.13)}}@keyframes revealComplete{0%,98%{visibility:visible}100%{visibility:hidden}}@keyframes sunBreathe{50%{opacity:.72;transform:scale(1.06)}}@keyframes rays{to{transform:translate3d(2%,1%,0) rotate(.35deg);opacity:.52}}
@media(max-width:780px){.garden-stage{min-height:560px}.garden-world{inset:-4%;transform:scale(1.12)}.layer-far{inset:-5%}.layer-main{inset:-10%}.layer-mid{inset:-17%}.layer-left{inset:-27%}.layer-near{inset:-38%}.garden-title{top:11%;padding:1rem}.garden-title h1{font-size:clamp(2.2rem,10vw,4rem)}.look-hint{bottom:15%;width:90%;text-align:center;font-size:.9rem}.meet-smile{bottom:6%;padding:.9rem 1.5rem}.art-grid{grid-template-columns:1fr}.sound-toggle{top:.75rem;right:.75rem}.feature-caption{align-items:flex-start;gap:.3rem;flex-direction:column}.reveal-tree{width:65%;background-size:auto 108%}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.garden-intro{display:none}}
.smile-closing{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2.8rem;margin:4rem auto 0}.smile-closing .return-journal{margin:0}.continue-manifesto{display:flex;min-width:min(90vw,390px);flex-direction:column;align-items:center;gap:.45rem;padding:1.15rem 2rem;border:1px solid rgba(255,226,176,.48);border-radius:999px;color:#24150e;text-decoration:none;background:linear-gradient(180deg,#fff4d8,#e9bd7f);box-shadow:0 15px 55px rgba(0,0,0,.35);transition:transform .45s ease,box-shadow .45s ease}.continue-manifesto span{text-transform:uppercase;letter-spacing:.18em;font-size:.84rem}.continue-manifesto small{font-size:.78rem;opacity:.72}.continue-manifesto:hover,.continue-manifesto:focus-visible{transform:translateY(-4px);box-shadow:0 20px 68px rgba(217,164,99,.22)}.manifesto-whiteout{position:fixed;z-index:1000;inset:0;background:#fff;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1.15s ease,visibility 0s linear 1.15s}.manifesto-whiteout.is-active{opacity:1;visibility:visible;transition:opacity 1.15s ease}
@media(max-width:780px){.continue-manifesto{min-width:0;width:100%;max-width:390px;text-align:center}}

/* On touch screens the 3:1 garden becomes a draggable panorama. */
@media(max-width:780px){
  .garden-stage{touch-action:none;cursor:grab;user-select:none}
  .garden-stage.is-dragging{cursor:grabbing}
  .garden-world{top:0;bottom:auto;left:calc(50% - 150svh);right:auto;width:300svh;height:100svh;min-width:1680px;min-height:560px;inset-block:0 auto;overflow:hidden;transform:translate3d(0,0,0)}
  .layer-far{inset:-2%}
  .layer-main{inset:-4%;clip-path:polygon(0 5%,100% 5%,100% 100%,0 100%)}
  .layer-mid{inset:-7%;clip-path:polygon(0 69%,24% 64%,52% 71%,78% 65%,100% 68%,100% 100%,0 100%)}
  .layer-left{inset:-11%;clip-path:polygon(0 0,34% 0,29% 28%,25% 58%,38% 100%,0 100%)}
  .layer-near{inset:-15%;clip-path:polygon(68% 0,100% 0,100% 100%,61% 100%,70% 62%,66% 29%)}
  .look-hint{bottom:16%;padding:.5rem .85rem;border-radius:999px;background:rgba(31,15,8,.28);backdrop-filter:blur(7px)}
}