/* Cinematic opening adapted from Bere Flores Makeup Academy.html. */
.brand-intro{--intro-gold:#d9b397;--intro-rose:#e6b6a7;position:fixed;inset:0;z-index:1000;isolation:isolate;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;color:#faf7f4;background:#120e0d}
.brand-intro:focus{outline:0}
.brand-intro-on{overflow:hidden}
.brand-intro-on .brand-intro{visibility:visible;opacity:1;pointer-events:auto}
.intro-backdrop,.intro-vignette,.intro-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.intro-backdrop{overflow:hidden;background:radial-gradient(ellipse at 73% 35%,rgba(141,93,78,.19),transparent 55%),radial-gradient(ellipse at 45% 55%,#2b201b 0%,#120e0d 70%)}
.intro-backdrop::after{content:"";position:absolute;inset:-30%;background:conic-gradient(from 140deg at 50% 50%,transparent 0deg,rgba(230,182,167,.055) 38deg,transparent 75deg,transparent 180deg,rgba(217,179,151,.04) 225deg,transparent 270deg);animation:intro-light 8s ease-out both}
.intro-portrait{position:absolute;left:-8%;top:0;width:61%;height:100%;object-fit:contain;object-position:left center;filter:grayscale(1) sepia(.16);mix-blend-mode:screen;opacity:.12;mask-image:radial-gradient(ellipse at 40% 47%,#000 12%,transparent 68%);animation:intro-portrait 3s .25s both}
.intro-vignette{z-index:1;background:radial-gradient(ellipse at center,transparent 20%,rgba(6,4,3,.68) 100%);box-shadow:inset 0 0 140px rgba(0,0,0,.25)}
.intro-particles{z-index:2}
.intro-stage{position:relative;z-index:3;display:grid;place-items:center;min-height:100%;height:100%;padding:85px 24px 105px;text-align:center}
.intro-topline{position:absolute;top:max(30px,env(safe-area-inset-top));left:clamp(24px,4vw,64px);right:clamp(24px,4vw,64px);display:flex;justify-content:space-between;gap:20px;color:rgba(250,247,244,.5);font:500 8px/1.5 Montserrat,Arial,sans-serif;letter-spacing:.26em;animation:intro-copy 1.5s .3s both}
.intro-center{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;width:100%;max-width:650px}
.intro-halo{position:absolute;z-index:-1;left:50%;top:42%;width:min(95vw,680px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(201,164,126,.13),transparent 66%);animation:intro-halo 6.4s .3s both}
.intro-rule{height:1px;width:min(62vw,360px);flex:none;background:linear-gradient(90deg,transparent,var(--intro-gold),transparent);transform:scaleX(0);animation:intro-rule 1.2s 1.25s cubic-bezier(.16,1,.3,1) forwards}
.intro-rule:last-child{animation-delay:1.5s}
.intro-logo-frame{position:relative;flex:none;width:clamp(170px,23vw,265px);aspect-ratio:312/214;opacity:0;transform:scale(.86);animation:intro-logo 1.65s .25s cubic-bezier(.16,1,.3,1) forwards}
/* Crop the existing artwork to its monogram, with equal visual margins. */
.intro-monogram{position:absolute;inset:0;overflow:hidden;filter:drop-shadow(0 0 24px rgba(217,179,151,.12))}
.intro-monogram img{position:absolute;width:130.7693%;height:auto;max-width:none;left:-5.7693%;top:-18.2243%;filter:url(#intro-monogram-ink)}
.intro-shimmer{position:absolute;inset:-10%;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(250,237,213,.24) 50%,transparent 65%);transform:translateX(-140%);opacity:0;mix-blend-mode:screen;animation:intro-shimmer 1.2s 3s ease-in-out both}
.intro-wordmark{display:flex;flex-direction:column;align-items:center;gap:13px}
.intro-name{margin:0;padding-left:.16em;font:400 clamp(31px,5.8vw,61px)/1.1 'Lora',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;animation:intro-copy 1s 1.75s both}
.intro-academy{padding-left:.42em;font:500 clamp(8px,1.2vw,11px)/1.6 Montserrat,Arial,sans-serif;letter-spacing:.42em;color:var(--intro-gold);animation:intro-copy .85s 2.2s both}
.intro-center-label{margin:4px 0 0;padding-left:.25em;font:400 8px/1.6 Montserrat,Arial,sans-serif;letter-spacing:.25em;color:rgba(250,247,244,.6);animation:intro-copy .9s 2.8s both}
.intro-bottom{position:absolute;left:24px;right:24px;bottom:max(40px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:14px;animation:intro-copy 1.2s 3.3s both}
.intro-bottom p{margin:0;font:400 italic clamp(23px,3vw,32px)/1.2 'Lora',Georgia,serif;color:#e6b6a7}
.intro-progress{height:1px;width:76px;overflow:hidden;background:rgba(230,182,167,.17)}
.intro-progress span{display:block;width:100%;height:100%;background:var(--intro-rose);transform:scaleX(0);transform-origin:left;animation:intro-progress 6.8s linear both}
.brand-intro-leaving{opacity:0!important;transition:opacity .9s ease;pointer-events:none!important}
.brand-intro-leaving .intro-stage{opacity:0;transform:scale(1.035);transition:opacity .6s ease,transform .9s ease}
@keyframes intro-logo{to{opacity:1;transform:scale(1)}}
@keyframes intro-copy{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-rule{to{transform:scaleX(1)}}
@keyframes intro-progress{to{transform:scaleX(1)}}
@keyframes intro-portrait{from{opacity:0;transform:scale(1.05)}to{opacity:.12;transform:scale(1)}}
@keyframes intro-light{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes intro-halo{0%{opacity:0}40%{opacity:1}100%{opacity:.5}}
@keyframes intro-shimmer{0%{opacity:0;transform:translateX(-140%)}20%,70%{opacity:1}100%{opacity:0;transform:translateX(140%)}}
@media(max-width:600px){.intro-stage{padding:75px 20px 100px}.intro-center{gap:23px}.intro-topline{justify-content:center;font-size:7px}.intro-topline span:last-child{display:none}.intro-portrait{left:-45%;width:115%;opacity:.1;object-fit:cover}.intro-logo-frame{width:clamp(160px,49vw,230px)}.intro-name{font-size:clamp(27px,7.8vw,43px);letter-spacing:.12em;padding-left:.12em}.intro-academy{letter-spacing:.32em;padding-left:.32em}.intro-bottom{bottom:max(30px,env(safe-area-inset-bottom))}}
@media(max-height:600px){.intro-stage{padding:45px 20px 65px}.intro-center{gap:13px}.intro-topline{top:16px}.intro-logo-frame{width:clamp(110px,22vh,165px)}.intro-name{font-size:30px}.intro-wordmark{gap:8px}.intro-center-label{font-size:7px}.intro-bottom{bottom:17px;gap:9px}.intro-bottom p{font-size:21px}}
@media(prefers-reduced-motion:reduce){.brand-intro{display:none!important}.brand-intro-on{overflow:auto}.brand-intro *{animation:none!important;transition:none!important}}