/* A silent, procedural brand film. All lettering comes from the supplied logo. */
.brand-opening{position:fixed;inset:0;z-index:1000;isolation:isolate;overflow:hidden;background:#08080b;color:#f9f4ed;opacity:1;transition:opacity .2s ease;contain:layout paint}
.brand-opening[hidden]{display:none!important}
.brand-opening.is-exiting{opacity:0;pointer-events:none}
.opening-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.opening-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#05050840,transparent 28%,transparent 62%,#050508d9),radial-gradient(ellipse at 50% 45%,transparent 20%,#0404073d 72%,#040407bf)}
.opening-grain{position:absolute;inset:0;opacity:.07;pointer-events:none;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='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")}
.opening-topline{position:absolute;left:42px;right:42px;top:max(28px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center;gap:20px;z-index:3}
.opening-topline>span{font:10px system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;letter-spacing:3px;color:#aaa5a7}
.opening-skip{font:11px system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;letter-spacing:.4px;padding:10px 14px;border:1px solid #ffffff35;border-radius:30px;background:#15131880;color:#f0e9e6;backdrop-filter:blur(10px);display:flex;gap:18px;align-items:center;transition:background .2s,border-color .2s}
.opening-skip:hover{background:#ffffff12;border-color:#ffffff90}
.opening-skip span{font-size:16px}
.opening-composition{position:absolute;left:50%;top:43%;width:min(82vw,780px);transform:translate(-50%,-50%);text-align:center;z-index:2;pointer-events:none}
.opening-kicker{font:10px system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;letter-spacing:7px;color:#c4b6b4;margin:0 0 24px;opacity:0;transform:translateY(16px);animation:opening-reveal .45s ease 1.4s forwards}
.opening-wordmark{display:block;position:relative;width:min(100%,650px);aspect-ratio:2048/388;margin:0 auto;background:linear-gradient(90deg,#e60012 0 22%,#fbf6ed 22% 100%);-webkit-mask:url('assets/belluti-logo.png') center/contain no-repeat;mask:url('assets/belluti-logo.png') center/contain no-repeat;opacity:0;transform:translateY(24px) scale(.97);filter:drop-shadow(0 0 25px #f5ddc61c);animation:opening-reveal .65s cubic-bezier(.2,.65,.15,1) 1.65s forwards}
.opening-original-mark{display:none}
.opening-tagline{font-size:clamp(14px,1.4vw,18px);font-weight:400;letter-spacing:.25em;color:#e6ded9;margin:22px 0 0;opacity:0;transform:translateY(14px);animation:opening-reveal .4s ease 1.9s forwards}
.opening-enter{pointer-events:auto;display:inline-flex;align-items:center;gap:36px;margin-top:36px;padding:13px 5px;border:0;border-bottom:1px solid #ffffff3d;background:none;color:#c9bdbc;font:11px system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;letter-spacing:1px;opacity:0;transform:translateY(10px);animation:opening-reveal .25s ease 2.1s forwards;transition:color .2s,border-color .2s}
.opening-enter:hover{color:#fff;border-bottom-color:#eee4df}
.opening-enter span{font:18px Arial,sans-serif;line-height:1}
.opening-bottomline{position:absolute;left:42px;right:42px;bottom:max(27px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;gap:25px;z-index:3;color:#8c8186;font:9px system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;letter-spacing:2.2px}
.opening-bottomline p{margin:0;line-height:1.7}
.opening-bottomline span{font-size:8px;letter-spacing:2.6px;color:#bdadb1}
.opening-progress{position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,#6e1c2a,#e60012 25%,#f5e6d3);width:100%;transform:scaleX(0);transform-origin:left;animation:opening-progress 2.5s linear forwards;box-shadow:0 0 12px #e6001270}
.brand-opening button:focus-visible{outline:2px solid #f5e6d3;outline-offset:6px}
.topbar .topbar-actions{display:flex;align-items:center;gap:24px;letter-spacing:0}
.opening-replay{font:11px system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;display:inline-flex;align-items:center;gap:8px;background:transparent;padding:7px 0;color:var(--wine);white-space:nowrap}
.opening-replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.opening-replay:hover{color:#a05b68}
.brand-opening.is-reduced .opening-canvas{opacity:0}
.brand-opening.is-reduced{background:radial-gradient(ellipse at 50% 70%,#42212a 0,#100e13 40%,#07070a 78%)}
.brand-opening.is-reduced .opening-kicker,.brand-opening.is-reduced .opening-wordmark,.brand-opening.is-reduced .opening-tagline,.brand-opening.is-reduced .opening-enter{opacity:1;transform:none;animation:none}
.brand-opening.is-reduced .opening-progress{display:none}
@keyframes opening-reveal{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes opening-progress{to{transform:scaleX(1)}}
@supports not ((mask-image:url('assets/belluti-logo.png')) or (-webkit-mask-image:url('assets/belluti-logo.png'))){.opening-wordmark{background:#f7f2ea;border-radius:3px;padding:8px 14px}.opening-original-mark{display:block;width:100%}}
@media(max-width:760px){.opening-topline{left:24px;right:24px;top:max(21px,env(safe-area-inset-top))}.opening-topline>span{font-size:8px;letter-spacing:2px}.opening-skip{font-size:10px;padding:9px 12px;gap:12px}.opening-composition{width:88vw;top:42%}.opening-kicker{font-size:8px;letter-spacing:4.5px;margin-bottom:22px}.opening-tagline{font-size:13px;letter-spacing:.22em;margin-top:20px}.opening-enter{margin-top:28px;font-size:10px;gap:30px}.opening-bottomline{left:24px;right:24px;bottom:max(24px,env(safe-area-inset-bottom));font-size:8px;letter-spacing:1.4px}.opening-bottomline span{font-size:7px;letter-spacing:1.8px}.topbar .topbar-actions{gap:18px}.opening-replay{font-size:10px;gap:6px}}
@media(max-width:420px){.topbar>span{max-width:80px;font-size:7px;line-height:1.7}.topbar .topbar-actions{gap:14px}.topbar a{font-size:9px}.opening-replay{font-size:9px}.opening-replay svg{width:12px;height:12px}.opening-bottomline p{max-width:150px}.opening-bottomline span{font-size:6px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.brand-opening{transition:none}.opening-kicker,.opening-wordmark,.opening-tagline,.opening-enter{opacity:1;transform:none;animation:none}.opening-progress{display:none}}
@media print{.brand-opening,.opening-replay{display:none!important}}
/* Keep opening captions readable on presentation screens and phones. */
.opening-topline>span{font-size:12px;letter-spacing:2px}.opening-skip{font-size:14px;min-height:44px}.opening-kicker{font-size:13px;letter-spacing:5px}.opening-tagline{font-size:20px}.opening-enter{font-size:15px;min-height:44px}.opening-bottomline{font-size:12px;letter-spacing:1.5px}.opening-bottomline span{font-size:11px;letter-spacing:1.4px}
@media(max-width:760px){.opening-topline{gap:12px}.opening-topline>span{font-size:10px;letter-spacing:1px}.opening-skip{font-size:12px;padding:10px 12px;gap:10px}.opening-kicker{font-size:11px;letter-spacing:4px}.opening-tagline{font-size:17px}.opening-enter{font-size:14px}.opening-bottomline{font-size:10px;letter-spacing:1px;gap:15px}.opening-bottomline span{font-size:9px;letter-spacing:.8px}}
