/* ============================================
   RALLA - AI Systems Architect
   Design System & Styles
   ============================================ */

/* === CSS Variables === */
:root {
    /* Colors - Obsidian Dark Theme */
    --color-bg: #0A0A0A;
    --color-bg-elevated: #111111;
    --color-bg-glass: rgba(255, 255, 255, 0.03);
    --color-bg-glass-hover: rgba(255, 255, 255, 0.06);

    /* Accent Colors — Sapphire (sunburst-dial system) */
    --color-accent: #3B78C4;
    /* Sapphire Mid — hovers, icon strokes, base accent */
    --color-accent-lum: #5AA0F2;
    /* Sapphire Luminous — text accents, lines, labels (high-luminance so it reads on near-black) */
    --color-accent-deep: #1E4B87;
    /* Sapphire Deep — fills, borders, glows */
    --color-accent-dim: rgba(59, 120, 196, 0.15);
    --color-silver: #C0C0C0;
    /* Cyber Silver */
    --color-silver-dim: rgba(192, 192, 192, 0.1);

    /* Text Colors */
    --color-text-primary: #FFFFFF;
    --color-text-secondary: rgba(255, 255, 255, 0.6);
    --color-text-muted: rgba(255, 255, 255, 0.4);

    /* Gradients */
    --gradient-metallic: linear-gradient(135deg, #FFFFFF 0%, #C0C0C0 25%, #FFFFFF 50%, #888888 75%, #FFFFFF 100%);
    --gradient-glow: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    /* Sunburst Sapphire — deep at the edges, luminous where the light hits center (watch-dial move) */
    --gradient-sunburst: linear-gradient(105deg, #2A5A9E 0%, #5AA0F2 38%, #8FC2FF 50%, #5AA0F2 62%, #234F8C 100%);

    /* Typography */
    --font-primary: 'Syne', sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
    --space-2xl: 12rem;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);

    /* Glass Effect */
    --glass-blur: blur(20px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

/* === Cursor Glow === */
.cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: var(--gradient-glow);
    opacity: 0.08;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: opacity var(--transition-smooth);
}

/* === Navigation === */
.nav {
    position: fixed;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 100;
}

.nav-link {
    position: absolute;

    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    pointer-events: auto;
    padding: var(--space-sm);
    transition: color var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-accent);
}

.nav-link--left {
    top: var(--space-md);
    left: var(--space-md);
}

.nav-link--right {
    top: var(--space-md);
    right: var(--space-md);
}

.nav-right {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: flex;
    gap: 2rem;
    pointer-events: auto;
}

.nav-right .nav-link {
    position: static;
    padding: var(--space-sm) 0;
}

.nav-link--bottom-left {
    bottom: var(--space-md);
    left: var(--space-md);
}

/* === Hero Section === */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#particleCanvas {
    width: 100%;
    height: 100%;
}



/* === Hero Content === */
.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;

    margin-top: var(--space-lg);
}

.hero__title {

    font-size: clamp(4rem, 15vw, 10rem);
    font-weight: 800;
    letter-spacing: 0.3em;
    background: var(--gradient-metallic);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    from {
        background-position: 200% center;
    }

    to {
        background-position: -200% center;
    }
}

.hero__subtitle {

    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-top: var(--space-sm);
}

.hero__tagline {

    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 0.75rem;
    font-style: italic;
}

/* Scroll Indicator */
.hero__scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-text-muted);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero__scroll-indicator.fade-out {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-text-muted), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 1;
        transform: scaleY(1);
    }

    50% {
        opacity: 0.5;
        transform: scaleY(0.8);
    }
}

/* === Sections === */
.section {
    position: relative;
    min-height: 100vh;
    padding: var(--space-2xl) var(--space-md);
    display: flex;
    align-items: center;
}

.section__container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* === Section Header System (Editorial) === */
.section-header {
    margin-bottom: var(--space-lg);
    position: relative;
}

.section-header--center {
    text-align: center;
}

.section-header--center .section-label::before {
    display: none;
}

.section-header--center .section-sub {
    margin-left: auto;
    margin-right: auto;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}

.section-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.revealed .section-label::before,
.section-header.revealed .section-label::before {
    width: 40px;
}

.section-heading {

    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--color-text-primary);
    margin-bottom: 1.25rem;
}

.section-heading--xl {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.section-sub {
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text-secondary);
    max-width: 520px;
    line-height: 1.8;
    font-weight: 300;
}

.section-sub--center {
    text-align: center;
    max-width: 560px;
}

/* Reveal animations for section headers */
.section-header {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-header.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Keep old label for backward compat */
.section__label {

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-lg);
}

/* === About Section === */
.about__content {
    max-width: 800px;
}

.about__text {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
}

.about__text--large {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.text-accent {
    /* Sunburst Sapphire dial — deep at edges, luminous where light hits center.
       Falls back to the luminous solid where background-clip:text is unsupported. */
    color: var(--color-accent-lum);
    background: var(--gradient-sunburst);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Keep the accent line legible in forced-colors / high-contrast mode */
@media (forced-colors: active) {
    .text-accent {
        -webkit-text-fill-color: currentColor;
        color: currentColor;
    }
}

/* ═══════════════════════════════════════════════ */
/* STORYTELLING ELEMENTS                           */
/* ═══════════════════════════════════════════════ */

/* Ambient Story Glow — subtle continuity light */
.story-glow {
    position: fixed;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 120, 196, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: left 0.8s ease, top 0.8s ease;
    opacity: 0;
}

.story-glow.active {
    opacity: 1;
}

/* Chapter Dividers — animated lines with chapter numbers */

.story-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 3rem 2rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-divider.revealed {
    opacity: 1;
    transform: translateY(0);
}

.story-divider__line {
    height: 1px;
    flex: 1;
    max-width: 200px;
    background: linear-gradient(90deg, transparent, rgba(59, 120, 196, 0.3), transparent);
    transform: scaleX(0);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.story-divider.revealed .story-divider__line {
    transform: scaleX(1);
}

.story-divider__chapter {

    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--color-accent);
    opacity: 0.6;
    padding: 6px 16px;
    border: 1px solid rgba(59, 120, 196, 0.15);
    border-radius: 20px;
    white-space: nowrap;
    transition: opacity 0.6s 0.6s;
}

.story-divider.revealed .story-divider__chapter {
    opacity: 1;
}

/* Final divider — infinity symbol */
.story-divider--final .story-divider__chapter {
    font-size: 1rem;
    border-color: rgba(59, 120, 196, 0.25);
    color: var(--color-accent);
}

/* Story Bridges — narrative connectors between chapters */
.story-bridge {
    text-align: center;
    padding: 2rem 2rem 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-bridge.revealed {
    opacity: 1;
    transform: translateY(0);
}

.story-bridge__text {
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 300;
    font-style: italic;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    position: relative;
    display: inline-block;
}

.story-bridge__text::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: rgba(59, 120, 196, 0.3);
    margin: 12px auto 0;
}

/* Final bridge — more dramatic */
.story-bridge--final .story-bridge__text {
    font-size: 1.3rem;
    color: var(--color-text-secondary);
}




/* ═══════════════════════════════════════════════ */
/* WORK SHOWCASE CTA — Luxurious gateway to Work  */
/* ═══════════════════════════════════════════════ */

.section--work-cta {
    padding: var(--space-xl) 0;
}

.work-showcase {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-showcase.revealed {
    opacity: 1;
    transform: translateY(0);
}

.work-showcase .section-label {
    display: block;
    margin-bottom: 1.5rem;
}

.work-showcase .section-heading {
    margin-left: auto;
    margin-right: auto;
}

.work-showcase .section-sub {
    max-width: 520px;
    margin: 0 auto 3rem;
    text-align: center;
}

/* Stats Highlights */
.work-showcase__highlights {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 2rem 2.5rem;
    background: var(--color-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    margin-bottom: 3rem;
}

.showcase-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.showcase-stat__number {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.6) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.showcase-stat__label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.showcase-stat__divider {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.06);
}

/* CTA Button */
.work-showcase__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 1.1rem 2.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-bg);
    background: var(--color-accent);
    border: none;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
}

.work-showcase__button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 20px 60px rgba(59, 120, 196, 0.35),
        0 0 0 1px rgba(59, 120, 196, 0.5);
}

.work-showcase__button svg {
    transition: transform 0.3s ease;
}

.work-showcase__button:hover svg {
    transform: translateX(4px);
}

.work-showcase__button .button__glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.work-showcase__button:hover .button__glow {
    transform: translateX(100%);
}


/* === Systems Section === */
.systems__timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.timeline__line {
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--color-accent-dim), var(--color-accent), var(--color-accent-dim), transparent);
}

.system-card {
    position: relative;
    padding-left: 80px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.system-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.system-card__glass {
    display: block;
    /* Ensure it behaves like a block for anchor tag */
    background: var(--color-bg-glass);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 16px;
    padding: var(--space-lg);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.system-card__glass:hover {
    background: var(--color-bg-glass-hover);
    border-color: rgba(59, 120, 196, 0.2);
}

.system-card__number {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-accent);
    background: var(--color-bg);
    border: 1px solid var(--color-accent-dim);
    border-radius: 50%;
}

.system-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.system-card__description {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.system-card__metrics {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.metric {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-accent-dim);
    border-radius: 100px;
}

/* === Case Studies Section === */
.cases__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-md);
}

.case-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.case-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.case-card__glass {
    height: 100%;
    background: var(--color-bg-glass);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 16px;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.case-card__glass:hover {
    background: var(--color-bg-glass-hover);
    border-color: rgba(59, 120, 196, 0.2);
    transform: translateY(-5px);
}

.case-card__visual {
    height: 140px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    color: var(--color-accent);
}

.case-card__visual svg {
    width: 64px;
    height: 64px;
    opacity: 0.8;
}

.case-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.case-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--color-text-primary);
}

.case-card__description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.case-card__tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(59, 120, 196, 0.1);
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(59, 120, 196, 0.2);
}

/* === Engine Section === */
.engine__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.engine-node {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-bg-glass);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 16px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow), border-color var(--transition-fast);
}

.engine-node.revealed {
    opacity: 1;
    transform: translateY(0);
}

.engine-node:hover {
    border-color: rgba(59, 120, 196, 0.2);
}

.engine-node__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-md);
    color: var(--color-accent);
}

.engine-node__icon svg {
    width: 100%;
    height: 100%;
}

.engine-node__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.engine-node__desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}



/* === Tech Stack Section (Neural Orbit) === */
.section--techstack {
    position: relative;
    overflow: hidden;
    padding: var(--space-2xl) var(--space-md);
}

.techstack__subtitle {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-align: center;
}

.techstack__canvas {
    position: relative;
    width: 100%;
    min-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Premium Glass Container */
.pills-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    max-width: 850px;
    padding: var(--space-xl);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid transparent;
    background-clip: padding-box;
    animation: container-breathe 6s ease-in-out infinite;
}

