/* The complete stationery scene keeps its composition at every screen width. */
html:has(body.opening-active){overflow:hidden}
body[data-tactile=true] .opening:before{display:none}
body[data-tactile=true] .opening{background:radial-gradient(ellipse at 45% 40%,color-mix(in srgb,var(--opening-bg),white 8%),var(--opening-bg) 75%)}
body[data-tactile=true] .opening{padding:18px 16px max(10px,env(safe-area-inset-bottom));overflow:hidden}
body[data-tactile=true] .opening-inner{width:min(100%,900px);max-width:900px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;flex:1;min-width:0;min-height:0;max-height:900px;justify-items:center}
body[data-tactile=true] .opening-eyebrow{grid-row:1}
body[data-tactile=true] .opening h1{grid-row:2}
body[data-tactile=true] .tactile-opening{grid-row:3}
body[data-tactile=true] .open-cta{grid-row:4}
body[data-tactile=true] .skip-opening{grid-row:5}
body[data-tactile=true] .opening h1{margin-bottom:0;font-size:clamp(30px,5vw,46px)!important;max-width:100%;overflow-wrap:anywhere}
body[data-tactile=true] .opening-eyebrow{font-size:12px;line-height:1.5;margin-bottom:12px}
/* A legacy square aspect ratio otherwise widens the grid beyond a phone screen.
   The camera fits this bounded stage; titles and controls keep their own rows. */
body[data-tactile=true] .tactile-opening{display:block;width:min(100%,780px)!important;max-width:100%!important;height:100%;min-width:0;min-height:0;aspect-ratio:auto!important;margin:0 auto!important;transform:none!important;perspective:none;overflow:hidden;isolation:isolate;box-shadow:none!important}
body[data-tactile=true] .tactile-opening:focus-visible{outline-offset:-5px}
.tactile-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .65s ease-out;pointer-events:none}
[data-render-state=ready] .tactile-canvas{opacity:1}
.tactile-fallback{position:absolute;inset:8% 10%;max-width:380px;margin:auto;background:#f3ecdf url('../assets/tactile-openings/cotton-paper.webp') center/cover;color:#342e29;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:18px;box-shadow:0 18px 35px #0003;transition:opacity .2s}
.tactile-fallback small{font:10px var(--sans);letter-spacing:.13em}
.tactile-fallback strong{font:36px/1.1 var(--serif);margin:22px 0;overflow-wrap:anywhere}
.tactile-fallback em{font:14px var(--serif)}
[data-render-state=ready] .tactile-fallback{opacity:0;pointer-events:none}
[data-render-state=loading] .tactile-fallback{opacity:0;pointer-events:none}
[data-render-state=loading].tactile-opening::after{content:'Preparing your invitation…';position:absolute;inset:45% 10% auto;color:var(--opening-ink);font:14px/1.5 var(--sans);opacity:.7}
body[data-tactile=true] .open-cta{margin-top:0}
body[data-tactile=true] .opening-foot{margin-top:12px}
@media(max-width:600px){body[data-tactile=true] .opening{padding:16px 10px max(10px,env(safe-area-inset-bottom));justify-content:center}body[data-tactile=true] .tactile-opening{width:100%!important}body[data-tactile=true] .opening h1{font-size:32px!important}.tactile-fallback strong{font-size:27px}}
@media(max-height:740px){body[data-tactile=true] .opening{justify-content:flex-start;padding-top:10px}body[data-tactile=true] .opening-eyebrow{margin-bottom:5px!important}body[data-tactile=true] .opening h1{font-size:27px!important}body[data-tactile=true] .opening-foot{margin-top:4px}}
@media(max-height:500px){body[data-tactile=true] .opening{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}body[data-tactile=true] .opening-eyebrow,body[data-tactile=true] .opening-foot{display:none}body[data-tactile=true] .opening h1{font-size:22px!important}body[data-tactile=true] .open-cta{min-height:44px;padding-block:8px}body[data-tactile=true] .skip-opening{margin-top:0}}
@media(prefers-reduced-motion:reduce){.tactile-canvas,.tactile-fallback{transition:none}}