/* Design system variables and typography tokens */
:root {
--font-sans: 'Inter', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Microsoft JhengHei', sans-serif;
--font-display: 'Archivo', 'Inter', 'Noto Sans TC', 'Noto Sans SC', 'PingFang HK', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, sans-serif;
--color-bg-base: #fbfdfc;
--color-text-main: #1e293b;
--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Confining viewport width to prevent mobile horizontal panning.
   `overflow-x: clip` (not `hidden`) is used deliberately: unlike `hidden`,
   `clip` does NOT create a scroll container, so it never breaks
   `position: sticky` descendants. `hidden` is kept as a fallback first. */
html, body {
overflow-x: hidden;
overflow-x: clip;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}

html {
font-family: var(--font-sans);
background-color: var(--color-bg-base);
color: var(--color-text-main);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

/* Let Lenis own the scroll; keep native smooth only as a no-JS fallback */
html:not(.lenis) {
scroll-behavior: smooth;
}
/* Lenis base styles (mirrors the library's recommended CSS) */
html.lenis, html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}

/* Page transition curtain: wipes in on navigation, wipes out on arrival */
#koasis-page-transition {
position: fixed;
inset: 0;
z-index: 99997;
pointer-events: none;
background: linear-gradient(135deg, #022c22 0%, #064e3b 100%);
transform: translateY(100%);
transition: transform 0.42s cubic-bezier(0.76, 0, 0.24, 1);
}
#koasis-page-transition.active {
pointer-events: auto;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
#koasis-page-transition { display: none !important; }
}

/* Custom cursor: hide native pointer on hover devices
   Scoped to `body.koasis-custom-cursor`, which JS adds only after the cursor
   dot/orb are actually rendered. Without JS (or if common.js fails to load)
   the native cursor is always kept visible. */
@media (hover: hover) and (pointer: fine) {
body.koasis-custom-cursor, body.koasis-custom-cursor * {
cursor: none !important;
}
body.koasis-custom-cursor input, body.koasis-custom-cursor textarea, body.koasis-custom-cursor select {
cursor: auto !important;
}
}

@media (hover: none), (pointer: coarse) {
#koasis-cursor-dot, #koasis-interactive-orb {
display: none !important;
}
}

/* Never transform the body to keep position:fixed elements pinned */
body {
background-color: var(--color-bg-base);
}

/* Navigation drawer: fully offscreen when closed */
#nav-drawer {
visibility: hidden;
pointer-events: none;
transform: translate3d(100%, 0, 0);
transition: transform 0.25s var(--ease-smooth), visibility 0.25s ease;
}

#nav-drawer.open {
visibility: visible;
pointer-events: auto;
transform: translate3d(0, 0, 0);
}

/* Typography & Fluid Sizing */
.font-display {
font-family: var(--font-display);
letter-spacing: -0.03em;
}

.text-fluid-hero {
font-size: clamp(2.5rem, 5.5vw + 0.5rem, 5.5rem);
line-height: 1.02;
}

.text-fluid-title {
font-size: clamp(1.875rem, 3.5vw + 0.75rem, 3.25rem);
line-height: 1.15;
}

/* Honor the user's motion preference everywhere by default */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}

/* Custom JS cursor dot & ambient orb */
#koasis-cursor-dot {
position: fixed;
top: 0;
left: 0;
width: 12px;
height: 12px;
background-color: #047857;
border: 2px solid #34d399;
box-shadow: 0 0 12px rgba(5, 150, 105, 0.6);
border-radius: 50%;
pointer-events: none;
z-index: 99999;
transform: translate3d(-100px, -100px, 0);
transition: width 0.15s ease, height 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
opacity: 0;
}

#koasis-cursor-dot.cursor-hover {
width: 26px;
height: 26px;
background-color: rgba(5, 150, 105, 0.25);
border-color: #10b981;
box-shadow: 0 0 16px rgba(52, 211, 153, 0.8);
}

#koasis-interactive-orb {
position: fixed;
top: 0;
left: 0;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(16, 185, 129, 0.07) 0%, rgba(5, 150, 105, 0.02) 45%, transparent 70%);
pointer-events: none;
z-index: 1;
transform: translate3d(-1000px, -1000px, 0);
opacity: 0;
transition: opacity 0.25s ease;
}

/* Lightweight scroll reveal animation */
.reveal-on-scroll {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.active {
opacity: 1;
transform: translateY(0);
}

/* Surfaces & Cards */
.hero-mesh-gradient {
background-color: #f3faf6;
background-image:
radial-gradient(at 12% 8%, rgba(167, 243, 208, 0.55) 0px, transparent 48%),
radial-gradient(at 88% 12%, rgba(153, 246, 228, 0.45) 0px, transparent 46%),
radial-gradient(at 50% 108%, rgba(209, 250, 229, 0.60) 0px, transparent 55%),
linear-gradient(180deg, #eefaf3 0%, #fbfdfc 62%);
}

.bg-grain-texture {
background-image: radial-gradient(rgba(6, 78, 59, 0.06) 1px, transparent 0);
background-size: 24px 24px;
}

/* Cards: rich hover with a tinted gradient wash + glow (Awwwards feel) */
.card-subtle-glow {
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth), border-color 0.35s ease;
}

/* Gradient wash overlaying the card background (above bg, below content) */
.card-subtle-glow::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(45, 212, 191, 0.05) 45%, transparent 72%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}

.card-subtle-glow > * {
position: relative;
z-index: 1;
}

.card-subtle-glow:hover {
transform: translateY(-6px);
box-shadow: 0 24px 45px -18px rgba(5, 150, 105, 0.35), 0 0 0 1px rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.55);
}

.card-subtle-glow:hover::before {
opacity: 1;
}

.card-row-glow {
position: relative;
isolation: isolate;
transition: transform 0.28s var(--ease-smooth), box-shadow 0.28s var(--ease-smooth), border-color 0.28s ease;
}

.card-row-glow:hover {
transform: translateY(-3px);
box-shadow: 0 18px 32px -14px rgba(5, 150, 105, 0.30);
border-color: rgba(16, 185, 129, 0.55);
}

.cta-box-glow {
background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
box-shadow: 0 25px 50px -12px rgba(2, 44, 34, 0.35);
}