/* Animated gradient border */
.pills-wrapper::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 25px;
    padding: 1px;
    background: linear-gradient(135deg,
            rgba(59, 120, 196, 0.3) 0%,
            rgba(167, 139, 250, 0.2) 50%,
            rgba(59, 120, 196, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-clip: padding-box;
    pointer-events: none;
    animation: border-shimmer 8s linear infinite;
}

@keyframes border-shimmer {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes container-breathe {

    0%,
    100% {
        box-shadow:
            0 30px 60px rgba(0, 0, 0, 0.3),
            0 0 40px rgba(59, 120, 196, 0.03),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    50% {
        box-shadow:
            0 30px 60px rgba(0, 0, 0, 0.35),
            0 0 60px rgba(59, 120, 196, 0.08),
            0 0 80px rgba(167, 139, 250, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

/* Individual Tech Pill */
.tech-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: pill-float 6s ease-in-out infinite;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tech-pill:nth-child(1) {
    animation-delay: 0s;
}

.tech-pill:nth-child(2) {
    animation-delay: 0.4s;
}

.tech-pill:nth-child(3) {
    animation-delay: 0.8s;
}

.tech-pill:nth-child(4) {
    animation-delay: 1.2s;
}

.tech-pill:nth-child(5) {
    animation-delay: 1.6s;
}

.tech-pill:nth-child(6) {
    animation-delay: 2s;
}

.tech-pill:nth-child(7) {
    animation-delay: 2.4s;
}

.tech-pill:nth-child(8) {
    animation-delay: 0.2s;
}

.tech-pill:nth-child(9) {
    animation-delay: 0.6s;
}

.tech-pill:nth-child(10) {
    animation-delay: 1s;
}

.tech-pill:nth-child(11) {
    animation-delay: 1.4s;
}

.tech-pill:nth-child(12) {
    animation-delay: 1.8s;
}

.tech-pill:nth-child(13) {
    animation-delay: 2.2s;
}

.tech-pill:nth-child(14) {
    animation-delay: 2.6s;
}

@keyframes pill-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.tech-pill__text {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

/* Hover State */
.tech-pill:hover,
.tech-pill--active {
    background: linear-gradient(135deg, rgba(59, 120, 196, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%);
    border-color: rgba(59, 120, 196, 0.4);
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 8px 30px rgba(59, 120, 196, 0.2),
        0 0 40px rgba(59, 120, 196, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Blur cycling states */
.tech-pill--blurred {
    filter: blur(1.5px);
    opacity: 0.6;
    transition: filter 1.5s ease, opacity 1.5s ease;
}

.tech-pill--sharp {
    filter: blur(0);
    opacity: 1;
    transition: filter 1.5s ease, opacity 1.5s ease;
}

/* Ambient Section Glows */
.techstack__glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: -1;
}

.techstack__glow--teal {
    bottom: -200px;
    left: -100px;
    background: rgba(59, 120, 196, 0.08);
}

.techstack__glow--purple {
    top: -100px;
    right: -150px;
    background: rgba(167, 139, 250, 0.06);
}

/* === Contact Section === */
.section--contact {
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* ===  Contact Decorations Container === */
.contact-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* === INLINE PREMIUM HUB (Period Replacement) === */
.cta__hub {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    vertical-align: middle;
    transform: translateY(-2px);
}

.hub__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid;
}

.hub__ring--1 {
    width: 10px;
    height: 10px;
    border-color: rgba(59, 120, 196, 0.5);
    animation: hubPulse1 2.5s ease-in-out infinite;
}

.hub__ring--2 {
    width: 18px;
    height: 18px;
    border-color: rgba(59, 120, 196, 0.25);
    animation: hubPulse2 3s ease-in-out infinite 0.3s;
}

.hub__core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
    background: var(--color-accent);
    border-radius: 50%;
    animation: hubCorePulse 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--color-accent), 0 0 16px rgba(59, 120, 196, 0.4);
}

@keyframes hubPulse1 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

@keyframes hubPulse2 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.25;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.4;
    }
}

@keyframes hubCorePulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 8px var(--color-accent), 0 0 16px rgba(59, 120, 196, 0.4);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 0 0 12px var(--color-accent), 0 0 24px rgba(59, 120, 196, 0.6);
    }
}

/* === FLOATING CODE FRAGMENTS === */
.code__fragment {
    position: absolute;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(59, 120, 196, 0.15);
    letter-spacing: 0.05em;
    text-shadow: 0 0 15px rgba(59, 120, 196, 0.1);
    animation: codeFloat 8s ease-in-out infinite;
}

.code__fragment--1 {
    top: 12%;
    left: 10%;
    animation-delay: 0s;
}

.code__fragment--2 {
    top: 35%;
    right: 12%;
    animation-delay: 2s;
}

.code__fragment--3 {
    bottom: 22%;
    left: 14%;
    animation-delay: 4.5s;
}

.code__fragment--4 {
    bottom: 10%;
    right: 20%;
    animation-delay: 7s;
}

.code__fragment--5 {
    top: 42%;
    left: 6%;
    animation-delay: 1.5s;
}

.code__fragment--6 {
    top: 10%;
    right: 32%;
    animation-delay: 3.5s;
}

.code__fragment--7 {
    bottom: 45%;
    right: 8%;
    animation-delay: 5.5s;
}

.code__fragment--8 {
    bottom: 8%;
    left: 35%;
    animation-delay: 8s;
}

.code__fragment:hover {
    color: rgba(59, 120, 196, 0.7);
    text-shadow: 0 0 30px rgba(59, 120, 196, 0.5);
}

@keyframes codeFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        text-shadow: 0 0 10px rgba(59, 120, 196, 0.2);
    }

    50% {
        transform: translateY(-10px) rotate(1deg);
        text-shadow: 0 0 25px rgba(59, 120, 196, 0.5);
    }
}

/* === ENERGY PULSE GRID === */
.architecture__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(59, 120, 196, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 120, 196, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

/* === AMBIENT LIGHTING === */
.architecture__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ambient__glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(80px);
}

.ambient__glow--left {
    top: 20%;
    left: -10%;
    background: radial-gradient(circle, rgba(59, 120, 196, 0.08), transparent 70%);
    animation: ambientFloat 15s ease-in-out infinite;
}

.ambient__glow--right {
    bottom: 20%;
    right: -10%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.06), transparent 70%);
    animation: ambientFloat 18s ease-in-out infinite reverse;
}

@keyframes ambientFloat {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.5;
    }

    50% {
        transform: translate(30px, -20px);
        opacity: 0.8;
    }
}

.contact__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.contact__cta {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Contact Inner */
.contact__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.contact__actions {
    margin-top: var(--space-lg);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.contact__actions.revealed {
    opacity: 1;
    transform: translateY(0);
}

.contact__links {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-lg);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.contact__links.revealed {
    opacity: 1;
    transform: translateY(0);
}

.contact-link-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 24px;
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.contact-link-item:hover {
    color: var(--color-text-primary);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
}

.contact-link-item svg {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.contact-link-item:hover svg {
    opacity: 1;
}

.contact__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-bg);
    background: var(--color-accent);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.contact__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(59, 120, 196, 0.3);
}

.button__glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.contact__button:hover .button__glow {
    transform: translateX(100%);
}

/* === Footer === */
.footer {
    padding: var(--space-2xl) 0 var(--space-lg);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    overflow: visible;
}

.footer__signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    position: relative;
}

/* Dual-layer ambient glow - Teal */
.footer__signature::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(59, 120, 196, 0.15) 0%, transparent 55%);
    filter: blur(60px);
    pointer-events: none;
    z-index: -1;
    animation: pulse-glow 5s ease-in-out infinite;
}

/* Secondary glow - Purple/Magenta */
.footer__signature::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 200px;
    top: 20%;
    left: 60%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(168, 85, 247, 0.1) 0%, transparent 60%);
    filter: blur(50px);
    pointer-events: none;
    z-index: -1;
    animation: pulse-glow 5s ease-in-out infinite reverse;
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1) translateX(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.15) translateX(-5%);
    }
}

.signature__static {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-style: italic;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
    animation: text-breathe 4s ease-in-out infinite;
}

@keyframes text-breathe {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.7;
        text-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
    }
}

.signature__rotator {
    position: relative;
    height: clamp(4rem, 10vw, 7rem);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Bring the rotating text above the kinetic dial */
    z-index: 10;
}

.rotator__word {
    position: absolute;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    filter: blur(12px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    /* Rainbow-Metallic gradient */
    background: linear-gradient(100deg,
            #a0a0a0 0%,
            #c4b5fd 12%,
            #ffffff 25%,
            #a5f3fc 38%,
            #ffffff 50%,
            #c4b5fd 62%,
            #ffffff 75%,
            #a5f3fc 88%,
            #a0a0a0 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rotator__word--active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) drop-shadow(0 0 50px rgba(196, 181, 253, 0.2));
    animation: shimmer 10s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 300% center;
    }

    100% {
        background-position: -300% center;
    }
}

.rotator__word--exit {
    opacity: 0;
    transform: translateY(-60px) scale(1.1);
    filter: blur(12px);
}

/* === ADAPTIVE SIGNAL — Holographic Projection System === */
.footer__signal {
    position: relative;
    /* Heraldic crest: centered above "A Creative" */
    margin: 0 auto var(--space-xs);
    width: 110px;
    height: 110px;
    z-index: 1;
    pointer-events: none;
}

/* ── Dual Ambient Rings ── */
.signal__ring {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    animation: sig-ring-spin 16s linear infinite;
    border-top-color: transparent;
    border-right-color: transparent;
}

.signal__ring--inner {
    inset: -6px;
    border-width: 0.5px;
    border-color: rgba(255, 255, 255, 0.04);
    animation: sig-ring-spin 11s linear infinite reverse;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

@keyframes sig-ring-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── SVG Icon Layers (Base) ── */
.signal__icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.5) rotate(-25deg);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: visible;
    fill: none;
}

.signal__icon--active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ── Draw-On Animation (Stroke Paths) ── */
.signal__path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.signal__icon--active .signal__path {
    stroke-dashoffset: 0;
}

/* ── Heartbeat Pulse (Pupils, Center Points) ── */
.signal__pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: sig-pulse 2.5s ease-in-out infinite alternate;
}

@keyframes sig-pulse {
    0% {
        opacity: 0.5;
        transform: scale(0.85);
    }

    100% {
        opacity: 1;
        transform: scale(1.25);
    }
}

/* ── Cursor Blink (Developer Terminal) ── */
.signal__blink {
    animation: sig-blink 1.1s steps(1) infinite;
}

@keyframes sig-blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* ── Orbiting Particles ── */
.signal__orbit {
    animation: sig-orbit 10s linear infinite;
}

.signal__orbit--slow {
    animation-duration: 16s;
}

@keyframes sig-orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── Vision Rays Breathing (Designer) ── */
.signal__rays {
    animation: sig-rays-breathe 3.5s ease-in-out infinite alternate;
}

@keyframes sig-rays-breathe {
    0% {
        opacity: 0.08;
    }

    100% {
        opacity: 0.3;
    }
}

