/* Opening: filled lettering and staggered mosaic reveal. */
#birthday-opening{position:fixed;inset:0;z-index:99999;background:#f3efe8;color:#987957;overflow:hidden;isolation:isolate;transition:background .01s .1s}
#birthday-opening .opening-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;transition:opacity .22s}
#birthday-opening h2{position:relative;margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(78px,16vw,240px);font-weight:900;line-height:1.1;letter-spacing:-.075em;color:#ddd1c0;transform:scaleX(.86)}
#birthday-opening h2:after{content:attr(data-title);position:absolute;inset:0;color:#987957;clip-path:inset(calc(100% - var(--intro-fill,0%)) 0 0);transition:clip-path .12s linear}
.opening-bottom{position:absolute;bottom:7%;left:6%;right:6%;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;font-family:Arial,sans-serif}
.opening-caption{font-size:10px;letter-spacing:.18em;line-height:2}.opening-percent{font-size:clamp(48px,7vw,100px);font-weight:600;letter-spacing:-.05em;line-height:1}.opening-percent small{font-size:.22em;vertical-align:top;letter-spacing:0}
#opening-skip{position:absolute;right:5%;top:5%;z-index:3;border:1px solid #98795755;border-radius:30px;background:transparent;color:#806548;padding:9px 15px;cursor:pointer;font:12px Arial,sans-serif}
.opening-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr);pointer-events:none}.opening-tiles i{background:#f3efe8;transition:background .15s,opacity .34s;transition-delay:var(--tile-delay)}
#birthday-opening.revealing{background:transparent;pointer-events:none}#birthday-opening.revealing .opening-copy,#birthday-opening.revealing #opening-skip{opacity:0}#birthday-opening.revealing .opening-tiles i{animation:opening-tile .7s both;animation-delay:var(--tile-delay)}
@keyframes opening-tile{0%{background:#f3efe8;opacity:1}35%{background:#b59a77;opacity:1}100%{background:#b59a77;opacity:0}}
@media(prefers-reduced-motion:reduce){#birthday-opening h2:after{transition:none}#birthday-opening.revealing .opening-tiles i{animation:none;opacity:0}}