/* One static Montra O component. Source logo remains unchanged. */
.page-hero,.work-intro{isolation:isolate;overflow:hidden}
.work-intro{position:relative}
.hero-emblem{--emblem-opacity:.12;--emblem-gap:min(60vw,860px);position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none;mask-image:linear-gradient(90deg,#000 0%,#000 25%,#0003 44%,#0003 56%,#000 75%,#000 100%)}
.hero-emblem::before{content:"";position:absolute;left:50%;top:50%;width:clamp(900px,88vw,1200px);aspect-ratio:445/465;transform:translate(-50%,-50%);background:url('assets/montra-o-emblem.svg') center/contain no-repeat;opacity:var(--emblem-opacity);pointer-events:none}
.work-intro>.hero-emblem{--emblem-gap:min(50vw,720px)}
.page-hero>:not(.hero-emblem),.work-intro>:not(.hero-emblem){position:relative;z-index:1}
.page-hero>:not(.hero-emblem){background:transparent;box-shadow:none}
.work-intro>h1,.work-intro>p{display:table;max-width:100%;margin-left:auto;margin-right:auto;background:transparent;box-shadow:none}
@media(max-width:650px){.hero-emblem{mask-image:linear-gradient(90deg,transparent 75%,#000 96%)}.hero-emblem::before{width:620px;left:calc(50% - 55px)}.page-hero>:not(.hero-emblem){background:transparent;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.hero-emblem,.hero-emblem::before{animation:none;transition:none}}
/* Internal comparison overrides inherit only on the decoration. */
.emblem-preview[data-level=none] .hero-emblem{--emblem-opacity:0}
.emblem-preview[data-level=subtle] .hero-emblem{--emblem-opacity:.08}
.emblem-preview[data-level=medium] .hero-emblem{--emblem-opacity:.12}
.emblem-preview[data-level=clear] .hero-emblem{--emblem-opacity:.18}

/* Keep the decoration entirely below the fixed navigation. */
.page-hero>.hero-emblem{clip-path:inset(74px 0 0)}
@media(max-width:900px){.page-hero>.hero-emblem{clip-path:inset(65px 0 0)}}

/* Home187: two very faint O layers; their combined maximum alpha is 4%.
   Compositor-only growth, already controlled by motion.js visibility/Pause. */
.home-page .hero>.home-emblem{--emblem-opacity:.04;--home-duration:18s;mask-image:radial-gradient(ellipse at 50% 57%,transparent 0%,transparent 32%,#000 80%);clip-path:inset(74px 0 0)}
.home-page .hero>.home-emblem::before,.home-page .hero>.home-emblem::after{content:"";position:absolute;left:50%;top:57%;width:max(100vw,100svh);aspect-ratio:445/465;background:url('assets/montra-o-emblem.svg') center/contain no-repeat;transform:translate(-50%,-50%) scale(.18);opacity:0;animation:montra-o-tunnel var(--home-duration) cubic-bezier(.55,.05,.8,.42) infinite;transition:none;pointer-events:none;will-change:transform,opacity}
.home-page .hero>.home-emblem::after{animation-delay:calc(var(--home-duration) / -2)}
.home-page .hero>.cv{z-index:1}
.motion-paused .home-emblem::before,.motion-paused .home-emblem::after,.home-page .hero:not(.in-view)>.home-emblem::before,.home-page .hero:not(.in-view)>.home-emblem::after{animation-play-state:paused!important}
@keyframes montra-o-tunnel{0%{transform:translate(-50%,-50%) scale(.18);opacity:0}12%{opacity:calc(var(--emblem-opacity) * .3)}35%{opacity:calc(var(--emblem-opacity) * .5)}72%{opacity:calc(var(--emblem-opacity) * .3)}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
@media(max-width:900px){.home-page .hero>.home-emblem{clip-path:inset(65px 0 0)}}
@media(prefers-reduced-motion:reduce){.home-page .hero>.home-emblem::before{animation:none;transform:translate(-50%,-50%) scale(1.25);opacity:var(--emblem-opacity);will-change:auto}.home-page .hero>.home-emblem::after{animation:none;opacity:0;will-change:auto}}