.footer__credit {
    text-align: center;
    padding-top: var(--space-xl);
    margin-top: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.footer__founder {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.footer__founder::before,
.footer__founder::after {
    content: '';
    width: 32px;
    height: 1px;
}

.footer__founder::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18));
}

.footer__founder::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent);
}

.footer__brand {
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--gradient-sunburst);
    background-size: 200% auto;
    background-position: 0% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: background-position 0.6s ease;
    position: relative;
}

.footer__brand::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.4s ease;
    transform: translateX(-50%);
}

.footer__brand:hover {
    background-position: 100% center;
}

.footer__brand:hover::before {
    width: 100%;
}

/* === Passions Page === */

/* Passions Navigation */
.passions-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.9), transparent);
    backdrop-filter: blur(10px);
}

.passions-nav__container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.passions-nav__link {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    transition: color 0.3s ease, text-shadow 0.3s ease;
    padding: var(--space-xs) var(--space-sm);
}

.passions-nav__link:hover {
    color: var(--color-text-primary);
}

.passions-nav__link--active {
    color: var(--color-accent);
    text-shadow: 0 0 20px rgba(59, 120, 196, 0.4);
}

.passions-nav__divider {
    color: rgba(255, 255, 255, 0.1);
    font-weight: 300;
}

/* Passions Hero */
.passions-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: var(--space-2xl) var(--space-md);
    padding-top: calc(var(--space-2xl) + 60px);
}

.passions-hero__content {
    position: relative;
    z-index: 2;
}

.passions-hero__label {
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
    display: block;
}

.passions-hero__title {
    font-size: clamp(4rem, 15vw, 10rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.title-word {
    display: block;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.title-word.revealed {
    opacity: 1;
    transform: translateY(0);
}

.title-word--accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, #a78bfa 50%, var(--color-accent) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-flow 3s linear infinite;
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.passions-hero__subtitle {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-md);
    font-weight: 300;
}

/* Full-viewport hero for landing page */
.passions-hero--full {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ── Particle Canvas ── */
.passions-hero__particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ── Floating Ambient Orbs ── */
.passions-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: orb-fade-in 2s ease-out forwards;
}

.passions-hero__orb--teal {
    width: 500px;
    height: 500px;
    top: 15%;
    left: 10%;
    background: radial-gradient(circle, rgba(59, 120, 196, 0.2), transparent 70%);
    animation: orb-fade-in 2s ease-out forwards, orb-drift-1 12s ease-in-out infinite 2s;
}

.passions-hero__orb--purple {
    width: 450px;
    height: 450px;
    bottom: 10%;
    right: 10%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.18), transparent 70%);
    animation: orb-fade-in 2s ease-out 0.3s forwards, orb-drift-2 14s ease-in-out infinite 2.3s;
}

.passions-hero__orb--gold {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 200, 100, 0.06), transparent 70%);
    animation: orb-fade-in 2s ease-out 0.6s forwards, orb-drift-3 10s ease-in-out infinite 2.6s;
}

@keyframes orb-fade-in {
    to {
        opacity: 1;
    }
}

@keyframes orb-drift-1 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(30px, -20px);
    }

    66% {
        transform: translate(-15px, 15px);
    }
}

@keyframes orb-drift-2 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(-25px, 20px);
    }

    66% {
        transform: translate(20px, -15px);
    }
}

@keyframes orb-drift-3 {

    0%,
    100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-45%, -55%);
    }
}

/* ── Film Grain / Noise Overlay ── */
.passions-hero__noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ── Decorative Ornament ── */
.passions-hero__ornament {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

.passions-hero__ornament.revealed {
    opacity: 1;
    transform: translateY(0);
}

.passions-hero__ornament-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.3), transparent);
    transform: scaleX(0);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}

.passions-hero__ornament.revealed .passions-hero__ornament-line {
    transform: scaleX(1);
}

.passions-hero__ornament-diamond {
    font-size: 0.6rem;
    color: rgba(59, 120, 196, 0.4);
    opacity: 0;
    transition: opacity 0.6s ease 1.2s;
}

.passions-hero__ornament.revealed .passions-hero__ornament-diamond {
    opacity: 1;
}

/* ── Scroll Hint ── */
.passions-hero__scroll-hint {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    z-index: 3;
    animation: scroll-hint-fade 1s ease-out 2.5s forwards;
}

.passions-hero__scroll-text {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
}

.passions-hero__scroll-mouse {
    width: 20px;
    height: 30px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    position: relative;
    display: flex;
    justify-content: center;
}

.passions-hero__scroll-dot {
    width: 3px;
    height: 6px;
    background: rgba(59, 120, 196, 0.5);
    border-radius: 3px;
    margin-top: 5px;
    animation: scroll-dot-bounce 2s ease-in-out infinite;
}

@keyframes scroll-dot-bounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(8px);
        opacity: 0.3;
    }
}

@keyframes scroll-hint-fade {
    to {
        opacity: 1;
    }
}

/* Elevated hero content z-index */
.passions-hero--full .passions-hero__content {
    z-index: 2;
    position: relative;
}

/* ═══════════════════════════════════════════════ */
/* ENTER MY WORLD — Premium CTA Button            */
/* ═══════════════════════════════════════════════ */
.world-enter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.15rem 2.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: 60px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.world-enter-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 20px 60px rgba(59, 120, 196, 0.12),
        0 8px 24px rgba(167, 139, 250, 0.08);
}

/* Animated gradient border */
.world-enter-btn__border {
    position: absolute;
    inset: 0;
    border-radius: 60px;
    padding: 1px;
    background: linear-gradient(135deg,
            rgba(59, 120, 196, 0.5),
            rgba(167, 139, 250, 0.5),
            rgba(59, 120, 196, 0.3),
            rgba(167, 139, 250, 0.5));
    background-size: 300% 300%;
    animation: border-glow 4s ease-in-out infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes border-glow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Continuous shimmer sweep */
.world-enter-btn__shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.06) 40%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.06) 60%,
            transparent 100%);
    animation: shimmer-sweep 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer-sweep {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Text */
.world-enter-btn__text {
    position: relative;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.world-enter-btn:hover .world-enter-btn__text {
    color: #fff;
}

/* Arrow */
.world-enter-btn__arrow {
    position: relative;
    z-index: 2;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease;
}

.world-enter-btn__arrow svg {
    width: 100%;
    height: 100%;
    stroke: rgba(59, 120, 196, 0.8);
}

.world-enter-btn:hover .world-enter-btn__arrow {
    transform: translateX(6px);
    opacity: 1;
}

/* Hover glow behind button */
.world-enter-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 60px;
    background: linear-gradient(135deg,
            rgba(59, 120, 196, 0.15),
            rgba(167, 139, 250, 0.1));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s ease;
    filter: blur(8px);
}

.world-enter-btn:hover::after {
    opacity: 1;
}

.passions-hero__gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(59, 120, 196, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(167, 139, 250, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* Passion Sections */
.passion-section {
    padding: var(--space-2xl) var(--space-md);
    position: relative;
    /* overflow: hidden; Removed to allow ambient glow to bleed if needed, but keeping generally for layout safety */
    overflow: visible;
}

.passion-section__ambient {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(59, 120, 196, 0.03) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.passion-section__ambient--purple {
    background: radial-gradient(ellipse at center, rgba(167, 139, 250, 0.04) 0%, transparent 70%);
}

.section__container {
    position: relative;
    z-index: 1;
}

/* === Premium Particles === */

/* Shutter Particles (Photography) */
.shutter-particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
    animation: shutter-flash 4s ease-in-out infinite;
    z-index: 0;
}

@keyframes shutter-flash {

    0%,
    100% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.5);
    }
}

/* Digital Particles (Gaming) */
.digital-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(167, 139, 250, 0.4);
    pointer-events: none;
    animation: digital-float 6s linear infinite;
    z-index: 0;
}

@keyframes digital-float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) rotate(45deg);
        opacity: 0;
    }
}

/* Add shimmer to hero text for extra richness */
/* Add subtle pulse to standard words */
.title-word.revealed {
    opacity: 1;
    transform: translateY(0);
    /* Removed generic animation to prevent override of specific accent animation */
    /* animation: text-pulse 8s ease-in-out infinite; */
}

/* Ensure accent word has its own powerful animation */
.title-word.title-word--accent.revealed {
    animation: gradient-flow 2.5s linear infinite;
}

/* Make the accent gradient much brighter and higher contrast */
.title-word--accent {
    background: linear-gradient(135deg,
            var(--color-accent) 0%,
            #a78bfa 25%,
            #ffffff 50%,
            #a78bfa 75%,
            var(--color-accent) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Animation is applied in the .revealed state to ensure it runs */
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* Hero Particles (Ethereal Orbs) */
.hero-particle {
    position: absolute;
    background: radial-gradient(circle, rgba(59, 120, 196, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
    animation: hero-drift 10s ease-in-out infinite;
    z-index: 0;
    opacity: 0.6;
}

.hero-particle--purple {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 70%);
    animation-delay: -5s;
}

@keyframes hero-drift {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }

    33% {
        transform: translate(30px, -50px) scale(1.2);
        opacity: 0.7;
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
        opacity: 0.5;
    }
}

/* === Photorealistic CSS 3D Camera === */
.camera-wireframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) perspective(1000px) rotateX(10deg);
    width: 600px;
    height: 600px;
    pointer-events: none;
    z-index: -1;
    opacity: 0.8;
}

.camera-body {
    position: relative;
    width: 100%;
    height: 100%;
    animation: camera-float 8s ease-in-out infinite;
    transform-style: preserve-3d;
}

/* Main Lens Housing (The bulk of the lens) */
.camera-lens-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    background: conic-gradient(from 180deg, #0d0d0d, #262626, #0d0d0d, #262626, #0d0d0d);
    border-radius: 50%;
    box-shadow:
        inset 0 0 20px #000,
        0 20px 50px rgba(0, 0, 0, 0.8),
        0 0 0 10px #1a1a1a;
    /* Lens hood ring */
}

/* Secondary Ring (Focus Ring) */
.camera-lens-outer::before {
    content: '';
    position: absolute;
    inset: 40px;
    background: repeating-conic-gradient(#151515 0deg 2deg, #2a2a2a 2deg 4deg);
    /* Texture */
    border-radius: 50%;
    box-shadow: inset 0 0 20px #000;
    animation: rotate-lens 40s linear infinite;
}

/* Glass Element (The actual lens glass) */
.camera-lens-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, #050505 80%);
    border-radius: 50%;
    box-shadow:
        inset 0 0 30px rgba(59, 120, 196, 0.2),
        /* Subtle teal coating reflection */
        0 0 10px rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* Aperture Blades (The shutter) */
.camera-lens-inner::before {
    content: '';
    position: absolute;
    inset: 20px;
    background: conic-gradient(#111 0deg 45deg, #0a0a0a 45deg 90deg, #111 90deg 135deg, #0a0a0a 135deg 180deg, #111 180deg 225deg, #0a0a0a 225deg 270deg, #111 270deg 315deg, #0a0a0a 315deg 360deg);
    border-radius: 50%;
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
    transform: scale(0.8);
    opacity: 0.9;
}

/* Lens Flare/Reflection */
.camera-reflection {
    position: absolute;
    width: 200%;
    height: 60px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), rgba(59, 120, 196, 0.1), transparent);
    top: 20%;
    left: -50%;
    transform: rotate(45deg);
    pointer-events: none;
    filter: blur(5px);
    animation: reflection-sweep 6s ease-in-out infinite;
}

