:root { --brand-intro-ink:#f3f0e8; --brand-intro-accent:#f17845; --brand-intro-ground:#11110f; }
.brand-intro { position:fixed; z-index:9999; inset:0; overflow:hidden; color:var(--brand-intro-ink); background:var(--brand-intro-ground); }
.brand-intro.is-finished { display:none; }
.brand-intro::before { position:absolute; inset:0; content:""; background:radial-gradient(circle at 74% 32%,rgba(241,120,69,.16),transparent 33%),linear-gradient(135deg,rgba(255,255,255,.025),transparent 45%); }
.brand-intro-grain { position:absolute; inset:-25%; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E"); animation:brand-grain .22s steps(2) infinite; pointer-events:none; }
.brand-intro-frame { position:absolute; inset:clamp(22px,4vw,58px); display:grid; grid-template-rows:auto 1fr auto auto; }
.brand-intro-meta,.brand-intro-foot { display:flex; justify-content:space-between; font:700 clamp(9px,.8vw,12px)/1 Arial,sans-serif; letter-spacing:.2em; }
.brand-intro-contact { position:relative; align-self:center; justify-self:center; width:min(74vw,920px); height:min(48vw,520px); }
.brand-contact-frame { position:absolute; top:50%; left:50%; width:42%; height:66%; overflow:hidden; border:1px solid rgba(243,240,232,.76); background:#181816; transform:translate(-50%,-50%); opacity:0; will-change:transform,opacity; }
.brand-contact-frame::before,.brand-contact-frame::after { position:absolute; width:8px; height:8px; content:""; border-color:var(--brand-intro-accent); }
.brand-contact-frame::before { top:-1px; left:-1px; border-top:2px solid var(--brand-intro-accent); border-left:2px solid var(--brand-intro-accent); }
.brand-contact-frame::after { right:-1px; bottom:-1px; border-right:2px solid var(--brand-intro-accent); border-bottom:2px solid var(--brand-intro-accent); }
.brand-contact-frame span,.brand-contact-frame b { position:absolute; z-index:2; font:700 clamp(8px,.72vw,11px)/1 Arial,sans-serif; letter-spacing:.18em; }
.brand-contact-frame span { top:12px; left:14px; color:var(--brand-intro-accent); }.brand-contact-frame b { right:14px; bottom:12px; }
.brand-scene { position:absolute; inset:0; overflow:hidden; }
.brand-scene::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,rgba(17,17,15,.05),rgba(17,17,15,.38)); }
.frame-light .brand-scene { background:radial-gradient(circle at 68% 36%,#f8d3a0 0 5%,rgba(241,120,69,.88) 6%,rgba(241,120,69,.13) 27%,transparent 48%),linear-gradient(155deg,#363b3a,#121211 68%); }
.frame-light .brand-scene i { position:absolute; left:-10%; width:120%; height:1px; background:rgba(243,240,232,.6); transform:rotate(-14deg); }.frame-light .brand-scene i:nth-child(1){top:42%}.frame-light .brand-scene i:nth-child(2){top:53%;opacity:.45}.frame-light .brand-scene i:nth-child(3){top:64%;opacity:.22}
.frame-movement .brand-scene { background:linear-gradient(120deg,#11110f,#292521 58%,#11110f); }
.frame-movement .brand-scene i { position:absolute; top:-22%; width:18%; height:150%; border-radius:50%; background:linear-gradient(180deg,transparent,var(--brand-intro-accent),transparent); filter:blur(5px); transform:rotate(27deg); }.frame-movement .brand-scene i:nth-child(1){left:18%}.frame-movement .brand-scene i:nth-child(2){left:47%;width:8%;opacity:.72}.frame-movement .brand-scene i:nth-child(3){left:70%;width:24%;opacity:.34}
.frame-moments .brand-scene { background:linear-gradient(145deg,#35312d,#151513 72%); }
.frame-moments .brand-scene::before { position:absolute; inset:18% 14%; content:""; border:1px solid rgba(243,240,232,.34); background:radial-gradient(circle at 25% 32%,var(--brand-intro-accent) 0 3px,transparent 4px),radial-gradient(circle at 72% 28%,rgba(243,240,232,.8) 0 2px,transparent 3px),radial-gradient(circle at 57% 72%,rgba(243,240,232,.56) 0 3px,transparent 4px); }
.frame-moments .brand-scene i { position:absolute; z-index:1; background:rgba(243,240,232,.45); }.frame-moments .brand-scene i:nth-child(1){top:50%;left:14%;width:72%;height:1px}.frame-moments .brand-scene i:nth-child(2){top:18%;left:50%;width:1px;height:64%}.frame-moments .brand-scene i:nth-child(3){right:17%;bottom:21%;width:18%;height:2px;background:var(--brand-intro-accent)}
.brand-intro .frame-light { transform:translate(-104%,-58%) rotate(-5deg); }.brand-intro .frame-movement { transform:translate(-50%,-43%) rotate(3deg); }.brand-intro .frame-moments { transform:translate(4%,-55%) rotate(-2deg); }
.brand-journal-mark { position:absolute; z-index:2; top:50%; left:50%; display:grid; justify-items:center; gap:8px; opacity:0; transform:translate(-50%,-42%) scale(.94); white-space:nowrap; }
.brand-journal-mark strong { font:800 clamp(62px,12vw,174px)/.8 Arial,sans-serif; letter-spacing:-.075em; }.brand-journal-mark span { color:var(--brand-intro-accent); font:800 clamp(9px,.85vw,13px)/1 Arial,sans-serif; letter-spacing:.24em; }
.brand-intro-rule { height:1px; margin-bottom:18px; overflow:hidden; background:rgba(243,240,232,.17); }.brand-intro-rule i { display:block; width:100%; height:100%; background:var(--brand-intro-ink); transform:scaleX(0); transform-origin:left; }
.brand-intro-foot { padding-bottom:2px; color:rgba(243,240,232,.58); }
.brand-intro.is-playing .frame-light { animation:brand-frame-light .54s cubic-bezier(.16,1,.3,1) .06s both,brand-frame-stack .42s cubic-bezier(.7,0,.3,1) .82s forwards; }
.brand-intro.is-playing .frame-movement { animation:brand-frame-movement .54s cubic-bezier(.16,1,.3,1) .17s both,brand-frame-stack .42s cubic-bezier(.7,0,.3,1) .82s forwards; }
.brand-intro.is-playing .frame-moments { animation:brand-frame-moments .54s cubic-bezier(.16,1,.3,1) .28s both,brand-frame-stack .42s cubic-bezier(.7,0,.3,1) .82s forwards; }
.brand-intro.is-playing .brand-contact-frame span,.brand-intro.is-playing .brand-contact-frame b,.brand-intro.is-playing .brand-scene { animation:brand-label-out .24s ease .82s forwards; }
.brand-intro.is-playing .brand-journal-mark { animation:brand-journal-in .42s cubic-bezier(.16,1,.3,1) 1.05s forwards; }
.brand-intro.is-playing .brand-intro-rule i { animation:brand-rule-in .48s cubic-bezier(.16,1,.3,1) .3s forwards; }.brand-intro.is-playing .brand-intro-meta,.brand-intro.is-playing .brand-intro-foot { animation:brand-detail-in .4s ease .2s both; }
.brand-intro.is-playing { animation:brand-shutter-open .72s cubic-bezier(.76,0,.24,1) 1.72s forwards; }
@keyframes brand-frame-light { from{opacity:0;transform:translate(-145%,-58%) rotate(-9deg)}to{opacity:1;transform:translate(-104%,-58%) rotate(-5deg)} } @keyframes brand-frame-movement { from{opacity:0;transform:translate(-50%,-18%) rotate(8deg)}to{opacity:1;transform:translate(-50%,-43%) rotate(3deg)} } @keyframes brand-frame-moments { from{opacity:0;transform:translate(45%,-55%) rotate(4deg)}to{opacity:1;transform:translate(4%,-55%) rotate(-2deg)} }
@keyframes brand-frame-stack { to{opacity:.34;transform:translate(-50%,-50%) rotate(0)} } @keyframes brand-label-out { to{opacity:0} } @keyframes brand-journal-in { to{opacity:1;transform:translate(-50%,-50%) scale(1)} } @keyframes brand-rule-in { to{transform:scaleX(1)} } @keyframes brand-detail-in { from{opacity:0}to{opacity:1} }
@keyframes brand-shutter-open { 0%{clip-path:inset(0)}100%{clip-path:inset(50% 0);visibility:hidden} } @keyframes brand-grain { 0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)} }
@media(max-width:640px){.brand-intro-frame{inset:20px 16px}.brand-intro-contact{width:92vw;height:62vh}.brand-contact-frame{width:52%;height:52%}.brand-intro-meta span:last-child{display:none}.brand-intro-foot{font-size:8px}}
@media(prefers-reduced-motion:reduce){.brand-intro-grain{animation:none}.brand-intro.is-playing{animation-duration:.18s;animation-delay:.08s}.brand-intro.is-playing .brand-contact-frame,.brand-intro.is-playing .brand-journal-mark,.brand-intro.is-playing .brand-intro-rule i,.brand-intro.is-playing .brand-intro-meta,.brand-intro.is-playing .brand-intro-foot{animation:none;opacity:1}.brand-contact-frame{opacity:.25;transform:translate(-50%,-50%)}.brand-journal-mark{opacity:1;transform:translate(-50%,-50%)}}