/* ============================================================
   BASE STYLES — Reset, Typography, Layout Grid
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--color-gray-900);
    background-color: var(--color-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard);
}
a:hover { color: var(--color-primary-dark); }

ul, ol { list-style: none; }

table {
    border-collapse: collapse;
    width: 100%;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button { cursor: pointer; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
}

h1 { font-size: var(--text-4xl); margin-bottom: var(--space-6); }
h2 { font-size: var(--text-3xl); margin-bottom: var(--space-5); }
h3 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
h4 { font-size: var(--text-xl);  margin-bottom: var(--space-3); }
h5 { font-size: var(--text-lg);  margin-bottom: var(--space-2); }
h6 { font-size: var(--text-base); margin-bottom: var(--space-2); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }

.text-muted   { color: var(--color-gray-600); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }
.text-white   { color: var(--color-white); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

/* ── Layout ── */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.container-lg { max-width: var(--container-2xl); }
.container-sm { max-width: var(--container-md); }

.section {
    padding: var(--space-16) 0;
}

.section-sm { padding: var(--space-10) 0; }
.section-lg { padding: var(--space-24) 0; }

/* ── Grid ── */
.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Flex Utilities ── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ── Spacing Utilities ── */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* ── Display Utilities ── */
.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ── Main Content Wrapper ── */
.main-content {
    min-height: calc(100vh - var(--header-height) - 200px);
    padding-top: var(--header-height);
}

/* ── Page Header / Hero ── */
.page-header {
    background: linear-gradient(135deg, var(--color-ocean-dark) 0%, var(--color-ocean) 20%, var(--color-teal) 50%, var(--color-ocean-light) 70%, var(--color-purple) 100%);
    color: var(--color-white);
    padding: var(--space-12) 0 var(--space-10);
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.page-header .container { position: relative; z-index: 1; }
.page-header h1 {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}
.page-header p {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.85);
    max-width: 600px;
}

/* ── Breadcrumbs ── */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--space-4);
}
.breadcrumbs a {
    color: rgba(255,255,255,0.85);
    transition: color var(--motion-fast) var(--ease-standard);
}
.breadcrumbs a:hover { color: var(--color-white); }
.breadcrumbs .separator { opacity: 0.5; }

/* ── Scroll Reveal Animation ── */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--motion-slow) var(--ease-standard),
                transform var(--motion-slow) var(--ease-standard);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Skeleton Loading ── */
.skeleton {
    background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }


/* ============================================================
   PREMIUM ANIMATION SYSTEM (Dribbble-inspired)
   Scroll reveals, 3D tilt, parallax, text effects, micro-interactions
   ============================================================ */

/* ── Override dark-theme section opacity — let JS handle reveals ── */
.section {
    opacity: 1 !important;
    transform: none !important;
}

/* ── SCROLL-TRIGGERED REVEALS ── */

/* data-animate initial state — applied by JS only after observer setup */