.camera-flash,
.camera-sensor {
    display: none;
}

/* Removing old abstract elements */

@keyframes camera-float {

    0%,
    100% {
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(1.02) translateY(-20px);
    }
}

@keyframes rotate-lens {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* === Seamless Section Transitions === */
.passion-section {
    padding: var(--space-2xl) var(--space-md);
    position: relative;
    /* Remove mask to prevent cut-off look */
    /* -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); */
    /* mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); */
    overflow: visible;
    margin-top: -100px;
    /* Pull sections together for overlap */
    padding-top: 150px;
    /* Compensate for margin */
}

/* Ensure no background color interruptions */
.passion-section,
.passion-section--alt {
    background: transparent !important;
}

/* Enhancing ambient glow to bridge the gap */
.passion-section__ambient {
    width: 150%;
    height: 150%;
    opacity: 0.5;
    /* Softer, more blended */
    background: radial-gradient(circle at center, rgba(59, 120, 196, 0.05) 0%, transparent 60%);
}

.passion-section__ambient--purple {
    background: radial-gradient(circle at center, rgba(167, 139, 250, 0.05) 0%, transparent 60%);
}

@keyframes reflection-sweep {

    0%,
    100% {
        transform: rotate(45deg) translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    40% {
        transform: rotate(45deg) translateY(200px);
        opacity: 0;
    }
}

@keyframes sensor-pulse {

    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* Passion Header - Refined */
.passion-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.passion-header__line {
    display: none;
}

.passion-header__title {
    font-family: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 900;
    font-style: normal;
    margin-bottom: var(--space-sm);
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(180deg,
            #ffffff 0%,
            #f0ece4 50%,
            rgba(220, 215, 200, 0.75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 20px rgba(255, 255, 255, 0.08));
}

.passion-header__subtitle {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.passion-header__stat {
    margin-top: var(--space-md);
    display: inline-flex;
    flex-direction: column;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-glass);
    border: var(--glass-border);
    border-radius: 12px;
}

.stat__number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-accent);
}

.stat__label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Passion Content */
.passion-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-md);
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.passion-content--center {
    justify-items: center;
}

/* Glass Cards with 3D Tilt */
.glass-card {
    position: relative;
    background: var(--color-bg-glass);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 24px;
    padding: var(--space-lg);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.glass-card--3d {
    cursor: default;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.glass-card__glow {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 0%, rgba(59, 120, 196, 0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.glass-card__glow--purple {
    background: radial-gradient(circle at 50% 0%, rgba(167, 139, 250, 0.15) 0%, transparent 60%);
}

.glass-card:hover .glass-card__glow {
    opacity: 1;
}

.glass-card__content {
    position: relative;
    z-index: 1;
}

.glass-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.glass-card__text {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.glass-card__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(59, 120, 196, 0.1);
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(59, 120, 196, 0.2);
}

/* ─── Camera Lens Cards — Ultra Luxury Edition ─ */
.passion-content--lens {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.lens-card {
    position: relative;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            #080808, #1a1a1a 10%, #111 20%, #252525 35%,
            #080808 50%, #1c1c1c 65%, #111 80%, #222 90%, #080808);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 3px rgba(0, 0, 0, 0.9),
        0 0 0 4px rgba(192, 168, 120, 0.12),
        0 0 0 7px rgba(0, 0, 0, 0.7),
        0 0 0 8px rgba(192, 168, 120, 0.06),
        0 30px 80px rgba(0, 0, 0, 0.8),
        0 0 120px rgba(59, 120, 196, 0.04),
        inset 0 0 80px rgba(0, 0, 0, 0.4);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
    cursor: default;
    overflow: hidden;
}

.lens-card:hover {
    transform: translateY(-12px) scale(1.04);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(0, 0, 0, 0.9),
        0 0 0 4px rgba(192, 168, 120, 0.25),
        0 0 0 7px rgba(0, 0, 0, 0.7),
        0 0 0 8px rgba(192, 168, 120, 0.12),
        0 40px 100px rgba(0, 0, 0, 0.9),
        0 0 150px rgba(59, 120, 196, 0.1),
        0 0 80px rgba(192, 168, 120, 0.06),
        inset 0 0 80px rgba(0, 0, 0, 0.4);
}

.lens-card--alt:hover {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(0, 0, 0, 0.9),
        0 0 0 4px rgba(200, 160, 220, 0.25),
        0 0 0 7px rgba(0, 0, 0, 0.7),
        0 0 0 8px rgba(200, 160, 220, 0.12),
        0 40px 100px rgba(0, 0, 0, 0.9),
        0 0 150px rgba(167, 139, 250, 0.1),
        0 0 80px rgba(200, 160, 220, 0.06),
        inset 0 0 80px rgba(0, 0, 0, 0.4);
}

/* Breathing ambient glow — larger radius */
.lens-card__ambient-glow {
    position: absolute;
    inset: -60px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(59, 120, 196, 0.08) 0%,
            rgba(192, 168, 120, 0.03) 30%,
            rgba(59, 120, 196, 0.02) 50%,
            transparent 70%);
    animation: lens-ambient-breathe 4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.lens-card--alt .lens-card__ambient-glow {
    background: radial-gradient(circle,
            rgba(167, 139, 250, 0.08) 0%,
            rgba(200, 160, 220, 0.03) 30%,
            rgba(167, 139, 250, 0.02) 50%,
            transparent 70%);
}

/* Outer barrel ring — precision machined look */
.lens-card__ring--outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.05);
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 255, 255, 0.04) 15deg,
            transparent 30deg,
            rgba(255, 255, 255, 0.02) 60deg,
            transparent 90deg,
            rgba(255, 255, 255, 0.05) 120deg,
            transparent 150deg,
            rgba(255, 255, 255, 0.03) 200deg,
            transparent 240deg,
            rgba(255, 255, 255, 0.04) 300deg,
            transparent 340deg);
    box-shadow:
        inset 0 0 50px rgba(0, 0, 0, 0.7),
        inset 0 -20px 60px rgba(0, 0, 0, 0.6),
        inset 0 20px 40px rgba(255, 255, 255, 0.02);
    pointer-events: none;
    transition: border-color 0.6s ease;
}

/* Engraved text ring — rotates slowly */
.lens-card__engraved {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    animation: lens-engrave-rotate 90s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.lens-card__engraved svg {
    width: 100%;
    height: 100%;
}

/* Primary gold accent ring — thick luxury band */
.lens-card__ring--gold {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(#0c0c0c, #0c0c0c) padding-box,
        conic-gradient(from 0deg,
            rgba(192, 168, 120, 0.08),
            rgba(218, 195, 150, 0.45),
            rgba(255, 215, 140, 0.2),
            rgba(192, 168, 120, 0.08),
            rgba(160, 140, 100, 0.04),
            rgba(218, 195, 150, 0.4),
            rgba(255, 220, 160, 0.15),
            rgba(192, 168, 120, 0.08)) border-box;
    animation: lens-gold-shimmer 10s linear infinite;
    pointer-events: none;
    transition: all 0.6s ease;
}

.lens-card--alt .lens-card__ring--gold {
    background: linear-gradient(#0c0c0c, #0c0c0c) padding-box,
        conic-gradient(from 0deg,
            rgba(200, 160, 220, 0.08),
            rgba(220, 190, 240, 0.4),
            rgba(240, 210, 255, 0.2),
            rgba(200, 160, 220, 0.08),
            rgba(180, 140, 200, 0.04),
            rgba(220, 190, 240, 0.35),
            rgba(240, 215, 255, 0.15),
            rgba(200, 160, 220, 0.08)) border-box;
}

/* Textured focus ring — precision grip */
.lens-card__ring--focus {
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 255, 255, 0.018) 0deg 1.5deg,
            transparent 1.5deg 3deg);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.8),
        inset 0 3px 15px rgba(255, 255, 255, 0.01),
        inset 0 -3px 15px rgba(0, 0, 0, 0.5);
    animation: lens-focus-rotate 40s linear infinite;
    pointer-events: none;
}

/* Secondary inner gold ring */
.lens-card__ring--gold-inner {
    position: absolute;
    inset: 42px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: linear-gradient(#0d0d0d, #0d0d0d) padding-box,
        conic-gradient(from 180deg,
            rgba(192, 168, 120, 0.06),
            rgba(218, 195, 150, 0.25),
            rgba(192, 168, 120, 0.06),
            rgba(218, 195, 150, 0.2),
            rgba(192, 168, 120, 0.06)) border-box;
    animation: lens-gold-shimmer 12s linear infinite reverse;
    pointer-events: none;
}

.lens-card--alt .lens-card__ring--gold-inner {
    background: linear-gradient(#0d0d0d, #0d0d0d) padding-box,
        conic-gradient(from 180deg,
            rgba(200, 160, 220, 0.06),
            rgba(220, 190, 240, 0.2),
            rgba(200, 160, 220, 0.06),
            rgba(220, 190, 240, 0.18),
            rgba(200, 160, 220, 0.06)) border-box;
}

/* Inner glass element ring */
.lens-card__ring--inner {
    position: absolute;
    inset: 50px;
    border-radius: 50%;
    border: 1.5px solid rgba(59, 120, 196, 0.15);
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(59, 120, 196, 0.05),
        inset 0 0 20px rgba(59, 120, 196, 0.02);
    pointer-events: none;
    transition: all 0.6s ease;
}

.lens-card--alt .lens-card__ring--inner {
    border-color: rgba(167, 139, 250, 0.15);
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(167, 139, 250, 0.05),
        inset 0 0 20px rgba(167, 139, 250, 0.02);
}

/* Aperture blade pattern — more visible */
.lens-card__aperture {
    position: absolute;
    inset: 55px;
    border-radius: 50%;
    background: conic-gradient(rgba(59, 120, 196, 0.04) 0deg 40deg,
            rgba(0, 0, 0, 0.15) 40deg 45deg,
            transparent 45deg 90deg,
            rgba(59, 120, 196, 0.03) 90deg 130deg,
            rgba(0, 0, 0, 0.15) 130deg 135deg,
            transparent 135deg 180deg,
            rgba(59, 120, 196, 0.04) 180deg 220deg,
            rgba(0, 0, 0, 0.15) 220deg 225deg,
            transparent 225deg 270deg,
            rgba(59, 120, 196, 0.03) 270deg 310deg,
            rgba(0, 0, 0, 0.15) 310deg 315deg,
            transparent 315deg 360deg);
    clip-path: polygon(50% 2%, 75% 8%, 93% 25%, 98% 50%,
            93% 75%, 75% 92%, 50% 98%, 25% 92%,
            7% 75%, 2% 50%, 7% 25%, 25% 8%);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.8s ease;
}

.lens-card--alt .lens-card__aperture {
    background: conic-gradient(rgba(167, 139, 250, 0.04) 0deg 40deg,
            rgba(0, 0, 0, 0.15) 40deg 45deg,
            transparent 45deg 90deg,
            rgba(167, 139, 250, 0.03) 90deg 130deg,
            rgba(0, 0, 0, 0.15) 130deg 135deg,
            transparent 135deg 180deg,
            rgba(167, 139, 250, 0.04) 180deg 220deg,
            rgba(0, 0, 0, 0.15) 220deg 225deg,
            transparent 225deg 270deg,
            rgba(167, 139, 250, 0.03) 270deg 310deg,
            rgba(0, 0, 0, 0.15) 310deg 315deg,
            transparent 315deg 360deg);
}

.lens-card:hover .lens-card__aperture {
    opacity: 0.9;
    transform: rotate(8deg);
}

/* Glass surface — 4-layer coating simulation */
.lens-card__glass {
    position: absolute;
    inset: 60px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 25% 20%,
            rgba(59, 120, 196, 0.1) 0%,
            transparent 35%),
        radial-gradient(circle at 75% 80%,
            rgba(192, 168, 120, 0.06) 0%,
            transparent 30%),
        radial-gradient(circle at 60% 30%,
            rgba(255, 255, 255, 0.03) 0%,
            transparent 25%),
        radial-gradient(circle at 50% 50%,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.lens-card--alt .lens-card__glass {
    background:
        radial-gradient(circle at 25% 20%,
            rgba(167, 139, 250, 0.1) 0%,
            transparent 35%),
        radial-gradient(circle at 75% 80%,
            rgba(200, 160, 220, 0.06) 0%,
            transparent 30%),
        radial-gradient(circle at 60% 30%,
            rgba(255, 255, 255, 0.03) 0%,
            transparent 25%),
        radial-gradient(circle at 50% 50%,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.55) 100%);
}

/* Cinematic light leak — warm color cycle */
.lens-card__light-leak {
    position: absolute;
    inset: 55px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 30% 20%,
            rgba(255, 200, 100, 0.06) 0%,
            transparent 50%);
    animation: lens-light-leak 8s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Sweeping lens reflection — cinematic multi-color */
.lens-card__reflection {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: linear-gradient(140deg,
            transparent 20%,
            rgba(255, 255, 255, 0.02) 32%,
            rgba(59, 120, 196, 0.08) 40%,
            rgba(255, 220, 160, 0.06) 46%,
            rgba(255, 255, 255, 0.05) 52%,
            rgba(59, 120, 196, 0.04) 58%,
            rgba(192, 168, 120, 0.03) 65%,
            transparent 80%);
    animation: lens-reflection-sweep 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.lens-card--alt .lens-card__reflection {
    background: linear-gradient(140deg,
            transparent 20%,
            rgba(255, 255, 255, 0.02) 32%,
            rgba(167, 139, 250, 0.08) 40%,
            rgba(220, 190, 240, 0.06) 46%,
            rgba(255, 255, 255, 0.05) 52%,
            rgba(167, 139, 250, 0.04) 58%,
            rgba(200, 160, 220, 0.03) 65%,
            transparent 80%);
}

/* Glossy crescent highlight — top of the lens */
.lens-card__highlight {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.02) 15%,
            transparent 35%);
    pointer-events: none;
    z-index: 2;
}

/* Starburst flare — appears on hover */
.lens-card__starburst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    background:
        conic-gradient(from 0deg,
            transparent 0deg, rgba(59, 120, 196, 0.04) 3deg, transparent 6deg,
            transparent 30deg, rgba(255, 220, 160, 0.03) 33deg, transparent 36deg,
            transparent 60deg, rgba(59, 120, 196, 0.04) 63deg, transparent 66deg,
            transparent 90deg, rgba(255, 220, 160, 0.03) 93deg, transparent 96deg,
            transparent 120deg, rgba(59, 120, 196, 0.04) 123deg, transparent 126deg,
            transparent 150deg, rgba(255, 220, 160, 0.03) 153deg, transparent 156deg,
            transparent 180deg, rgba(59, 120, 196, 0.04) 183deg, transparent 186deg,
            transparent 210deg, rgba(255, 220, 160, 0.03) 213deg, transparent 216deg,
            transparent 240deg, rgba(59, 120, 196, 0.04) 243deg, transparent 246deg,
            transparent 270deg, rgba(255, 220, 160, 0.03) 273deg, transparent 276deg,
            transparent 300deg, rgba(59, 120, 196, 0.04) 303deg, transparent 306deg,
            transparent 330deg, rgba(255, 220, 160, 0.03) 333deg, transparent 336deg);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
    z-index: 1;
}

.lens-card--alt .lens-card__starburst {
    background:
        conic-gradient(from 0deg,
            transparent 0deg, rgba(167, 139, 250, 0.04) 3deg, transparent 6deg,
            transparent 30deg, rgba(220, 190, 240, 0.03) 33deg, transparent 36deg,
            transparent 60deg, rgba(167, 139, 250, 0.04) 63deg, transparent 66deg,
            transparent 90deg, rgba(220, 190, 240, 0.03) 93deg, transparent 96deg,
            transparent 120deg, rgba(167, 139, 250, 0.04) 123deg, transparent 126deg,
            transparent 150deg, rgba(220, 190, 240, 0.03) 153deg, transparent 156deg,
            transparent 180deg, rgba(167, 139, 250, 0.04) 183deg, transparent 186deg,
            transparent 210deg, rgba(220, 190, 240, 0.03) 213deg, transparent 216deg,
            transparent 240deg, rgba(167, 139, 250, 0.04) 243deg, transparent 246deg,
            transparent 270deg, rgba(220, 190, 240, 0.03) 273deg, transparent 276deg,
            transparent 300deg, rgba(167, 139, 250, 0.04) 303deg, transparent 306deg,
            transparent 330deg, rgba(220, 190, 240, 0.03) 333deg, transparent 336deg);
}

.lens-card:hover .lens-card__starburst {
    opacity: 1;
}

/* Content centered inside the lens */
.lens-card__content {
    position: absolute;
    inset: 72px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    z-index: 3;
}

.lens-card__title {
    font-family: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(59, 120, 196, 0.08);
}

.lens-card--alt .lens-card__title {
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(167, 139, 250, 0.08);
}

.lens-card__text {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    line-height: 1.6;
    margin-bottom: 12px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.lens-card__tag {
    display: inline-block;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: linear-gradient(135deg,
            rgba(59, 120, 196, 0.06) 0%,
            rgba(59, 120, 196, 0.15) 50%,
            rgba(192, 168, 120, 0.08) 100%);
    padding: 5px 14px;
    border-radius: 99px;
    border: 1px solid rgba(59, 120, 196, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(59, 120, 196, 0.06);
}

.lens-card--alt .lens-card__tag {
    color: #c4a8f5;
    background: linear-gradient(135deg,
            rgba(167, 139, 250, 0.06) 0%,
            rgba(167, 139, 250, 0.15) 50%,
            rgba(200, 160, 220, 0.08) 100%);
    border-color: rgba(167, 139, 250, 0.3);
    box-shadow: 0 2px 10px rgba(167, 139, 250, 0.06);
}

/* === Hover effects — ultra premium === */
.lens-card:hover .lens-card__ring--outer {
    border-color: rgba(192, 168, 120, 0.18);
}

.lens-card--alt:hover .lens-card__ring--outer {
    border-color: rgba(200, 160, 220, 0.18);
}

.lens-card:hover .lens-card__ring--gold {
    border-width: 2.5px;
    background: linear-gradient(#0c0c0c, #0c0c0c) padding-box,
        conic-gradient(from 0deg,
            rgba(192, 168, 120, 0.2),
            rgba(255, 215, 140, 0.55),
            rgba(218, 195, 150, 0.2),
            rgba(192, 168, 120, 0.1),
            rgba(255, 220, 160, 0.5),
            rgba(218, 195, 150, 0.15),
            rgba(192, 168, 120, 0.2)) border-box;
}

.lens-card--alt:hover .lens-card__ring--gold {
    border-width: 2.5px;
    background: linear-gradient(#0c0c0c, #0c0c0c) padding-box,
        conic-gradient(from 0deg,
            rgba(200, 160, 220, 0.2),
            rgba(240, 210, 255, 0.5),
            rgba(220, 190, 240, 0.2),
            rgba(200, 160, 220, 0.1),
            rgba(240, 215, 255, 0.45),
            rgba(220, 190, 240, 0.15),
            rgba(200, 160, 220, 0.2)) border-box;
}

.lens-card:hover .lens-card__ring--inner {
    border-color: rgba(59, 120, 196, 0.3);
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(59, 120, 196, 0.1),
        inset 0 0 25px rgba(59, 120, 196, 0.03);
}

.lens-card--alt:hover .lens-card__ring--inner {
    border-color: rgba(167, 139, 250, 0.3);
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(167, 139, 250, 0.1),
        inset 0 0 25px rgba(167, 139, 250, 0.03);
}

.lens-card:hover .lens-card__ambient-glow {
    animation-duration: 2s;
}

.lens-card:hover .lens-card__highlight {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.03) 18%,
            transparent 40%);
}

/* === Animations === */
@keyframes lens-focus-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes lens-reflection-sweep {

    0%,
    100% {
        opacity: 0.2;
        transform: rotate(-8deg);
    }

    50% {
        opacity: 1;
        transform: rotate(22deg);
    }
}

@keyframes lens-ambient-breathe {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes lens-gold-shimmer {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes lens-engrave-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes lens-light-leak {

    0%,
    100% {
        background: radial-gradient(ellipse at 30% 20%,
                rgba(255, 200, 100, 0.04) 0%, transparent 50%);
    }

    25% {
        background: radial-gradient(ellipse at 70% 30%,
                rgba(255, 180, 80, 0.06) 0%, transparent 45%);
    }

    50% {
        background: radial-gradient(ellipse at 60% 70%,
                rgba(255, 210, 120, 0.05) 0%, transparent 50%);
    }

    75% {
        background: radial-gradient(ellipse at 25% 65%,
                rgba(255, 190, 90, 0.04) 0%, transparent 45%);
    }
}

/* ── Lens Cards — deferred entrance animation ── */
.passion-section--deferred .lens-card {
    opacity: 0;
    transform: scale(0.65) translateY(50px) rotate(-5deg);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.passion-section--deferred .lens-card:nth-child(1) {
    transition-delay: 1.1s;
}

.passion-section--deferred .lens-card:nth-child(2) {
    transition-delay: 1.4s;
}

.passion-section--entered .lens-card {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
}

.photo-portal {
    margin-top: var(--space-lg);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.photo-portal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.photo-portal__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.photo-portal__card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(59, 120, 196, 0.04) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.photo-portal__card:hover {
    border-color: rgba(59, 120, 196, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px -15px rgba(59, 120, 196, 0.15),
        0 0 40px -10px rgba(59, 120, 196, 0.08);
}

/* Shimmer sweep on hover */
.photo-portal__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 40%,
            rgba(59, 120, 196, 0.06) 45%,
            rgba(255, 255, 255, 0.04) 50%,
            rgba(59, 120, 196, 0.06) 55%,
            transparent 60%);
    background-size: 200% 100%;
    background-position: 200% 0;
    transition: background-position 0.8s ease;
    pointer-events: none;
}

.photo-portal__card:hover .photo-portal__shimmer {
    background-position: -200% 0;
}

.photo-portal__content {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.photo-portal__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    color: var(--color-text-muted);
    transition: color 0.4s ease;
}

.photo-portal__card:hover .photo-portal__icon {
    color: var(--color-accent);
}

.photo-portal__icon svg {
    width: 100%;
    height: 100%;
}

.photo-portal__text {
    flex: 1;
}

.photo-portal__title {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(59, 120, 196, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.photo-portal__subtitle {
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
    line-height: 1.5;
}

.photo-portal__arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-portal__card:hover .photo-portal__arrow {
    color: var(--color-accent);
    transform: translateX(6px);
}

.photo-portal__arrow svg {
    width: 100%;
    height: 100%;
}

/* Booking Interstitial — Cinematic Transition */
.booking-interstitial {
    padding: 0 2rem 6rem;
    margin-top: -2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-interstitial.revealed {
    opacity: 1;
    transform: translateY(0);
}

.booking-interstitial__ornament {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.booking-interstitial__line {
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 120, 196, 0.3), transparent);
}

.booking-interstitial__diamond {
    font-size: 0.5rem;
    color: var(--color-accent);
    opacity: 0.5;
}

.booking-interstitial__tagline {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-accent);
    opacity: 0.6;
}

.booking-interstitial__heading {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.01em;
    line-height: 1.3;
    max-width: 500px;
}

.booking-interstitial__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem 2.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-bg);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-lum), var(--color-accent));
    background-size: 200% 200%;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    position: relative;
    overflow: visible;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    animation: ctaBreathe 3s ease-in-out infinite, ctaGradientShift 4s ease infinite;
    z-index: 1;
}

/* Pulsing rings that radiate outward */
.cta-pulse-ring {
    position: absolute;
    inset: -4px;
    border-radius: 100px;
    border: 1.5px solid rgba(59, 120, 196, 0.5);
    animation: ctaPulseRing 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}

.cta-pulse-ring--delay {
    animation-delay: 1.25s;
}

@keyframes ctaPulseRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

/* Glow backdrop behind button */
.cta-glow-backdrop {
    position: absolute;
    inset: -20px;
    border-radius: 120px;
    background: radial-gradient(ellipse, rgba(59, 120, 196, 0.2) 0%, transparent 70%);
    animation: ctaGlowPulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes ctaGlowPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* Continuous shimmer sweep */
.cta-shimmer {
    position: absolute;
    inset: 0;
    border-radius: 100px;
    background: linear-gradient(105deg,
            transparent 35%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.1) 55%,
            transparent 65%);
    background-size: 300% 100%;
    animation: ctaShimmerSweep 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ctaShimmerSweep {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Breathing scale for the button */
@keyframes ctaBreathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

/* Gradient color shift */
@keyframes ctaGradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.booking-interstitial__cta:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow:
        0 0 25px rgba(59, 120, 196, 0.5),
        0 15px 50px -8px rgba(59, 120, 196, 0.4);
    animation: none;
    background-position: 100% 50%;
}

.booking-interstitial__cta:hover .cta-pulse-ring {
    animation: none;
    opacity: 0;
}

.booking-interstitial__cta:hover .cta-glow-backdrop {
    opacity: 1;
    transform: scale(1.3);
}

.booking-interstitial__cta:hover .cta-shimmer {
    animation-duration: 1s;
}

.booking-interstitial__cta:active {
    transform: scale(1.02) translateY(0);
}

.booking-interstitial__cta-text {
    position: relative;
    z-index: 2;
}

.booking-interstitial__cta-arrow {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
    font-size: 1.1em;
}

.booking-interstitial__cta:hover .booking-interstitial__cta-arrow {
    transform: translateX(6px);
}

/* Portal Overlay — Cinematic Fullscreen */
.portal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.5s;
}

.portal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.portal-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 2, 8, 0.92);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.portal-overlay__particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.portal-overlay__content {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 700px;
}

.portal-overlay__close {
    position: absolute;
    top: -60px;
    right: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.portal-overlay__close svg {
    width: 18px;
    height: 18px;
}

.portal-overlay__close:hover {
    color: var(--color-accent);
    border-color: rgba(59, 120, 196, 0.3);
    transform: rotate(90deg);
}

.portal-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.portal-overlay.active .portal-overlay__inner {
    opacity: 1;
    transform: translateY(0);
}

.portal-overlay__label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

.portal-overlay__label-line {
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 120, 196, 0.3), transparent);
}

.portal-overlay__card {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(59, 120, 196, 0.06) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-overlay__card:hover {
    border-color: rgba(59, 120, 196, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px -15px rgba(59, 120, 196, 0.2),
        0 0 60px -10px rgba(59, 120, 196, 0.1);
}

.portal-overlay__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 40%,
            rgba(59, 120, 196, 0.08) 45%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(59, 120, 196, 0.08) 55%,
            transparent 60%);
    background-size: 200% 100%;
    background-position: 200% 0;
    transition: background-position 0.8s ease;
    pointer-events: none;
}

.portal-overlay__card:hover .portal-overlay__shimmer {
    background-position: -200% 0;
}

.portal-overlay__card-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.portal-overlay__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    color: var(--color-text-muted);
    transition: color 0.4s ease;
}

.portal-overlay__card:hover .portal-overlay__icon {
    color: var(--color-accent);
}

.portal-overlay__icon svg {
    width: 100%;
    height: 100%;
}

.portal-overlay__text {
    flex: 1;
}

.portal-overlay__title {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(59, 120, 196, 0.8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.portal-overlay__subtitle {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.portal-overlay__arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-overlay__card:hover .portal-overlay__arrow {
    color: var(--color-accent);
    transform: translateX(6px);
}

.portal-overlay__arrow svg {
    width: 100%;
    height: 100%;
}

.portal-overlay__footnote {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.15);
}


/* ═══════════════════════════════════════════════ */
/* CHAPTER TRANSITIONS — Premium Section Dividers  */
/* ═══════════════════════════════════════════════ */
.chapter-transition {
    position: relative;
    width: 100%;
    padding: 5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.chapter-transition.revealed {
    opacity: 1;
    transform: translateY(0);
}

.chapter-transition__beam {
    position: absolute;
    top: 50%;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(59, 120, 196, 0.6) 30%,
            rgba(59, 120, 196, 0.8) 50%,
            rgba(59, 120, 196, 0.6) 70%,
            transparent 100%);
    transform: translateY(-50%);
    transition: left 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
    box-shadow: 0 0 20px rgba(59, 120, 196, 0.3),
        0 0 60px rgba(59, 120, 196, 0.1);
}

.chapter-transition.revealed .chapter-transition__beam {
    left: 0;
}

.chapter-transition__beam--purple {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(167, 139, 250, 0.6) 30%,
            rgba(167, 139, 250, 0.8) 50%,
            rgba(167, 139, 250, 0.6) 70%,
            transparent 100%);
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.3),
        0 0 60px rgba(167, 139, 250, 0.1);
}

.chapter-transition__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.chapter-transition__number {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
    letter-spacing: -0.04em;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.chapter-transition.revealed .chapter-transition__number {
    opacity: 1;
    transform: scale(1);
}

.chapter-transition__meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}

.chapter-transition.revealed .chapter-transition__meta {
    opacity: 1;
}

.chapter-transition__line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 120, 196, 0.5), transparent);
    transform: scaleX(0);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.9s;
}

