/* Whoopsolution overrides — the states the theme's (missing) JS used to drive. */

/* Scroll reveal */
[data-anim] { opacity: 0; translate: 0 40px; transition: opacity .9s var(--ease-power4-out), translate .9s var(--ease-power4-out); }
[data-anim].is-in { opacity: 1; translate: 0 0; }
[data-anim*="delay-1"] { transition-delay: .05s; }
[data-anim*="delay-2"] { transition-delay: .12s; }
[data-anim*="delay-3"] { transition-delay: .19s; }
[data-anim*="delay-4"] { transition-delay: .26s; }
@media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1; translate: none; transition: none; } }

/* Menu */
.menu { visibility: hidden; transition: visibility 0s .7s; }
.is-menuOpened .menu { visibility: visible; pointer-events: auto; transition: none; }
.menu .menu__bg { transition: scale .7s var(--ease-power4-inOut); }
.is-menuOpened .menu .menu__bg { --tw-scale-y: 100%; }
.menu ul a { transition: translate .8s var(--ease-power4-out), opacity .3s var(--ease-power4-out); }
.is-menuOpened .menu ul a { --tw-translate-y: 0%; transition-delay: .25s, 0s; }
.menu ul a[aria-current="page"] { opacity: 1; }
[data-menu-element] { transition: opacity .5s; }
.is-menuOpened [data-menu-element] { opacity: 1; transition-delay: .4s; }
.is-menuOpened { overflow: hidden; }

/* Accordion */
[data-accordion-content] { transition: grid-template-rows .5s var(--ease-power4-out); }
[data-accordion-item="open"] [data-accordion-content] { grid-template-rows: 1fr; }

/* Big footer wordmark */
.footer-word { font-size: 13.5vw; }

/* Hero background image */
.hero-media img { animation: heroZoom 14s var(--ease-power2-out) both; }
@keyframes heroZoom { from { scale: 1.12; } to { scale: 1; } }

/* Forms */
.field { width: 100%; max-width: 100%; border-bottom: 1px solid var(--color-line-2); padding-block: 1.25rem; background: transparent; outline: none; }
.field:focus { border-color: currentColor; }
.field:user-invalid { border-color: #e5484d; }
select.field { appearance: none; cursor: pointer; }
.form-success { display: none; }
form.is-sent > :not(.form-success) { display: none; }
form.is-sent .form-success { display: block; }
.form-card { background: #fff; color-scheme: light; border-radius: 24px; padding: clamp(1.5rem, 4vw, 2.5rem); }
button[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Article body */
.prose { font-size: 1.125rem; line-height: 1.65; color: var(--color-body-1); }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { color: var(--color-title-1); font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; margin-top: 2em; }
.prose h3 { color: var(--color-title-1); font-size: 1.35rem; font-weight: 500; margin-top: 1.6em; }
.prose strong { color: var(--color-title-1); font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .5em; }
.prose blockquote { border-left: 2px solid currentColor; padding-left: 1.25em; color: var(--color-title-1); font-size: 1.35rem; line-height: 1.4; }
.prose a { text-decoration: underline; text-underline-offset: 3px; color: var(--color-title-1); }

/* Landing page sticky mobile CTA */
.mobile-cta { position: fixed; inset: auto 12px 12px; z-index: 40; }
@media (min-width: 64rem) { .mobile-cta { display: none; } }

/* Work filter */
[data-cat][hidden] { display: none; }

/* Readability scrim for text over photos */
.shade { background: linear-gradient(to bottom, rgb(3 11 20 / .55), rgb(3 11 20 / .1) 35%, rgb(3 11 20 / .25) 60%, rgb(3 11 20 / .85)); }

/* Chinese (Malaysia) typography */
:root { --font-sans: "General Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
:lang(zh) :is(h1, h2, h3, blockquote) { line-height: 1.22; letter-spacing: 0; }
:lang(zh) :is(h1, h2) { max-width: none; }
:lang(zh) p { line-height: 1.75; }
:lang(zh) .menu ul a { line-height: 1.2; }
:lang(zh) .prose { line-height: 1.85; }

/* WhatsApp floating button */
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / .2); transition: transform .3s var(--ease-power4-out); }
.wa-float:hover { transform: scale(1.06); }
.is-menuOpened .wa-float { display: none; }
.underline { text-decoration: underline; text-underline-offset: 3px; }