/* The entry animation — adapted from web-export/style.css.
   Every rule is scoped to #intro so nothing leaks into the site (the original styled html/body). */
#intro .intro__viewport { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #F1C8CF; }
#intro .intro__stage { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #F1C8CF; transform-origin: center; flex: none; }
#intro .layer { position: absolute; inset: 0; }
#intro .stripes { position: absolute; inset: 0; background-size: 120px 100%; }
#intro .card { position: absolute; overflow: hidden; box-sizing: border-box; box-shadow: 0 30px 60px rgba(114,9,0,.3); will-change: transform; }
#intro .card.photo { background: #FFF6F4; border: 10px solid #FFF6F4; }
#intro .card.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 26px; max-width: none; }
#intro .card.brand { background: #720900; display: block; aspect-ratio: auto; }  /* the site also has a .brand (header logo) */
#intro .logo-wrap { position: absolute; width: 1920px; height: 1080px; }
#intro .logo { position: absolute; left: 290px; top: 294.78px; width: 1340px; height: 490.44px; }
#intro .logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
#intro .sprinkle { position: absolute; width: 30px; height: 10px; border-radius: 5px; }