.chapter-transition.revealed .chapter-transition__line {
    transform: scaleX(1);
}

.chapter-transition__line--purple {
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.5), transparent);
}

.chapter-transition__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    color: rgba(59, 120, 196, 0.7);
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.1s,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.1s;
}

.chapter-transition.revealed .chapter-transition__label {
    opacity: 1;
    transform: translateY(0);
}

.chapter-transition__hint {
    font-size: 0.8rem;
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.3s,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.3s;
}

.chapter-transition.revealed .chapter-transition__hint {
    opacity: 1;
    transform: translateY(0);
}

.chapter-transition__glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.chapter-transition.revealed .chapter-transition__glow {
    opacity: 0.25;
}

.chapter-transition__glow--teal {
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(59, 120, 196, 0.5), transparent 70%);
}

.chapter-transition__glow--purple {
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(167, 139, 250, 0.5), transparent 70%);
}

.chapter-transition__gradient-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(167, 139, 250, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(88, 60, 200, 0.04) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
    pointer-events: none;
}

.chapter-transition.revealed .chapter-transition__gradient-mesh {
    opacity: 1;
}

.chapter-transition--two .chapter-transition__label {
    color: rgba(167, 139, 250, 0.7);
}

.chapter-transition--two .chapter-transition__number {
    -webkit-text-stroke: 1px rgba(167, 139, 250, 0.06);
}

