/* Scroll-driven 3D data center (includes/secure-ai-sequence.php + js/datacenter.js). */

.dc-sequence {
    position: relative;
    height: 720vh;
    background: #050507;
}
.dc-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.dc-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.dc-sequence.has-3d .dc-canvas { opacity: 1; }

/* Without WebGL: a soft glow stands in for the model. */
.dc-sequence:not(.has-3d) .dc-stage {
    background:
        radial-gradient(circle at 70% 50%, rgba(168, 85, 247, 0.18), transparent 45%),
        radial-gradient(circle at 60% 60%, rgba(99, 102, 241, 0.18), transparent 50%);
}
.dc-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 5, 7, 0.92) 0%, rgba(5, 5, 7, 0.55) 30%, rgba(5, 5, 7, 0) 52%),
        linear-gradient(0deg, rgba(5, 5, 7, 0.8) 0%, rgba(5, 5, 7, 0) 18%);
}

/* ── Hero / outro ─────────────────────────────────────────────── */
.dc-hero, .dc-outro {
    position: absolute;
    left: max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem));
    top: 50%;
    transform: translateY(-50%);
    max-width: 34rem;
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2, .7, .2, 1);
}
.dc-hero.is-hidden { opacity: 0; transform: translateY(-60%) scale(0.96); pointer-events: none; }
.dc-outro { opacity: 0; transform: translateY(-40%); pointer-events: none; }
.dc-outro.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }

.dc-kicker {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #f472b6;
    margin-bottom: 1.25rem;
}
.dc-title {
    font-size: clamp(2.6rem, 5.6vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
}
.dc-lead { font-size: 1.2rem; color: #9ca3af; line-height: 1.6; font-weight: 300; }
.dc-cta {
    display: inline-flex;
    gap: 0.6rem;
    margin-top: 2rem;
    padding: 1rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    background: linear-gradient(90deg, #4f46e5, #9333ea, #ec4899);
    background-size: 200% 100%;
    transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.dc-cta:hover { background-position: 100% 0; transform: scale(1.04); box-shadow: 0 0 40px rgba(168, 85, 247, 0.45); }

/* ── Captions ─────────────────────────────────────────────────── */
.dc-captions {
    position: absolute;
    left: max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem));
    top: 50%;
    transform: translateY(-50%);
    width: min(30rem, 40vw);
    list-style: none;
    margin: 0;
    padding: 0;
}
.dc-caption {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(calc(-50% + 30px));
    filter: blur(6px);
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2, .7, .2, 1), filter 0.6s ease;
    pointer-events: none;
}
.dc-caption.is-active { opacity: 1; transform: translateY(-50%); filter: none; pointer-events: auto; }
.dc-caption-tag {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #818cf8;
    margin-bottom: 1rem;
}
.dc-caption-tag span {
    display: inline-grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(129, 140, 248, 0.5);
    letter-spacing: 0;
    color: #fff;
    background: rgba(99, 102, 241, 0.15);
}
.dc-caption h3 {
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}
.dc-caption p { color: #a1a1aa; line-height: 1.65; font-size: 1.05rem; }
.dc-caption ul { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.dc-caption li {
    position: relative;
    padding-left: 1.5rem;
    color: #d4d4d8;
    font-size: 0.95rem;
}
.dc-caption li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.6);
}

/* ── Progress rail ────────────────────────────────────────────── */
.dc-rail {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.dc-sequence.is-touring .dc-rail { opacity: 1; }
.dc-progress {
    position: absolute;
    right: 0.43rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
}
.dc-progress-bar {
    width: 100%;
    height: 100%;
    transform-origin: top;
    transform: scaleY(0);
    background: linear-gradient(#6366f1, #ec4899);
}
.dc-rail button {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.8rem;
    background: none;
    border: 0;
    color: #71717a;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}
.dc-rail-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 2px solid #3f3f46;
    background: #050507;
    transition: all 0.3s ease;
}
.dc-rail button:hover, .dc-rail button.is-active { color: #fff; }
.dc-rail button.is-done .dc-rail-dot { border-color: #6366f1; background: #6366f1; }
.dc-rail button.is-active .dc-rail-dot { border-color: #ec4899; background: #ec4899; box-shadow: 0 0 14px #ec4899; }

/* ── Scroll hint ──────────────────────────────────────────────── */
.dc-scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #71717a;
    transition: opacity 0.5s ease;
}
.dc-scroll-hint span {
    width: 1.4rem;
    height: 2.2rem;
    border: 2px solid #52525b;
    border-radius: 999px;
    position: relative;
}
.dc-scroll-hint span::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0.4rem;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: #ec4899;
    animation: dc-wheel 1.6s ease-in-out infinite;
}
.dc-scroll-hint.is-hidden { opacity: 0; }
@keyframes dc-wheel { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* ── Mobile: model on top, text below ─────────────────────────── */
@media (max-width: 900px) {
    .dc-sequence { height: 640vh; }
    .dc-vignette { background: linear-gradient(0deg, rgba(5, 5, 7, 0.97) 0%, rgba(5, 5, 7, 0.85) 42%, rgba(5, 5, 7, 0) 62%); }
    .dc-hero, .dc-outro, .dc-captions {
        left: 1.25rem;
        right: 1.25rem;
        top: auto;
        bottom: 5.5rem;
        width: auto;
        max-width: none;
        transform: none;
    }
    .dc-hero.is-hidden { transform: translateY(-20px); }
    .dc-outro { transform: translateY(20px); }
    .dc-outro.is-active { transform: none; }
    .dc-caption { top: auto; bottom: 0; transform: translateY(24px); }
    .dc-caption.is-active { transform: none; }
    .dc-caption ul { display: none; }
    .dc-title { font-size: 2.4rem; }
    .dc-lead { font-size: 1rem; }
    .dc-rail { right: auto; left: 50%; top: auto; bottom: 1.4rem; transform: translateX(-50%); flex-direction: row; gap: 0.9rem; }
    .dc-rail-label, .dc-progress { display: none; }
    .dc-scroll-hint { bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-caption, .dc-hero, .dc-outro { transition: opacity 0.2s linear; filter: none; }
}

/* ── Generic scroll reveal (js/main.js) ───────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.9s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}