/* ==========================================
   TURTLES WEB - SHARED COMPONENTS & UI
   ========================================== */

/* Badges */
.badge,
.hero-badge {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #111111;
    background: #f0f0f0;
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
    transition: all 0.8s ease;
}

body.dark-theme .hero-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.svc-badge-micro {
    font-family: monospace;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    border: 1px solid #eaeaea;
    padding: 5px 14px;
    border-radius: 100px;
    width: fit-content;
    background: #f9f9f9;
    transition: all 0.8s ease;
}

body.dark-theme .svc-badge-micro {
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.02);
}

.b-tags { display: flex; gap: 12px; }
.b-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: #aaa; border: 1px solid rgba(255,255,255,0.2); padding: 6px 16px; border-radius: 50px; }

.story-label { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: #ffffff; margin-bottom: 16px; display: inline-block; }
.story-label.highlight { color: #888; }

/* Section Headers */
.section-header {
    margin-bottom: 48px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 24px;
}
.section-title {
    font-size: 48px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -1.5px;
    line-height: 1;
}

.services-header-meta {
    font-family: monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.services-header-meta span::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px #ffffff;
}

/* Black Micro Animated CTA Button */
.hero-cta-wrapper {
    margin-top: 48px;
}

.button {
    --h-button: 48px;
    --round: 0.75rem;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.25s ease;
    background: radial-gradient(
        65.28% 65.28% at 50% 100%,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(0deg, #111111, #111111);
    border-radius: var(--round);
    border: none;
    outline: none;
    padding: 14px 28px;
    text-decoration: none;
}
.button::before,
.button::after {
    content: "";
    position: absolute;
    inset: var(--space);
    transition: all 0.5s ease-in-out;
    border-radius: calc(var(--round) - var(--space));
    z-index: 0;
}
.button::before {
    --space: 1px;
    background: linear-gradient(
        177.95deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%
    );
}
.button::after {
    --space: 2px;
    background: radial-gradient(
        65.28% 65.28% at 50% 100%,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(0deg, #111111, #111111);
}
.button:active {
    transform: scale(0.95);
}

.fold {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    height: 1rem;
    width: 1rem;
    display: inline-block;
    transition: all 0.5s ease-in-out;
    background: radial-gradient(
        100% 75% at 55%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    box-shadow: 0 0 4px rgba(0,0,0,0.8);
    border-bottom-left-radius: 0.5rem;
    border-top-right-radius: var(--round);
}
.fold::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150%;
    height: 150%;
    transform: rotate(45deg) translateX(0%) translateY(-18px);
    background-color: #ffffff;
    pointer-events: none;
    transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
body.dark-theme .fold::after {
    background-color: #050505;
}

.button:hover .fold {
    margin-top: -1rem;
    margin-right: -1rem;
}

.points_wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.points_wrapper .point {
    bottom: -10px;
    position: absolute;
    animation: floating-points infinite ease-in-out;
    pointer-events: none;
    width: 2px;
    height: 2px;
    background-color: #fff;
    border-radius: 9999px;
}
@keyframes floating-points {
    0% { transform: translateY(0); }
    85% { opacity: 0; }
    100% { transform: translateY(-55px); opacity: 0; }
}
.points_wrapper .point:nth-child(1) { left: 10%; opacity: 1; animation-duration: 2.35s; animation-delay: 0.2s; }
.points_wrapper .point:nth-child(2) { left: 30%; opacity: 0.7; animation-duration: 2.5s; animation-delay: 0.5s; }
.points_wrapper .point:nth-child(3) { left: 25%; opacity: 0.8; animation-duration: 2.2s; animation-delay: 0.1s; }
.points_wrapper .point:nth-child(4) { left: 44%; opacity: 0.6; animation-duration: 2.05s; }
.points_wrapper .point:nth-child(5) { left: 50%; opacity: 1; animation-duration: 1.9s; }
.points_wrapper .point:nth-child(6) { left: 75%; opacity: 0.5; animation-duration: 1.5s; animation-delay: 1.5s; }
.points_wrapper .point:nth-child(7) { left: 88%; opacity: 0.9; animation-duration: 2.2s; animation-delay: 0.2s; }
.points_wrapper .point:nth-child(8) { left: 58%; opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s; }
.points_wrapper .point:nth-child(9) { left: 98%; opacity: 0.6; animation-duration: 2.6s; animation-delay: 0.1s; }
.points_wrapper .point:nth-child(10) { left: 65%; opacity: 1; animation-duration: 2.5s; animation-delay: 0.2s; }

.inner {
    z-index: 2;
    gap: 8px;
    position: relative;
    width: 100%;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    transition: color 0.2s ease-in-out;
}

.inner svg.icon {
    width: 18px;
    height: 18px;
    transition: fill 0.1s linear;
}

.button:focus svg.icon {
    fill: white;
}
.button:hover svg.icon {
    fill: transparent;
    animation: dasharray 1s linear forwards, filled 0.1s linear forwards 0.95s;
}
@keyframes dasharray {
    from { stroke-dasharray: 0 0 0 0; }
    to { stroke-dasharray: 68 68 0 0; }
}
@keyframes filled {
    to { fill: white; }
}

/* Scroll Cue Indicator */
.scroll-cue {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.3;
    transition: opacity 0.3s ease, color 0.8s ease;
    animation: cueBounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1);
    color: #111;
}

body.dark-theme .scroll-cue { color: #fff; }
.scroll-cue:hover { opacity: 1; }

.scroll-cue span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}
.scroll-cue svg { width: 20px; height: 20px; }

@keyframes cueBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(8px); }
    60% { transform: translateY(4px); }
}

/* Project Bento & Selected Works Cards */
.project-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.b-header { grid-column: span 12; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 24px; margin-bottom: 12px; }
.b-title { font-size: 48px; font-weight: 600; color: #ffffff; letter-spacing: -1.5px; line-height: 1; }

.b-card { background: #111111; border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); overflow: hidden; transition: transform 0.4s ease, border-color 0.4s ease; }
.b-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-4px); }

.b-image { grid-column: span 8; height: 480px; position: relative; }
.b-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.b-card:hover.b-image img { transform: scale(1.03); }

.b-story { grid-column: span 4; padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.b-story p { font-size: 16px; line-height: 1.6; color: #aaa; margin-bottom: 24px; }
.b-story p:last-child { margin-bottom: 0; }
.b-story strong { color: #ffffff; font-weight: 500; }

.project-bento.mirrored .b-image { grid-column: 5 / 13; grid-row: 2; }
.project-bento.mirrored .b-story { grid-column: 1 / 5; grid-row: 2; }

/* Editorial Accordion */
.editorial-section { margin-top: 120px; }
.editorial-list { display: flex; flex-direction: column; }
.ed-item { border-top: 1px solid rgba(255,255,255,0.1); padding: 48px 0; cursor: pointer; position: relative; overflow: hidden; }
.ed-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.ed-top { display: flex; align-items: center; justify-content: space-between; }
.ed-left { display: flex; align-items: center; gap: 48px; }
.ed-num { font-size: 16px; font-weight: 500; color: #555; width: 30px; transition: color 0.4s ease; }
.ed-title { font-size: 64px; font-weight: 600; letter-spacing: -2.5px; color: #ffffff; margin: 0; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease; transform-origin: left center; }

.ed-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ffffff; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

.editorial-list:hover .ed-item:not(:hover) .ed-title { color: #444; transform: translateX(0); }
.editorial-list:hover .ed-item:not(:hover) .ed-arrow { opacity: 0.2; }

.ed-item:hover .ed-title { transform: translateX(32px); color: #ffffff; }
.ed-item:hover .ed-num { color: #ffffff; }
.ed-item:hover .ed-arrow { background: #ffffff; border-color: #ffffff; color: #000; transform: rotate(-45deg); }

.ed-content-wrapper { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease 0.1s, padding 0.5s ease; }
.ed-item:hover .ed-content-wrapper { max-height: 600px; opacity: 1; padding-top: 48px; }
.ed-desc { font-size: 18px; line-height: 1.6; color: #aaa; max-width: 400px; margin: 0; transform: translateY(20px); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
.ed-item:hover .ed-desc { transform: translateY(0); }

/* SVG WOW Containers & Animated Graphics */
.ed-wow-container { 
    width: 100%; 
    height: 350px; 
    border-radius: 20px; 
    overflow: hidden; 
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), transparent 75%), #0a0a0a; 
    border: 1px solid rgba(255,255,255,0.04); 
    transform: scale(0.95); 
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s ease; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ed-item:hover .ed-wow-container { 
    transform: scale(1); 
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(255,255,255,0.015);
    border-color: rgba(255,255,255,0.1);
}

.ed-wow-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.15;
    transition: opacity 0.8s ease;
}

.ed-item:hover .ed-wow-container::after { opacity: 0.4; }

.wow-svg-art { width: 100%; max-width: 180px; height: 180px; z-index: 2; position: relative; overflow: visible; }
.wow-glow { filter: drop-shadow(0 0 12px rgba(255,255,255,0.7)); }
.wow-subglow { filter: drop-shadow(0 0 8px rgba(255,255,255,0.3)); }

.roi-spin { transform-origin: center; animation: spinInfinite 12s linear infinite; }
.roi-spin-reverse { transform-origin: center; animation: spinInfiniteRev 16s linear infinite; }
@keyframes spinInfinite { to { transform: rotate(360deg); } }
@keyframes spinInfiniteRev { to { transform: rotate(-360deg); } }

.roi-chart-line { 
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: chartRise 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes chartRise {
    0% { stroke-dashoffset: 200; opacity: 0; }
    20% { opacity: 1; }
    60%, 100% { stroke-dashoffset: 0; opacity: 1;}
}
.roi-ring { animation: pulseTarget 2.5s ease-out infinite; transform-origin: 160px 50px; opacity: 0; }
@keyframes pulseTarget {
    0%, 50% { transform: scale(0.2); opacity: 0; }
    60% { opacity: 1; transform: scale(1.5); stroke-width: 2px; }
    100% { opacity: 0; transform: scale(4); stroke-width: 0.2px; }
}

.flex-beam {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-dasharray: 80 400;
    animation: beamRun 2.8s linear infinite;
    stroke-linecap: round;
}
@keyframes beamRun {
    0% { stroke-dashoffset: 480; }
    100% { stroke-dashoffset: 0; }
}
.flex-art { animation: hoverArt 5s ease-in-out infinite; height: 110px; transform-origin: center; }
@keyframes hoverArt { 
    0%, 100% { transform: translateY(-8px) scale(0.98); } 
    50% { transform: translateY(8px) scale(1.02); } 
}

.scan-bar { animation: scanline 4s cubic-bezier(0.2, 0, 0.2, 1) infinite; opacity: 0; }
@keyframes scanline {
    0% { transform: translateY(0); opacity: 0; }
    15%, 85% { opacity: 1; }
    100% { transform: translateY(140px); opacity: 0; }
}
.nexus-poly {
    transform-origin: 100px 100px;
    animation: pulsePoly 4s ease-in-out infinite alternate;
    stroke-dasharray: 40 10;
    stroke-dashoffset: 0;
}
.nexus-poly.inner {
    animation: rotatePolyRev 7s cubic-bezier(0.3, 0, 0.7, 1) infinite;
    stroke-dasharray: 10 15;
}
@keyframes pulsePoly {
    0% { transform: scale(0.95); stroke-dashoffset: 0; }
    100% { transform: scale(1.05); stroke-dashoffset: 50; }
}
@keyframes rotatePolyRev {
    0%, 15% { transform: scale(0.95) rotate(0deg); }
    45%, 60% { transform: scale(1.05) rotate(22deg); }
    90%, 100% { transform: scale(0.95) rotate(0deg); }
}
.orb { opacity: 0.6; animation: flickerOrb 2s alternate infinite; }
.o1 { animation-delay: 0s; }
.o2 { animation-delay: 0.6s; }
.o3 { animation-delay: 1s; }
.o4 { animation-delay: 0.3s; }
.o5 { animation-delay: 0.8s; }
@keyframes flickerOrb {
    0%, 20% { opacity: 0.1; transform: scale(0.5); box-shadow: none; }
    80%, 100% { opacity: 1; transform: scale(1.4); }
}

/* Responsive Component Adjustments */
@media (max-width: 1024px) {
    .b-image { grid-column: span 12; grid-row: auto !important; height: auto; aspect-ratio: 16 / 10; width: 100%; }
    .b-story { grid-column: span 12; grid-row: auto !important; }
    .project-bento.mirrored .b-image { grid-column: span 12; grid-row: auto !important; order: 1; }
    .project-bento.mirrored .b-story { grid-column: span 12; grid-row: auto !important; order: 2; }
    .ed-title { font-size: 48px; }
    .ed-content-wrapper { gap: 40px; }
}

@media (max-width: 768px) {
    .b-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .b-title { font-size: 36px; }
    .b-tags { flex-wrap: wrap; }
    .b-image { height: auto; aspect-ratio: 16 / 10; width: 100%; }

    .editorial-section { margin-top: 60px; }
    .ed-title { font-size: 32px; letter-spacing: -1px; }
    .ed-arrow { display: none; }
    .ed-content-wrapper { max-height: 1000px; opacity: 1; grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
    
    .ed-wow-container { height: 250px; }
    .wow-svg-art { width: 140px; height: 140px; }
}

/* ==========================================
   GLOBAL SCROLL REVEAL (BLUR-FADE ANIMATION)
   ========================================== */
[data-scroll-reveal],
.scroll-blur-fade {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, transform;
}

[data-scroll-reveal].is-revealed,
.scroll-blur-fade.is-revealed {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    [data-scroll-reveal],
    .scroll-blur-fade {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
}