/* Deferred Section Entrance — Premium Cinematic Cascade */
.passion-section--deferred {
    opacity: 0;
    transform: translateY(50px) scale(0.97);
    filter: blur(8px);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.passion-section--deferred.passion-section--entered {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
}

/* ── Header Line — draws itself ── */
.passion-section--deferred .passion-header__line {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.passion-section--entered .passion-header__line {
    transform: scaleX(1);
}

/* ── Title — scales up from soft blur ── */
.passion-section--deferred .passion-header__title {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
    filter: blur(6px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
        filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.passion-section--entered .passion-header__title {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
}

/* ── Subtitle — slides in with expanding letter-spacing ── */
.passion-section--deferred .passion-header__subtitle {
    opacity: 0;
    transform: translateY(12px);
    letter-spacing: 0.15em;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s,
        letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s;
}

.passion-section--entered .passion-header__subtitle {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: normal;
}

/* ── Stat counter — pops in with scale bounce ── */
.passion-section--deferred .passion-header__stat {
    opacity: 0;
    transform: scale(0.6) translateY(15px);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s,
        transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s;
}

.passion-section--entered .passion-header__stat {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ── Camera Wireframe — fades in without moving ── */
.passion-section--deferred .camera-wireframe {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.passion-section--entered .camera-wireframe {
    opacity: 0.8;
}

/* ── Glass Cards — stagger up from below with 3D perspective ── */
.passion-section--deferred .glass-card {
    opacity: 0;
    transform: perspective(800px) rotateX(8deg) translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.passion-section--deferred .glass-card:nth-child(1) {
    transition-delay: 1.1s;
}

.passion-section--deferred .glass-card:nth-child(2) {
    transition-delay: 1.35s;
}

.passion-section--deferred .glass-card:nth-child(3) {
    transition-delay: 1.6s;
}

.passion-section--entered .glass-card {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg) translateY(0);
}

/* ── Gaming Card — slides up with subtle rotation ── */
.passion-section--deferred .gaming-card-wrapper {
    opacity: 0;
    transform: perspective(800px) rotateX(6deg) translateY(50px) scale(0.95);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s;
}

.passion-section--entered .gaming-card-wrapper {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg) translateY(0) scale(1);
}

/* ── Ambient glow — slow breathe in ── */
.passion-section--deferred .passion-section__ambient {
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.passion-section--entered .passion-section__ambient {
    opacity: 1;
}

/* ── Rack-Focus — blurs preceding sections when a new chapter reveals ── */
.section--defocused {
    filter: blur(4px);
    opacity: 0.6;
    transform: translateY(-10px) scale(0.99);
    transition: filter 1.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════ */
/* GAMING SECTION — Distinct Purple Identity       */
/* ═══════════════════════════════════════════════ */
.passion-section--alt {
    position: relative;
    background: transparent !important;
}

.passion-section--alt::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(167, 139, 250, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(88, 60, 200, 0.04) 0%, transparent 50%),
        linear-gradient(180deg, rgba(167, 139, 250, 0.02) 0%, transparent 40%, rgba(88, 60, 200, 0.02) 100%);
    pointer-events: none;
    z-index: 0;
}

.passion-section--alt::after {
    content: '';
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(167, 139, 250, 0.06);
    pointer-events: none;
    z-index: 0;
}

/* Give gaming header a richer purple treatment */
.passion-section--alt .passion-header__title {
    background: linear-gradient(180deg,
            #ffffff 0%,
            #d4c6ff 45%,
            rgba(167, 139, 250, 0.8) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 20px rgba(167, 139, 250, 0.12));
}

.passion-section--alt .passion-header__subtitle {
    color: rgba(167, 139, 250, 0.6);
}

/* Gaming Card — 3D Flip (matches work page pattern) */
.gaming-card-wrapper {
    width: 100%;
    max-width: 500px;
    perspective: 1200px;
}

.gaming-card-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 550px;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.gaming-card-wrapper:hover .gaming-card-flipper {
    transform: rotateY(180deg);
}

/* Front Face */
.gaming-card--front {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(59, 120, 196, 0.05) 100%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 24px;
    padding: var(--space-lg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.gaming-card-wrapper:hover .gaming-card--front {
    border-color: rgba(167, 139, 250, 0.4);
    box-shadow: 0 20px 60px -15px rgba(167, 139, 250, 0.2);
}

/* Back Face */
.gaming-card--back {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(59, 120, 196, 0.05) 100%);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 24px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    overflow: hidden;
}

.gaming-card__back-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.gaming-card__back-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 30%, rgba(10, 5, 20, 0.5) 70%, rgba(10, 5, 20, 0.85) 100%),
        linear-gradient(to bottom, rgba(167, 139, 250, 0.08) 0%, transparent 40%, rgba(59, 120, 196, 0.06) 100%);
}

.gaming-card__glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(167, 139, 250, 0.3), transparent, rgba(59, 120, 196, 0.3), transparent);
    animation: rotate-glow 8s linear infinite;
    opacity: 0.5;
}

@keyframes rotate-glow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.gaming-card__content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.gaming-card__header {
    margin-bottom: var(--space-sm);
}

.gaming-card__badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.15);
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.gaming-card__title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
}

.gaming-card__text {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.gaming-card__stats {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.gaming-stat {
    text-align: center;
}

.gaming-stat__value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #a78bfa;
}

.gaming-stat__label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Glowing Button */
.gaming-card__btn {
    position: relative;
    display: inline-block;
    text-decoration: none;
    background: linear-gradient(135deg, #a78bfa 0%, var(--color-accent) 100%);
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #0A0A0A;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gaming-card__btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(167, 139, 250, 0.5);
}

.btn__text {
    position: relative;
    z-index: 1;
}

.btn__glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #a78bfa, var(--color-accent), #a78bfa);
    background-size: 200% 200%;
    border-radius: 14px;
    z-index: -1;
    animation: glow-pulse 2s ease-in-out infinite;
    filter: blur(8px);
    opacity: 0.6;
}

@keyframes glow-pulse {

    0%,
    100% {
        background-position: 0% 50%;
        opacity: 0.6;
    }

    50% {
        background-position: 100% 50%;
        opacity: 0.9;
    }
}

/* Passions Footer */
/* ═══════════════════════════════════════════════ */
/* END NAVIGATION — Animated Compass              */
/* ═══════════════════════════════════════════════ */

/* Reduce gap between gaming section and end nav */
#gaming {
    padding-bottom: var(--space-md);
}

#gaming .passion-header {
    margin-bottom: var(--space-lg);
}

