/* Reference sequence: wordmark assembly → soft dissolve → circular art reveal. */
@property --apex-reveal-radius{syntax:'<length>';inherits:false;initial-value:0px}
.apex-intro{display:none}
.apex-intro.is-running{display:grid;position:fixed;inset:0;z-index:250;place-items:center;background:#e7ddf0;overflow:hidden;color:#49354d}
.apex-intro-brand{display:flex;align-items:center;gap:clamp(16px,3vw,32px);font-family:'Nunito',system-ui,sans-serif}
.apex-intro-logo{width:clamp(72px,13vw,150px);height:auto;border-radius:25%;animation:apex-logo-enter .8s cubic-bezier(.16,1,.3,1) both}
.apex-intro-word{display:flex;font-weight:800;font-size:clamp(52px,11vw,132px);line-height:1;letter-spacing:-.04em}
.apex-intro-word span{display:block;animation:apex-letter-enter .75s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--letter) * 110ms + 110ms)}
.apex-intro-sub{font-size:clamp(10px,1.5vw,17px);letter-spacing:.32em;text-align:center;margin-top:16px;animation:apex-rise .6s .55s both}
.apex-intro-skip{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom,0px));right:clamp(20px,4vw,50px);min-height:44px;padding:10px 19px;border:1px solid #b49dc2;border-radius:999px;background:#ffffff70;color:#49354d;font:600 13px system-ui;cursor:pointer}
.apex-intro.is-leaving{animation:apex-intro-exit .6s cubic-bezier(.76,0,.24,1) both;pointer-events:none}
.apex-intro.is-leaving .apex-intro-brand{transition:transform .6s,opacity .4s;transform:translateY(-30px) scale(.96);opacity:0}
html.apex-motion-wait .apex-hero-grid>*,html.apex-motion-wait .apex-hero>p,html.apex-motion-wait #dc-root header{opacity:0}
html.apex-motion-enter #dc-root header{animation:apex-header-enter .65s .15s both}
html.apex-motion-enter .apex-hero-grid>div:first-child>*{animation:apex-rise .85s cubic-bezier(.16,1,.3,1) both;animation-delay:.14s}
html.apex-motion-enter .apex-hero-grid>div:first-child>h1{animation-delay:.23s}
html.apex-motion-enter .apex-hero-grid>div:first-child>p{animation-delay:.34s}
html.apex-motion-enter .apex-hero-grid>div:first-child>div:nth-last-child(2){animation-delay:.46s}
html.apex-motion-enter .apex-hero-grid>div:first-child>div:last-child{animation-delay:.58s}
html.apex-motion-enter .apex-art-panel{animation:apex-art-reveal 1.2s .05s cubic-bezier(.25,.8,.25,1) both;mask-image:radial-gradient(circle at 25% 24%,#000 var(--apex-reveal-radius),transparent calc(var(--apex-reveal-radius) + 1px)),radial-gradient(circle at 77% 34%,#000 var(--apex-reveal-radius),transparent calc(var(--apex-reveal-radius) + 1px)),radial-gradient(circle at 30% 76%,#000 var(--apex-reveal-radius),transparent calc(var(--apex-reveal-radius) + 1px)),radial-gradient(circle at 82% 88%,#000 var(--apex-reveal-radius),transparent calc(var(--apex-reveal-radius) + 1px))}
html.apex-motion-enter .apex-hero>p{animation:apex-rise .7s .65s both}
html.apex-motion-enter .apex-art-badge{animation:apex-badge-in 1s .6s both}
html.apex-motion-enter #apex-mobile-nav{animation:apex-nav-enter .7s .45s both}
html.apex-motion-wait #apex-mobile-nav{visibility:hidden}
.apex-motion-replay{font:600 12px 'Nunito Sans',system-ui;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;min-height:40px;border:1px solid #dfd3e4;background:#fff;color:#79568c;cursor:pointer;border-radius:999px;margin-top:16px}
@keyframes apex-letter-enter{from{opacity:0;transform:translate(28px,20px) rotate(13deg)}to{opacity:1;transform:none}}
@keyframes apex-logo-enter{from{opacity:0;transform:translateX(25px) scale(.8) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes apex-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes apex-header-enter{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes apex-nav-enter{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes apex-intro-exit{to{opacity:0;visibility:hidden}}
@keyframes apex-art-reveal{0%{--apex-reveal-radius:0px;opacity:0;transform:translateY(35px) scale(.97)}12%{opacity:1}100%{--apex-reveal-radius:650px;opacity:1;transform:none}}
@keyframes apex-badge-in{from{opacity:0;transform:translateY(16px) rotate(-20deg) scale(.8)}to{opacity:1;transform:rotate(-9deg)}}
@media(prefers-reduced-motion:reduce){
 .apex-intro.is-running{display:none}
 html.apex-motion-wait .apex-hero-grid>*,html.apex-motion-wait .apex-hero>p,html.apex-motion-wait #dc-root header{opacity:1}
 html.apex-motion-enter .apex-art-panel{mask-image:none}
 html.apex-motion-wait #apex-mobile-nav{visibility:visible}
 .apex-motion-replay{display:none}
}
/* The heading receives focus after the intro for screen readers; it is not a control. */
.apex-hero h1[tabindex="-1"]:focus{outline:none}
.apex-hero .apex-rating-line{flex-wrap:wrap;row-gap:4px}
.apex-hero .apex-rating-line>span{white-space:nowrap}

/* Observe each content item, rather than revealing a tall section all at once. */
.apex-motion-enabled .apex-reveal{opacity:1;transform:none;transition:none}
.apex-motion-enabled [data-motion-state="pending"]{opacity:0;pointer-events:none}
.apex-motion-enabled [data-motion-state="running"],.apex-motion-enabled [data-motion-state="done"]{opacity:1}
.apex-method-art{display:block;width:100%;height:240px;object-fit:cover;object-position:50% 62%;border-radius:32px}
@media(max-width:600px){.apex-method-art{height:210px}}
@media(prefers-reduced-motion:reduce){.apex-motion-enabled [data-motion-state="pending"]{opacity:1;pointer-events:auto}}