[data-animate="fade-up"],
[data-animate=""] {
    transform: translate3d(0, 60px, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-up"].is-visible,
[data-animate=""].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

[data-animate="fade-down"] {
    transform: translate3d(0, -60px, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-down"].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

[data-animate="fade-left"] {
    transform: translate3d(-80px, 0, 0);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-left"].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

[data-animate="fade-right"] {
    transform: translate3d(80px, 0, 0);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-right"].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

[data-animate="scale-up"] {
    transform: scale(0.85);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="scale-up"].is-visible { opacity: 1; transform: scale(1); }

[data-animate="scale-down"] {
    transform: scale(1.15);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="scale-down"].is-visible { opacity: 1; transform: scale(1); }

[data-animate="flip-up"] {
    transform: perspective(1200px) rotateX(30deg) translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="flip-up"].is-visible { opacity: 1; transform: perspective(1200px) rotateX(0) translateY(0); }

[data-animate="clip-up"] {
    clip-path: inset(100% 0 0 0);
    opacity: 1;
    transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="clip-up"].is-visible { clip-path: inset(0 0 0 0); }

[data-animate="clip-left"] {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
    transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="clip-left"].is-visible { clip-path: inset(0 0 0 0); }

[data-animate="blur-in"] {
    filter: blur(20px);
    transform: scale(1.05);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="blur-in"].is-visible { opacity: 1; filter: blur(0); transform: scale(1); }

[data-animate="rotate-in"] {
    transform: rotate(-8deg) scale(0.9) translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="rotate-in"].is-visible { opacity: 1; transform: rotate(0) scale(1) translateY(0); }

[data-animate][data-delay] { transition-delay: var(--anim-delay, 0ms); }

/* ── STAGGER CHILDREN ── */

.stagger-children > * {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-children.is-visible > *:nth-child(1)  { transition-delay: 0ms; }
.stagger-children.is-visible > *:nth-child(2)  { transition-delay: 80ms; }
.stagger-children.is-visible > *:nth-child(3)  { transition-delay: 160ms; }
.stagger-children.is-visible > *:nth-child(4)  { transition-delay: 240ms; }
.stagger-children.is-visible > *:nth-child(5)  { transition-delay: 320ms; }
.stagger-children.is-visible > *:nth-child(6)  { transition-delay: 400ms; }
.stagger-children.is-visible > *:nth-child(7)  { transition-delay: 480ms; }
.stagger-children.is-visible > *:nth-child(8)  { transition-delay: 560ms; }
.stagger-children.is-visible > *:nth-child(9)  { transition-delay: 640ms; }
.stagger-children.is-visible > *:nth-child(10) { transition-delay: 720ms; }
.stagger-children.is-visible > *:nth-child(11) { transition-delay: 800ms; }
.stagger-children.is-visible > *:nth-child(12) { transition-delay: 880ms; }
.stagger-children.is-visible > * { opacity: 1; transform: translate3d(0, 0, 0); }

/* ── 3D CARD TILT ── */

.card-3d {
    --rx: 0deg; --ry: 0deg; --glow-x: 50%; --glow-y: 50%;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-3d:hover {
    transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(10px);
    box-shadow: 0 30px 60px -10px rgba(0,0,0,0.18), 0 18px 36px -6px rgba(0,0,0,0.12);
}
.card-3d::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(400px circle at var(--glow-x) var(--glow-y), rgba(255,255,255,0.15) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2;
}
.card-3d:hover::after { opacity: 1; }

/* ── MAGNETIC BUTTONS ── */

.btn-magnetic {
    --mag-x: 0px; --mag-y: 0px;
    transform: translate3d(var(--mag-x), var(--mag-y), 0);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple .ripple-ring {
    position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35);
    transform: scale(0); animation: rippleExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: none;
}
@keyframes rippleExpand { to { transform: scale(4); opacity: 0; } }

/* ── TEXT ANIMATIONS ── */

.split-text .char {
    display: inline-block; opacity: 0; transform: translateY(100%);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.split-text.is-visible .char { opacity: 1; transform: translateY(0); }

.word-reveal .word { display: inline-block; overflow: hidden; }
.word-reveal .word-inner {
    display: inline-block; transform: translateY(110%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.word-reveal.is-visible .word-inner { transform: translateY(0); }

.text-shimmer {
    background: linear-gradient(90deg, var(--color-ocean) 0%, var(--color-gold) 25%, var(--color-lavender) 50%, var(--color-ocean) 75%, var(--color-gold) 100%);
    background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: textShimmerSlide 4s ease-in-out infinite;
}
@keyframes textShimmerSlide { 0% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

.typewriter-cursor::after { content: "|"; animation: cursorBlink 1s step-end infinite; color: var(--color-primary); font-weight: 300; }
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── PARALLAX ── */
[data-parallax] { transform: translate3d(0, var(--parallax-y, 0px), 0); will-change: transform; transition: transform 0.1s linear; }

/* ── IMAGE REVEALS ── */

.img-reveal-zoom { overflow: hidden; border-radius: inherit; }
.img-reveal-zoom img, .img-reveal-zoom .img-bg { transform: scale(1.3); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.img-reveal-zoom.is-visible img, .img-reveal-zoom.is-visible .img-bg { transform: scale(1); }

.img-reveal-blur img { filter: blur(20px) saturate(1.2); transform: scale(1.1); transition: filter 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.img-reveal-blur.is-visible img { filter: blur(0) saturate(1); transform: scale(1); }

.img-curtain { position: relative; overflow: hidden; }
.img-curtain::before { content: ""; position: absolute; inset: 0; background: var(--color-primary); z-index: 2; transform: scaleX(1); transform-origin: right; transition: transform 0.9s cubic-bezier(0.85, 0, 0.15, 1); }
.img-curtain.is-visible::before { transform: scaleX(0); transform-origin: left; }

/* ── HERO CINEMATIC ── */

.hero-cinematic .hero-bg { animation: cinematicKenBurns 25s ease-in-out infinite alternate; }
@keyframes cinematicKenBurns { 0% { transform: scale(1) translate3d(0,0,0); } 50% { transform: scale(1.08) translate3d(-1.5%,-1%,0); } 100% { transform: scale(1.04) translate3d(1%,0.5%,0); } }

.hero-cascade .hero-badge   { animation: heroCascadeIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.hero-cascade .hero-title   { animation: heroCascadeIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s both; }
.hero-cascade .hero-subtitle{ animation: heroCascadeIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.hero-cascade .hero-actions  { animation: heroCascadeIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.8s both; }
.hero-cascade .hero-stats    { animation: heroCascadeIn 0.8s cubic-bezier(0.16,1,0.3,1) 1s both; }
@keyframes heroCascadeIn { 0% { opacity: 0; transform: translate3d(0,50px,0) scale(0.96); filter: blur(10px); } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); } }

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--color-ocean), var(--color-lavender), var(--color-gold)); transform-origin: left; transform: scaleX(var(--scroll-progress, 0)); z-index: 9999; pointer-events: none; transition: transform 0.1s linear; }

/* ── FLOATING & PULSE ── */
.float-gentle { animation: floatGentle 6s ease-in-out infinite; }
.float-delayed { animation: floatGentle 7s ease-in-out 2s infinite; }
@keyframes floatGentle { 0%, 100% { transform: translate3d(0,0,0) rotate(0deg); } 25% { transform: translate3d(4px,-10px,0) rotate(1deg); } 75% { transform: translate3d(-4px,-6px,0) rotate(-1deg); } }
.pulse-attention { animation: pulseAttention 2s cubic-bezier(0.4,0,0.2,1) infinite; }
@keyframes pulseAttention { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(213,66,21,0.4); } 50% { transform: scale(1.02); box-shadow: 0 0 0 12px rgba(213,66,21,0); } }

/* ── SECTION LINE ── */
.section-line { width: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-lavender)); border-radius: var(--radius-full); transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.section-line.is-visible { width: 80px; }

/* ── HOVER GLOW ── */
.hover-glow { position: relative; }
.hover-glow::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from var(--glow-angle, 0deg), transparent 0%, var(--color-ocean-light) 10%, var(--color-lavender) 20%, transparent 30%); opacity: 0; transition: opacity 0.5s ease; z-index: -1; animation: glowSpin 4s linear infinite; }
.hover-glow:hover::before { opacity: 1; }
@keyframes glowSpin { to { --glow-angle: 360deg; } }
@property --glow-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ── COUNTER ROLL ── */
.counter-roll { display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.counter-roll .counter-digit { display: inline-block; animation: counterRollUp 0.6s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes counterRollUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── MAP MARKER PULSE ── */
.marker-pulse { position: relative; }
.marker-pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--color-primary); animation: markerPulseRing 2s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes markerPulseRing { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

/* ── TOOLTIP ANIMATION ── */
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px); padding: 6px 12px; background: var(--color-gray-900); color: var(--color-white); font-size: var(--text-xs); border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1); }
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── BADGE BOUNCE ── */
.badge-bounce { animation: badgeBounceIn 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes badgeBounceIn { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ── REDUCED MOTION (animations) ── */
@media (prefers-reduced-motion: reduce) {
    [data-animate], .stagger-children > *, .card-3d, .split-text .char, .word-reveal .word-inner,
    [data-parallax], .img-reveal-zoom img, .img-reveal-blur img, .img-curtain::before,
    .hero-cinematic .hero-bg, .hero-cascade .hero-badge, .hero-cascade .hero-title,
    .hero-cascade .hero-subtitle, .hero-cascade .hero-actions, .hero-cascade .hero-stats,
    .float-gentle, .float-delayed, .text-shimmer {
        animation: none !important; transition: none !important; transform: none !important;
        opacity: 1 !important; filter: none !important; clip-path: none !important;
    }
    .scroll-progress { display: none !important; }
}