.world-endnav {
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    position: relative;
}

.world-endnav__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.world-endnav__label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

/* ── Compass SVG ── */
.world-endnav__compass {
    width: 120px;
    height: 120px;
}

.compass-svg {
    width: 100%;
    height: 100%;
}

/* Rotating rings at different speeds */
.compass-ring--outer {
    animation: compass-spin 40s linear infinite;
    transform-origin: center;
}

.compass-ring--mid {
    animation: compass-spin-reverse 25s linear infinite;
    transform-origin: center;
}

.compass-ring--inner {
    animation: compass-spin 60s linear infinite;
    transform-origin: center;
}

/* Slow needle oscillation */
.compass-needle {
    animation: needle-sway 8s ease-in-out infinite;
    transform-origin: 100px 100px;
}

/* Breathing glow at needle tip */
.compass-glow {
    animation: compass-breathe 3s ease-in-out infinite;
}

@keyframes compass-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes compass-spin-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes needle-sway {

    0%,
    100% {
        transform: rotate(-8deg);
    }

    50% {
        transform: rotate(8deg);
    }
}

@keyframes compass-breathe {

    0%,
    100% {
        opacity: 0.3;
        r: 6;
    }

    50% {
        opacity: 0.7;
        r: 10;
    }
}

/* ── Navigation Links ── */
.world-endnav__links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.world-endnav__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.4s ease, transform 0.4s ease;
}

.world-endnav__link:hover {
    color: var(--color-accent);
    transform: translateY(-2px);
}

