html { scroll-behavior: smooth; background: #FBF4E2; }
body { background: transparent; }
/* Ambient page background — kasavu-inspired diamond grid:
small gold dots + crossing diagonal lines that form a rhombus pattern.
Fixed to the viewport so it acts like quiet textured paper that stays
in place while content scrolls past it. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background-color: #FBF4E2;
background-image:
/* tiny gold dots */
radial-gradient(circle, rgba(232, 178, 58, 0.10) 1.2px, transparent 1.6px),
/* warm dots, larger and offset */
radial-gradient(circle, rgba(192, 83, 59, 0.06) 1.8px, transparent 2.4px),
/* diagonal lines forming the diamond grid */
linear-gradient(45deg, transparent 47%, rgba(232, 178, 58, 0.08) 49%, rgba(232, 178, 58, 0.08) 51%, transparent 53%),
linear-gradient(-45deg, transparent 47%, rgba(232, 178, 58, 0.08) 49%, rgba(232, 178, 58, 0.08) 51%, transparent 53%);
background-size: 32px 32px, 64px 64px, 80px 80px, 80px 80px;
background-position: 0 0, 16px 16px, 0 0, 0 0;
animation: bgDrift 90s linear infinite;
}
@keyframes bgDrift {
0% { background-position: 0 0, 16px 16px, 0 0, 0 0; }
100% { background-position: 32px 32px, 48px 48px, 80px 80px, -80px 80px; }
}
/* Hand-drawn underline */
.squiggle {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 0.35em;
padding-bottom: 0.1em;
}
/* subtle paper grain on cream */
.paper {
background-image:
radial-gradient(rgba(120, 80, 30, 0.04) 1px, transparent 1px),
radial-gradient(rgba(120, 80, 30, 0.03) 1px, transparent 1px);
background-size: 22px 22px, 11px 11px;
background-position: 0 0, 11px 11px;
}
/* gentle float animation */
@keyframes float {
0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
50% { transform: translateY(-6px) rotate(var(--r, 0deg)); }
}
.float-slow { animation: float 6s ease-in-out infinite; }
.float-mid { animation: float 4.5s ease-in-out infinite; }
/* Composite float + sway — one animation, both motions, so they stack
properly. CSS only allows ONE `animation` shorthand per element, so
elements that need both motions use `.float-sway-*` instead of
combining `.float-* .sway` (which silently kills the float).
Gentle - just enough to read as "alive" without looking jittery. */
@keyframes floatSway {
0%, 100% { transform: translateY(0) rotate(calc(var(--r, 0deg) - 2deg)); }
50% { transform: translateY(-4px) rotate(calc(var(--r, 0deg) + 2deg)); }
}
.float-sway-slow { animation: floatSway 9s ease-in-out infinite; transform-origin: bottom center; }
.float-sway-mid { animation: floatSway 7s ease-in-out infinite; transform-origin: bottom center; }
.float-sway-fast { animation: floatSway 5.5s ease-in-out infinite; transform-origin: bottom center; }
/* dotted divider */
.dots {
background-image: radial-gradient(circle, #C0533B 1.5px, transparent 1.5px);
background-size: 14px 14px;
background-repeat: repeat-x;
background-position: center;
height: 14px;
}
/* scroll reveal */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
.reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.reveal-tilt {
opacity: 0;
transform: translateY(28px) rotate(-3deg);
transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal-tilt.is-in {
opacity: 1;
transform: translateY(0) rotate(-2deg);
}
/* draw-on squiggle */
@keyframes drawSquiggle {
from { stroke-dashoffset: 240; }
to { stroke-dashoffset: 0; }
}
.draw-squiggle path {
stroke-dasharray: 240;
stroke-dashoffset: 240;
}
.draw-squiggle.is-in path {
animation: drawSquiggle 1.4s ease-out 0.3s forwards;
}
/* tactile press */
.press {
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.press:hover { transform: translateY(-2px); }
.press:active { transform: translateY(1px) scale(0.98); }
/* hover tilt for cards */
.tilt {
transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease;
}
.tilt:hover {
transform: translateY(-6px) rotate(-0.5deg);
box-shadow: 0 24px 48px -22px rgba(74, 49, 18, 0.35);
}
/* gentle wiggle for elephant logo on hover */
@keyframes wiggle {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(-8deg); }
75% { transform: rotate(8deg); }
}
.wiggle-on-hover:hover svg { animation: wiggle 0.6s ease-in-out; }
/* leaf sway */
@keyframes sway {
0%, 100% { transform: rotate(var(--r, 0deg)); }
50% { transform: rotate(calc(var(--r, 0deg) + 4deg)); }
}
.sway { animation: sway 7s ease-in-out infinite; transform-origin: bottom center; }
/* ===== ADDED ANIMATIONS ===== */
/* Inline squiggle that draws on reveal */
.squiggle-svg {
position: relative;
display: inline-block;
white-space: nowrap;
}
.squiggle-svg > svg {
position: absolute;
left: -2%;
bottom: -0.18em;
width: 104%;
height: 0.55em;
overflow: visible;
pointer-events: none;
}
.squiggle-svg > svg path {
fill: none;
stroke: #E8B23A;
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 260;
stroke-dashoffset: 260;
}
.squiggle-svg.is-in > svg path {
animation: drawSquiggle 1.1s cubic-bezier(.5,.05,.2,1) 0.25s forwards;
}
/* Steam wisps for the chaaya cup */
@keyframes steam {
0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.9); }
30% { opacity: 0.7; }
100% { opacity: 0; transform: translateY(-32px) translateX(-6px) scale(1.4); }
}
.steam {
animation: steam 3.2s ease-out infinite;
transform-origin: center bottom;
}
.steam.s-2 { animation-delay: 1.1s; animation-duration: 3.6s; }
.steam.s-3 { animation-delay: 2.2s; animation-duration: 3s; }
/* Marquee strip */
@keyframes marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.marquee-track {
display: inline-flex;
align-items: center;
animation: marquee 28s linear infinite;
white-space: nowrap;
will-change: transform;
}
/* One-shot bounce for the nav elephant on first paint */
@keyframes elephant-walk-in {
0% { transform: translateX(-12px) rotate(-12deg); opacity: 0; }
55% { transform: translateX(2px) rotate(6deg); opacity: 1; }
80% { transform: translateX(-1px) rotate(-3deg); }
100% { transform: translateX(0) rotate(0); opacity: 1; }
}
.elephant-enter { animation: elephant-walk-in 1s cubic-bezier(.34,1.56,.64,1) both; }
/* Tiny twinkle for the kasavu border dots */
@keyframes twinkle {
0%, 100% { opacity: 0.85; }
50% { opacity: 0.35; }
}
.kasavu-twinkle rect.dot {
animation: twinkle 2.4s ease-in-out infinite;
}
/* Process card: mounts a cosy little glow when active */
@keyframes activeGlow {
0% { box-shadow: 0 0 0 0 rgba(232, 178, 58, 0.45); }
70% { box-shadow: 0 0 0 10px rgba(232, 178, 58, 0); }
100% { box-shadow: 0 0 0 0 rgba(232, 178, 58, 0); }
}
.active-pulse { animation: activeGlow 1.4s ease-out 1; }
/* 3D parallax for person cards (desktop hover) */
.parallax-card {
transform-style: preserve-3d;
transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
will-change: transform;
}
.parallax-card .parallax-inner {
transform: translateZ(20px);
transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
/* Underline-grow link */
.grow-underline {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-size: 0% 2px;
background-repeat: no-repeat;
transition: background-size 0.4s cubic-bezier(.2,.7,.2,1);
padding-bottom: 2px;
}
.grow-underline:hover { background-size: 100% 2px; }
/* Tag chip pop on hover */
.chip-pop {
transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.chip-pop:hover { transform: translateY(-2px) rotate(-1.5deg); }
/* Pulse ring for "live" status dot */
@keyframes ping-soft {
0% { transform: scale(1); opacity: 0.7; }
80%, 100% { transform: scale(2.5); opacity: 0; }
}
.ping-soft::after {
content: "";
position: absolute;
inset: 0;
border-radius: 9999px;
background: currentColor;
animation: ping-soft 2s cubic-bezier(0,0,0.2,1) infinite;
}
/* ===== ROUND 2: more interaction-driven motion ===== */
/* Service card lift + icon spin on hover */
.svc-card {
transition: transform 0.45s cubic-bezier(.2,.8,.2,1),
box-shadow 0.45s cubic-bezier(.2,.8,.2,1),
border-color 0.45s ease;
will-change: transform;
}
.svc-card:hover {
transform: translateY(-6px) rotate(-0.4deg);
box-shadow: 0 25px 45px -20px rgba(42, 31, 20, 0.18);
}
.svc-card .svc-icon {
transition: transform 0.7s cubic-bezier(.34,1.56,.64,1), color 0.4s;
transform-origin: center;
}
.svc-card:hover .svc-icon {
transform: rotate(-12deg) scale(1.1);
}
.svc-card .svc-arrow {
transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.3s;
opacity: 0;
}
.svc-card:hover .svc-arrow {
transform: translateX(4px);
opacity: 1;
}
/* Person card initials wobble on hover */
.parallax-card .parallax-inner .initials-disc {
transition: transform 0.6s cubic-bezier(.34,1.56,.64,1);
}
.parallax-card:hover .parallax-inner .initials-disc {
transform: rotate(-8deg) scale(1.05);
}
/* Process body reveal: turmeric line draws under title before content fades */
@keyframes drawUnderline {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.process-active .underline-grow {
transform-origin: left center;
animation: drawUnderline 0.5s cubic-bezier(.5,.05,.2,1) forwards;
}
.underline-grow {
transform: scaleX(0);
transform-origin: left center;
}
/* Submit button success burst */
@keyframes burstRing {
0% { transform: scale(0.8); opacity: 0.6; }
100% { transform: scale(2.4); opacity: 0; }
}
.burst-ring {
position: absolute;
inset: 0;
border-radius: 9999px;
border: 3px solid #E8B23A;
pointer-events: none;
animation: burstRing 0.9s cubic-bezier(.2,.7,.2,1) forwards;
}
/* Wordmark shimmer (gold sweep across the brand text every 8s) */
@keyframes brandShimmer {
0%, 75% { background-position: 100% 0; }
90% { background-position: -100% 0; }
100% { background-position: -100% 0; }
}
.brand-shimmer {
background: linear-gradient(
100deg,
currentColor 0%,
currentColor 35%,
#E8B23A 50%,
currentColor 65%,
currentColor 100%
);
background-size: 250% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: brandShimmer 8s ease-in-out infinite;
}
/* Split-flap number reveal for process step badges */
@keyframes flapIn {
0% { transform: rotateX(-90deg); opacity: 0; }
60% { transform: rotateX(20deg); opacity: 1; }
100% { transform: rotateX(0); opacity: 1; }
}
.flap-in {
display: inline-block;
animation: flapIn 0.7s cubic-bezier(.34,1.56,.64,1) both;
transform-origin: center bottom;
backface-visibility: hidden;
}
/* Form field focus: ring expands from inside */
.focus-ring {
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.focus-ring:focus {
box-shadow: 0 0 0 4px rgba(232, 178, 58, 0.18);
}
/* Scroll-driven palm parallax — controlled by --sy var set by JS */
.palm-parallax {
transition: transform 0.05s linear;
will-change: transform;
}
/* ===== FIRST-LOAD LOADER =====
Warm cream takeover with three little elephants bouncing in procession,
like a tiny aanapappan parade. Slides up to reveal the page.
Plays once per session. */
#intro-loader {
position: fixed; inset: 0;
background: #FBF4E2;
z-index: 9999;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 0;
transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.7s ease;
}
#intro-loader.done {
transform: translateY(-100%);
visibility: hidden;
pointer-events: none;
}
/* "Welcome" greeting in the brand brick, hand-written feel */
.loader-welcome {
font-family: "Caveat", cursive;
font-size: clamp(34px, 6vw, 56px);
color: #C0533B;
margin-bottom: 1.75rem;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.loader-welcome.visible { opacity: 1; transform: translateY(0); }
/* Procession of three elephants. Each bounces in turn — when all three
have hopped, that's one full cycle, looping until loader hides. */
.loader-procession {
display: flex;
gap: 18px;
margin-bottom: 2rem;
}
.loader-procession > * {
width: 56px; height: 56px;
animation: elephantHop 1.2s ease-in-out infinite;
}
.loader-procession > *:nth-child(1) { animation-delay: 0s; }
.loader-procession > *:nth-child(2) { animation-delay: 0.18s; }
.loader-procession > *:nth-child(3) { animation-delay: 0.36s; }
@keyframes elephantHop {
0%, 60%, 100% { transform: translateY(0) scaleY(1); }
30% { transform: translateY(-14px) scaleY(1.05); }
45% { transform: translateY(0) scaleY(0.95); }
}
/* Studio name + tagline beneath, both in warm tones */
.loader-name {
font-family: "Fraunces", serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(42, 31, 20, 0.7);
}
.loader-role {
font-family: "Caveat", cursive;
font-size: 20px;
color: #C0533B;
margin-top: 4px;
}
/* ===== DRIFT ORBS (ported from portfolio) =====
Three large blurred radial gradients, drifting slowly in the background.
Tinted with brand colors instead of blue/teal. */
@keyframes drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -40px) scale(1.05); }
66% { transform: translate(-20px, 20px) scale(0.95); }
}
.orb {
position: fixed;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: -1;
animation: drift linear infinite;
will-change: transform;
}
.orb1 {
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(192, 83, 59, 0.16) 0%, transparent 70%); /* brick */
top: -200px; left: -150px;
animation-duration: 20s;
}
.orb2 {
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(46, 107, 58, 0.13) 0%, transparent 70%); /* leaf */
bottom: 10%; right: -100px;
animation-duration: 25s;
animation-delay: -10s;
}
.orb3 {
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(232, 178, 58, 0.12) 0%, transparent 70%); /* turmeric */
top: 40%; left: 30%;
animation-duration: 30s;
animation-delay: -5s;
}
/* ===== DIVIDER SCAN (ported) =====
Slow sweeping gradient on horizontal section dividers. */
@keyframes dividerScan {
0% { background-position: -100% center; }
100% { background-position: 200% center; }
}
.divider-scan {
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(192, 83, 59, 0.25),
rgba(232, 178, 58, 0.55),
rgba(192, 83, 59, 0.25),
transparent);
background-size: 300% auto;
animation: dividerScan 6s linear infinite;
border: none;
}
/* ===== SECTION-TITLE UNDERLINE GROW (ported) =====
Title's ::after grows from width:0 to a small bar when in view. */
.section-title-grow {
position: relative;
}
.section-title-grow::after {
content: '';
display: block;
width: 0;
height: 3px;
background: linear-gradient(90deg, #C0533B, #E8B23A);
margin-top: 14px;
border-radius: 2px;
transition: width 0.7s ease 0.3s;
}
.section-title-grow.is-in::after {
width: 56px;
}
/* ===== STAGGER-GRID (ported) =====
Children fade up sequentially when grid enters view. */
.stagger-grid > * {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
.stagger-grid.is-in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.stagger-grid.is-in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.10s; }
.stagger-grid.is-in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.15s; }
.stagger-grid.is-in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.20s; }
.stagger-grid.is-in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.25s; }
.stagger-grid.is-in > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.30s; }
.stagger-grid.is-in > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.35s; }
.stagger-grid.is-in > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.40s; }
.stagger-grid.is-in > *:nth-child(n+9){ opacity: 1; transform: none; transition-delay: 0.45s; }
/* ===== SCROLL HINT (ported) =====
Small "scroll" indicator at the hero bottom with a scanning line
and a gentle opacity pulse. */
@keyframes scrollPulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
@keyframes scanLine {
0% { left: -100%; }
100% { left: 100%; }
}
.scroll-hint {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #5A4634;
animation: scrollPulse 2.5s ease infinite;
}
.scroll-hint .scan-line {
position: relative;
width: 36px; height: 1px;
background: rgba(90, 70, 52, 0.3);
overflow: hidden;
display: inline-block;
}
.scroll-hint .scan-line::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: #C0533B;
animation: scanLine 2s ease-in-out infinite;
}
/* Stage the hero block — each direct child rises UP into place from
below, cascading top-to-bottom for a "lifting in" entrance.
transform + opacity only (no filter) so it's GPU-composited and
smooth even on slower hardware. */
@keyframes heroFlowUp {
0% { transform: translate3d(0, 24px, 0); opacity: 0; }
100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
/* The wrapper itself doesn't move - it's a positioning container only.
Children animate in sequence. */
.hero-flow > * {
opacity: 0;
will-change: transform, opacity;
animation: heroFlowUp 0.85s cubic-bezier(.2,.8,.2,1) both;
}
/* Stagger the direct children of the hero (eyebrow → headline → para → buttons → status).
The hero-flow class is added by JS the moment the loader fires its
slide-up event, so these delays start fresh from t=0 at that moment. */
.hero-flow > *:nth-child(1) { animation-delay: 0.05s; }
.hero-flow > *:nth-child(2) { animation-delay: 0.20s; }
.hero-flow > *:nth-child(3) { animation-delay: 0.35s; }
.hero-flow > *:nth-child(4) { animation-delay: 0.50s; }
.hero-flow > *:nth-child(5) { animation-delay: 0.65s; }
.hero-flow > *:nth-child(6) { animation-delay: 0.80s; }
.hero-flow > *:nth-child(7) { animation-delay: 0.95s; }
/* Reduced motion: kill ambient + decorative animations.
Keep reveal opacity transitions and instant transforms. */
@media (prefers-reduced-motion: reduce) {
.float-slow, .float-mid, .sway,
.float-sway-slow, .float-sway-mid, .float-sway-fast,
.steam, .kasavu-twinkle rect.dot,
.ping-soft::after, .brand-shimmer,
.elephant-enter, .flap-in,
.palm-parallax,
.orb, .scroll-hint, .scroll-hint .scan-line::after,
.divider-scan,
#intro-loader, .loader-procession > *, .loader-welcome,
.hero-flow > * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
#intro-loader { display: none !important; }
body::before { animation: none !important; }
.svc-card:hover { transform: none; }
.reveal, .reveal-tilt {
transition-duration: 0.001ms !important;
}
.squiggle-svg > svg path {
stroke-dashoffset: 0;
}
}