html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; font-family: 'Inter', system-ui, sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
/* Fluid type scale — mobile-safe */
.h-display { font-size: clamp(2.125rem, 7.2vw, 5.25rem); line-height: 1; letter-spacing: -0.035em; word-break: break-word; overflow-wrap: break-word; }
.h-section { font-size: clamp(1.75rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; word-break: break-word; overflow-wrap: break-word; }
.h-sub { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; }
.t-lead { font-size: clamp(0.95rem, 1.5vw, 1.125rem); line-height: 1.65; }
.t-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; }
.glass-card {
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
background-color: rgba(26, 25, 25, 0.7);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.glow-primary { box-shadow: 0 12px 40px rgba(255, 145, 87, 0.25), 0 0 0 1px rgba(255, 145, 87, 0.15) inset; }
.glow-soft { box-shadow: 0 0 60px rgba(255, 145, 87, 0.08); }
/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 800ms cubic-bezier(.22,.61,.36,1), transform 800ms cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal-left.is-in { opacity: 1; transform: translateX(0); }
.reveal-pop { opacity: 0; transform: scale(0.6); transition: opacity 600ms cubic-bezier(.34,1.56,.64,1), transform 600ms cubic-bezier(.34,1.56,.64,1); will-change: opacity, transform; }
.reveal-pop.is-in { opacity: 1; transform: scale(1); }
/* Animated timeline line draw */
.timeline-line { transform-origin: top center; transform: scaleY(0); transition: transform 1600ms cubic-bezier(.22,.61,.36,1); }
.timeline-line.is-in { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-left, .reveal-pop { opacity: 1 !important; transform: none !important; transition: none !important; }
.timeline-line { transform: scaleY(1) !important; transition: none !important; }
.word-reveal .w { opacity: 1 !important; transform: none !important; }
#cursor-dot, #cursor-ring, #cursor-trail { display: none !important; }
}
/* Custom cursor (desktop only) */
#cursor-dot, #cursor-ring {
position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
transform: translate3d(-100px, -100px, 0);
will-change: transform;
mix-blend-mode: screen;
}
#cursor-dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255, 145, 87, 1);
box-shadow: 0 0 14px rgba(255, 145, 87, 0.9), 0 0 30px rgba(255, 145, 87, 0.5);
transition: width 180ms ease, height 180ms ease, background 180ms ease;
}
#cursor-ring {
width: 40px; height: 40px; border-radius: 50%;
border: 1.5px solid rgba(255, 145, 87, 0.55);
box-shadow: 0 0 20px rgba(255, 145, 87, 0.35);
transition: width 250ms ease, height 250ms ease, border-color 250ms ease, background-color 250ms ease;
margin-left: -20px; margin-top: -20px;
}
#cursor-dot.is-hover { width: 14px; height: 14px; }
#cursor-ring.is-hover {
width: 64px; height: 64px; margin-left: -32px; margin-top: -32px;
border-color: rgba(255, 145, 87, 0.9);
background: rgba(255, 145, 87, 0.08);
}
@media (hover: none), (pointer: coarse) {
#cursor-dot, #cursor-ring { display: none !important; }
}
body.has-custom-cursor { cursor: none; }
body.has-custom-cursor a, body.has-custom-cursor button { cursor: none; }
/* Word-by-word reveal */
.word-reveal .w {
display: inline-block;
opacity: 0;
transform: translateY(24px) rotateX(-35deg);
transform-origin: center bottom;
transition: opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1);
will-change: opacity, transform;
}
.word-reveal.is-in .w { opacity: 1; transform: translateY(0) rotateX(0); }
/* Floating glow orb that follows mouse, section-scoped */
.ambient-cursor {
position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.ambient-cursor::before {
content: ''; position: absolute;
width: 480px; height: 480px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,145,87,0.18) 0%, rgba(255,145,87,0.05) 40%, transparent 70%);
left: var(--mx, 50%); top: var(--my, 50%);
transform: translate(-50%, -50%);
transition: left 220ms ease-out, top 220ms ease-out, opacity 300ms;
opacity: 0;
filter: blur(12px);
}
.ambient-cursor.is-active::before { opacity: 1; }
/* Timeline premium cards */
.step-card {
background-color: rgba(22, 21, 21, 0.92);
background-image: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 60%);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
transition: transform 400ms cubic-bezier(.22,.61,.36,1), border-color 400ms, box-shadow 400ms;
}
.step-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 145, 87, 0.32);
box-shadow: 0 10px 50px rgba(0,0,0,0.5), 0 0 60px rgba(255, 145, 87, 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}
.step-card-accent {
background-color: rgba(28, 22, 18, 0.92);
background-image: linear-gradient(180deg, rgba(255,145,87,0.06), rgba(255,145,87,0) 65%);
border-color: rgba(255, 145, 87, 0.28);
box-shadow: 0 4px 30px rgba(0,0,0,0.4), 0 0 60px rgba(255, 145, 87, 0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}
.step-card-accent:hover {
border-color: rgba(255, 145, 87, 0.5);
box-shadow: 0 10px 50px rgba(0,0,0,0.5), 0 0 80px rgba(255, 145, 87, 0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Button reset for touch */
button, a { -webkit-tap-highlight-color: transparent; }
.btn-primary {
background: linear-gradient(180deg, #FFA06B 0%, #FF7A2C 100%);
color: #000;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: transform .2s ease, box-shadow .3s ease;
box-shadow: 0 10px 30px rgba(255, 145, 87, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255, 145, 87, 0.45); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: #fff;
transition: all .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,145,87,0.4); }
/* Animations */
@keyframes activityFade {
0%, 8% { opacity: 0; transform: translateY(8px); }
14%, 86% { opacity: 1; transform: translateY(0); }
92%, 100% { opacity: 0; transform: translateY(-4px); }
}
.activity-item { animation: activityFade 9s infinite ease-in-out; }
.activity-item:nth-child(1) { animation-delay: 0s; }
.activity-item:nth-child(2) { animation-delay: 0.8s; }
.activity-item:nth-child(3) { animation-delay: 1.6s; }
@keyframes pulseDot {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.pulse-dot { animation: pulseDot 2s infinite; }
@keyframes revealUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: revealUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* Timeline connector */
.connector-h { height: 2px; background: linear-gradient(90deg, rgba(255,145,87,0.6), rgba(255,145,87,0.1)); flex: 1; }
.connector-v { width: 2px; background: linear-gradient(180deg, rgba(255,145,87,0.6), rgba(255,145,87,0.1)); height: 24px; }
/* Hide scrollbars in the kanban scroll */
.scroll-soft::-webkit-scrollbar { height: 6px; }
.scroll-soft::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 9999px; }
/* Section helpers — larger vertical rhythm on mobile */
.section-y { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section-x { padding-inline: clamp(1.25rem, 4vw, 3rem); }