.world-endnav__link-icon {
    width: 18px;
    height: 18px;
    display: flex;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.world-endnav__link:hover .world-endnav__link-icon {
    opacity: 1;
}

.world-endnav__link-icon svg {
    width: 100%;
    height: 100%;
}

.world-endnav__divider {
    color: rgba(255, 255, 255, 0.15);
    font-size: 1.2rem;
}

/* Card link — subtle accent to stand out */
.world-endnav__link--card {
    color: rgba(90, 160, 242, 0.5);
}

.world-endnav__link--card .world-endnav__link-icon {
    opacity: 0.6;
    width: 20px;
    height: 20px;
}

.world-endnav__link--card:hover {
    color: rgba(90, 160, 242, 1);
    text-shadow: 0 0 12px rgba(90, 160, 242, 0.3);
}

/* === Responsive === */
@media (max-width: 768px) {
    :root {
        --space-lg: 3rem;
        --space-xl: 5rem;
        --space-2xl: 8rem;
    }

    .nav-link {
        font-size: 0.75rem;
    }




    .section-heading {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    .section-heading--xl {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .section-sub {
        font-size: 0.9rem;
    }

    .work-showcase__highlights {
        gap: 1.5rem;
        padding: 1.5rem 1.5rem;
    }

    .showcase-stat__number {
        font-size: 1.8rem;
    }

    .showcase-stat__divider {
        height: 30px;
    }

    .contact__links {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-link-item {
        justify-content: center;
    }

    .hero__core {
        width: 200px;
        height: 200px;
    }

    .core__ring--outer {
        width: 180px;
        height: 180px;
    }

    .core__ring--middle {
        width: 140px;
        height: 140px;
    }

    .core__ring--inner {
        width: 100px;
        height: 100px;
    }

    .core__center {
        width: 60px;
        height: 60px;
    }

    .core__pulse {
        width: 30px;
        height: 30px;
    }

    @keyframes orbit1 {
        from {
            transform: rotate(0deg) translateX(90px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translateX(90px) rotate(-360deg);
        }
    }

    @keyframes orbit2 {
        from {
            transform: rotate(120deg) translateX(70px) rotate(-120deg);
        }

        to {
            transform: rotate(480deg) translateX(70px) rotate(-480deg);
        }
    }

    @keyframes orbit3 {
        from {
            transform: rotate(240deg) translateX(50px) rotate(-240deg);
        }

        to {
            transform: rotate(600deg) translateX(50px) rotate(-600deg);
        }
    }

    .timeline__line {
        left: 20px;
    }

    .system-card {
        padding-left: 60px;
    }

    .system-card__number {
        width: 40px;
        height: 40px;
        font-size: 0.75rem;
    }

    .system-card__glass {
        padding: var(--space-md);
    }

    .passions-hero__title {
        font-size: clamp(3rem, 12vw, 6rem);
    }

    .passion-content {
        grid-template-columns: 1fr;
    }

    /* ═══ Lens Cards — Mobile Optimization ═══ */
    .passion-content--lens {
        gap: 2.5rem;
        flex-direction: column;
        align-items: center;
    }

    .lens-card {
        width: 340px;
        height: 340px;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.04),
            0 0 0 3px rgba(0, 0, 0, 0.9),
            0 0 0 4px rgba(192, 168, 120, 0.1),
            0 20px 60px rgba(0, 0, 0, 0.7),
            0 0 80px rgba(59, 120, 196, 0.03),
            inset 0 0 60px rgba(0, 0, 0, 0.4);
    }

    /* Proportionally scale all ring insets (desktop ratio preserved) */
    .lens-card__ambient-glow {
        inset: -35px;
    }

    .lens-card__engraved {
        inset: 3px;
    }

    .lens-card__ring--gold {
        inset: 11px;
    }

    .lens-card__ring--focus {
        inset: 19px;
    }

    .lens-card__ring--gold-inner {
        inset: 34px;
    }

    .lens-card__ring--inner {
        inset: 40px;
    }

    .lens-card__aperture {
        inset: 44px;
    }

    .lens-card__glass {
        inset: 48px;
    }

    .lens-card__light-leak {
        inset: 44px;
    }

    .lens-card__reflection {
        inset: 16px;
    }

    .lens-card__highlight {
        inset: 6px;
    }

    .lens-card__starburst {
        width: 160px;
        height: 160px;
    }

    .lens-card__content {
        inset: 58px;
        padding: 12px;
    }

    .lens-card__title {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    .lens-card__text {
        font-size: 0.62rem;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .lens-card__tag {
        font-size: 0.5rem;
        padding: 4px 10px;
        letter-spacing: 0.1em;
    }

    /* Engraved text scales nicely with SVG viewBox */
    .lens-card__engraved svg text {
        font-size: 10px;
    }

    /* === Mobile Optimizations for Passions Page === */

    /* Scale down the 3D Camera for mobile */
    .camera-wireframe {
        width: 300px;
        height: 300px;
        opacity: 0.6;
    }

    .camera-lens-outer {
        width: 200px;
        height: 200px;
    }

    .camera-lens-outer::before {
        inset: 20px;
    }

    .camera-lens-inner {
        width: 120px;
        height: 120px;
    }

    .camera-lens-inner::before {
        inset: 10px;
    }

    /* Adjust negative margins for mobile flow */
    .passion-section {
        margin-top: -50px;
        padding-top: 80px;
        padding-bottom: var(--space-xl);
    }

    /* Resize giant headers */
    .passion-header__title {
        font-size: 2.5rem;
    }

    .passion-header__subtitle {
        font-size: 1rem;
    }

    /* Fix Hero sizing */
    .passions-hero {
        min-height: 80vh;
    }

    .rotator__word {
        font-size: 2.5rem;
        /* Smaller rotator text */
    }

    /* Ensure footer signature is readable */
    .footer__signature::before {
        width: 300px;
        filter: blur(40px);
    }

    .footer__bot {
        display: none;
    }

    /* === Mobile Optimizations for Tech Stack === */
    .techstack__canvas {
        height: 350px;
    }

    .tech-pill {
        padding: 0.6rem 1.2rem;
    }

    .tech-pill__text {
        font-size: 0.6rem;
    }

    .techstack__glow {
        width: 300px;
        height: 300px;
    }
}

/* ═══ Phone Lens Card — Full Luxury Mobile ═══ */
@media (max-width: 480px) {
    .passion-content--lens {
        gap: 3rem;
        padding: 0;
    }

    /* Use viewport-relative sizing — fills the screen beautifully */
    .lens-card {
        width: min(88vw, 380px);
        height: min(88vw, 380px);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.04),
            0 0 0 3px rgba(0, 0, 0, 0.9),
            0 0 0 4px rgba(192, 168, 120, 0.14),
            0 0 0 6px rgba(0, 0, 0, 0.7),
            0 0 0 7px rgba(192, 168, 120, 0.07),
            0 20px 60px rgba(0, 0, 0, 0.8),
            0 0 80px rgba(59, 120, 196, 0.05),
            inset 0 0 60px rgba(0, 0, 0, 0.35);
    }

    .lens-card:hover {
        transform: translateY(-6px) scale(1.02);
    }

    /* === All ring layers — proportionally scaled === */
    .lens-card__ambient-glow {
        inset: -30px;
    }

    .lens-card__ring--outer {
        border-width: 2.5px;
    }

    .lens-card__engraved {
        inset: 3px;
    }

    /* BRIGHTER gold rings on mobile — small size needs extra pop */
    .lens-card__ring--gold {
        inset: 12px;
        border-width: 2px;
        background: linear-gradient(#0c0c0c, #0c0c0c) padding-box,
            conic-gradient(from 0deg,
                rgba(192, 168, 120, 0.12),
                rgba(218, 195, 150, 0.55),
                rgba(255, 215, 140, 0.25),
                rgba(192, 168, 120, 0.12),
                rgba(160, 140, 100, 0.06),
                rgba(218, 195, 150, 0.5),
                rgba(255, 220, 160, 0.2),
                rgba(192, 168, 120, 0.12)) border-box;
    }

    .lens-card--alt .lens-card__ring--gold {
        background: linear-gradient(#0c0c0c, #0c0c0c) padding-box,
            conic-gradient(from 0deg,
                rgba(200, 160, 220, 0.12),
                rgba(220, 190, 240, 0.5),
                rgba(240, 210, 255, 0.25),
                rgba(200, 160, 220, 0.12),
                rgba(180, 140, 200, 0.06),
                rgba(220, 190, 240, 0.45),
                rgba(240, 215, 255, 0.2),
                rgba(200, 160, 220, 0.12)) border-box;
    }

    .lens-card__ring--focus {
        inset: 20px;
        background: repeating-conic-gradient(rgba(255, 255, 255, 0.02) 0deg 2deg,
                transparent 2deg 4deg);
        box-shadow:
            inset 0 0 25px rgba(0, 0, 0, 0.8),
            inset 0 2px 12px rgba(255, 255, 255, 0.015);
    }

    .lens-card__ring--gold-inner {
        inset: 36px;
        background: linear-gradient(#0d0d0d, #0d0d0d) padding-box,
            conic-gradient(from 180deg,
                rgba(192, 168, 120, 0.08),
                rgba(218, 195, 150, 0.3),
                rgba(192, 168, 120, 0.08),
                rgba(218, 195, 150, 0.25),
                rgba(192, 168, 120, 0.08)) border-box;
    }

    .lens-card--alt .lens-card__ring--gold-inner {
        background: linear-gradient(#0d0d0d, #0d0d0d) padding-box,
            conic-gradient(from 180deg,
                rgba(200, 160, 220, 0.08),
                rgba(220, 190, 240, 0.25),
                rgba(200, 160, 220, 0.08),
                rgba(220, 190, 240, 0.22),
                rgba(200, 160, 220, 0.08)) border-box;
    }

    .lens-card__ring--inner {
        inset: 42px;
        border-width: 1.5px;
        border-color: rgba(59, 120, 196, 0.18);
        box-shadow:
            inset 0 0 50px rgba(0, 0, 0, 0.5),
            0 0 20px rgba(59, 120, 196, 0.06),
            inset 0 0 15px rgba(59, 120, 196, 0.03);
    }

    .lens-card--alt .lens-card__ring--inner {
        border-color: rgba(167, 139, 250, 0.18);
        box-shadow:
            inset 0 0 50px rgba(0, 0, 0, 0.5),
            0 0 20px rgba(167, 139, 250, 0.06),
            inset 0 0 15px rgba(167, 139, 250, 0.03);
    }

    .lens-card__aperture {
        inset: 46px;
    }

    .lens-card__glass {
        inset: 50px;
        background:
            radial-gradient(circle at 25% 20%,
                rgba(59, 120, 196, 0.12) 0%, transparent 35%),
            radial-gradient(circle at 75% 80%,
                rgba(192, 168, 120, 0.07) 0%, transparent 30%),
            radial-gradient(circle at 60% 30%,
                rgba(255, 255, 255, 0.04) 0%, transparent 25%),
            radial-gradient(circle at 50% 50%,
                rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.5) 100%);
    }

    .lens-card--alt .lens-card__glass {
        background:
            radial-gradient(circle at 25% 20%,
                rgba(167, 139, 250, 0.12) 0%, transparent 35%),
            radial-gradient(circle at 75% 80%,
                rgba(200, 160, 220, 0.07) 0%, transparent 30%),
            radial-gradient(circle at 60% 30%,
                rgba(255, 255, 255, 0.04) 0%, transparent 25%),
            radial-gradient(circle at 50% 50%,
                rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.5) 100%);
    }

    .lens-card__light-leak {
        inset: 46px;
    }

    /* Wider, brighter reflection on mobile */
    .lens-card__reflection {
        inset: 14px;
        background: linear-gradient(140deg,
                transparent 18%,
                rgba(255, 255, 255, 0.03) 30%,
                rgba(59, 120, 196, 0.1) 38%,
                rgba(255, 220, 160, 0.07) 44%,
                rgba(255, 255, 255, 0.06) 50%,
                rgba(59, 120, 196, 0.05) 56%,
                rgba(192, 168, 120, 0.04) 63%,
                transparent 78%);
    }

    .lens-card--alt .lens-card__reflection {
        background: linear-gradient(140deg,
                transparent 18%,
                rgba(255, 255, 255, 0.03) 30%,
                rgba(167, 139, 250, 0.1) 38%,
                rgba(220, 190, 240, 0.07) 44%,
                rgba(255, 255, 255, 0.06) 50%,
                rgba(167, 139, 250, 0.05) 56%,
                rgba(200, 160, 220, 0.04) 63%,
                transparent 78%);
    }

    .lens-card__highlight {
        inset: 6px;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.07) 0%,
                rgba(255, 255, 255, 0.025) 16%,
                transparent 38%);
    }

    .lens-card__starburst {
        width: 160px;
        height: 160px;
    }

    /* === Content — readable and luxurious === */
    .lens-card__content {
        inset: 60px;
        padding: 10px;
    }

    .lens-card__title {
        font-size: 1.1rem;
        margin-bottom: 6px;
        letter-spacing: 0.03em;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7),
            0 0 25px rgba(59, 120, 196, 0.1);
    }

    .lens-card--alt .lens-card__title {
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7),
            0 0 25px rgba(167, 139, 250, 0.1);
    }

    .lens-card__text {
        font-size: 0.6rem;
        line-height: 1.5;
        margin-bottom: 10px;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    }

    .lens-card__tag {
        font-size: 0.5rem;
        padding: 4px 11px;
        letter-spacing: 0.1em;
        border-width: 1px;
        box-shadow: 0 2px 8px rgba(59, 120, 196, 0.08);
    }

    .lens-card--alt .lens-card__tag {
        box-shadow: 0 2px 8px rgba(167, 139, 250, 0.08);
    }

    /* Engraved text — keep visible, it adds luxury */
    .lens-card__engraved svg text {
        font-size: 10px;
        letter-spacing: 3;
    }

    /* Optimized animation speeds for mobile */
    .lens-card__ring--focus {
        animation-duration: 50s;
    }

    .lens-card__engraved {
        animation-duration: 100s;
    }

    /* Entrance animation — less dramatic on mobile */
    .passion-section--deferred .lens-card {
        transform: scale(0.75) translateY(30px);
    }

    .passion-section--entered .lens-card {
        transform: scale(1) translateY(0);
    }
}

/* ═══ Small Phone (iPhone SE, Galaxy S) ═══ */
@media (max-width: 380px) {
    .lens-card {
        width: 85vw;
        height: 85vw;
    }

    .lens-card__ambient-glow {
        inset: -18px;
    }

    .lens-card__engraved {
        inset: 2px;
    }

    .lens-card__ring--gold {
        inset: 10px;
    }

    .lens-card__ring--focus {
        inset: 17px;
    }

    .lens-card__ring--gold-inner {
        inset: 30px;
    }

    .lens-card__ring--inner {
        inset: 35px;
    }

    .lens-card__aperture {
        inset: 38px;
    }

    .lens-card__glass {
        inset: 42px;
    }

    .lens-card__light-leak {
        inset: 38px;
    }

    .lens-card__reflection {
        inset: 10px;
    }

    .lens-card__highlight {
        inset: 4px;
    }

    .lens-card__starburst {
        width: 120px;
        height: 120px;
    }

    .lens-card__content {
        inset: 50px;
        padding: 8px;
    }

    .lens-card__title {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }

    .lens-card__text {
        font-size: 0.52rem;
        line-height: 1.4;
        margin-bottom: 7px;
    }

    .lens-card__tag {
        font-size: 0.44rem;
        padding: 3px 8px;
    }

    /* Engraved text smaller but still visible */
    .lens-card__engraved svg text {
        font-size: 11px;
        letter-spacing: 2;
    }
}