/* ==========================================================
   CH NET GUARD — Animations & Motion
   ==========================================================
   Conventions:
     - [data-anim] elements hold the GSAP entrance state
     - Initial state is set here (in CSS) so the page is correct
       BEFORE JS runs, avoiding a flash of unstyled content
     - GSAP animates them to their final visible state on load
   ========================================================== */

/* ---------- Custom cursor ---------- */
.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    will-change: transform;
    mix-blend-mode: difference;
    transition: opacity 250ms var(--ease-out);
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-gold-2);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(229, 193, 88, 0.85);
}

.cursor-ring {
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(20, 215, 195, 0.7);
    border-radius: 50%;
    box-shadow:
        0 0 24px rgba(15, 181, 164, 0.35),
        inset 0 0 12px rgba(15, 181, 164, 0.15);
    transition: opacity 250ms var(--ease-out),
                border-color 200ms var(--ease-out),
                background 200ms var(--ease-out);
}

.cursor-dot.is-visible,
.cursor-ring.is-visible { opacity: 1; }

.cursor-ring.is-hover {
    border-color: var(--accent-gold-2);
    background: rgba(201, 162, 39, 0.08);
}

/* Only show the custom cursor when JS confirms it's safe (non-touch + supported) */
html.has-custom-cursor,
html.has-custom-cursor *:not(input):not(textarea):not(select) {
    cursor: none !important;
}

/* Touch devices: cursor elements never render */
html.is-touch .cursor-dot,
html.is-touch .cursor-ring { display: none !important; }

/* ==========================================================
   Hero entrance — initial states
   GSAP overrides on load. CSS keeps these hidden before JS runs.
   ========================================================== */
[data-anim="eyebrow"],
[data-anim="sub"],
[data-anim="cta"],
[data-anim="chip"],
[data-anim="telemetry"] {
    opacity: 0;
    transform: translateY(24px);
}

[data-anim="scroll-indicator"] { opacity: 0; }

/* Headline mask-reveal:
   each .line lives inside .line-wrap (overflow:hidden);
   .line starts pushed below the mask and rises into view.
*/
.line-wrap {
    display: block;
    overflow: hidden;
    line-height: 1;
    padding-bottom: 0.05em;   /* prevents descender clipping */
}
[data-anim="line"] {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
}

/* Reduced-motion: show everything immediately at final state */
html.is-reduced-motion [data-anim="eyebrow"],
html.is-reduced-motion [data-anim="sub"],
html.is-reduced-motion [data-anim="cta"],
html.is-reduced-motion [data-anim="chip"],
html.is-reduced-motion [data-anim="telemetry"],
html.is-reduced-motion [data-anim="scroll-indicator"] {
    opacity: 1 !important;
    transform: none !important;
}
html.is-reduced-motion [data-anim="line"] {
    transform: translateY(0) !important;
}

/* ==========================================================
   Hero scene container
   Previously gated on a JS `.is-ready` class set by the old
   wireframe hero. The Italy map (map3d.js) has its own boot
   reveal that fades the content in, so we let the canvas
   container be visible immediately and the inner content
   fades itself in.
   ========================================================== */
.hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-scene canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Scan-line overlay — subtle CRT-cyber texture across the hero */
.scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.018) 0px,
        rgba(255, 255, 255, 0.018) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
}

/* Soft vignette inside hero to focus attention center-screen */
.hero-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse at center,
            transparent 40%,
            rgba(3, 4, 10, 0.55) 100%);
}

/* ==========================================================
   Scroll indicator (bottom of hero)
   ========================================================== */
.scroll-indicator {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
}

.scroll-indicator .bar {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(15, 181, 164, 0.6),
        transparent);
    background-size: 100% 200%;
    animation: scrollPulse 2.4s linear infinite;
}

@keyframes scrollPulse {
    from { background-position: 0% -100%; }
    to   { background-position: 0%  100%; }
}

/* ==========================================================
   Telemetry corner labels (HUD detail)
   ========================================================== */
.telemetry {
    position: absolute;
    z-index: 4;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: rgba(15, 181, 164, 0.65);
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}
.telemetry::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    background: var(--accent-teal);
    border-radius: 50%;
    vertical-align: 1px;
    animation: telemBlink 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--accent-teal);
}
@keyframes telemBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.telemetry--tl { top: 96px;  left: 28px; }
.telemetry--tr { top: 96px;  right: 28px; }
.telemetry--bl { bottom: 88px; left: 28px; }
.telemetry--br { bottom: 88px; right: 28px; }

@media (max-width: 768px) {
    .telemetry--tl, .telemetry--tr,
    .telemetry--bl, .telemetry--br { display: none; }
}

/* ==========================================================
   Service chip pills (under headline)
   ========================================================== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(8, 10, 18, 0.55);
    border: 1px solid var(--border-soft);
    color: var(--text-secondary);
    font-size: 13px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--d-base) var(--ease-out);
}
.chip i { color: var(--accent-teal); font-size: 12px; }
.chip:hover {
    border-color: var(--accent-teal);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-teal);
}

/* ==========================================================
   Nav frosted-glass on scroll
   ========================================================== */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    transition: background 350ms var(--ease-out),
                backdrop-filter 350ms var(--ease-out),
                border-color 350ms var(--ease-out),
                padding 350ms var(--ease-out);
    border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
    background: rgba(3, 4, 10, 0.72);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom-color: var(--border-soft);
}

/* ==========================================================
   Triangular "all-seeing" emblem detail (logo decoration)
   echoes the brochure's triangle motif
   ========================================================== */
.emblem-tri {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.emblem-tri::before,
.emblem-tri::after {
    content: '';
    position: absolute;
    inset: 0;
}
.emblem-tri::before {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-2));
    clip-path: polygon(50% 8%, 92% 88%, 8% 88%);
}
.emblem-tri::after {
    background: var(--bg-deep);
    clip-path: polygon(50% 30%, 76% 80%, 24% 80%);
}

/* ==========================================================
   Magnetic button base (cursor.js handles the pull)
   ========================================================== */
[data-magnetic] {
    transition: transform 250ms var(--ease-out);
    will-change: transform;
}

/* ==========================================================
   Reduced motion override — kill heavy effects
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .scanlines,
    .scroll-indicator .bar { animation: none; }
    .hero-scene canvas { opacity: 0.5; }
}

/* ==========================================================
   SCROLL-TRIGGERED REVEALS  (Phase 3+)
   ----------------------------------------------------------
   Elements with [data-reveal] start hidden and animate in
   when main.js (via IntersectionObserver) adds .is-visible.
   ========================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 900ms var(--ease-out),
                transform 900ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion: just show them */
html.is-reduced-motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ==========================================================
   ABOUT — slowly drifting emblem
   ========================================================== */
.emblem-tri-outer {
    transform-origin: 110px 120px;
    animation: emblemRotate 60s linear infinite;
}
.emblem-tri-mid {
    transform-origin: 110px 120px;
    animation: emblemRotate 45s linear infinite reverse;
}
.emblem-tri-inner {
    transform-origin: 110px 115px;
    animation: emblemBob 6s ease-in-out infinite alternate;
}
.emblem-eye {
    animation: emblemPulse 2.4s ease-in-out infinite;
    transform-origin: 110px 116px;
}

@keyframes emblemRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes emblemBob {
    from { transform: translateY(-2px) scale(0.985); }
    to   { transform: translateY(2px)  scale(1.015); }
}
@keyframes emblemPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.55; }
}

/* Reduced motion stops the emblem dance */
@media (prefers-reduced-motion: reduce) {
    .emblem-tri-outer,
    .emblem-tri-mid,
    .emblem-tri-inner,
    .emblem-eye { animation: none !important; }
}

/* ==========================================================
   EMBLEM ↔ MAP SYNC (Phase 10)
   ----------------------------------------------------------
   When the user hovers a named Italian city node on the map,
   emblem-sync.js sets `data-active="MILANO|ROMA|NAPOLI"` on
   the .emblem-stage and writes the city color into
   --emblem-active-color. This makes the emblem feel like it's
   "looking at" the same city the map is highlighting.

   When the map's scan beam sweeps, .emblem-scan-pulse is
   briefly added and a single keyframe plays.
   ========================================================== */

/* Eye color tint while a city is active (defaults to gold) */
.emblem-stage {
    transition: filter 320ms ease-out;
}
.emblem-stage[data-active] {
    /* The active-city color glows behind the whole emblem
       subtly — adds presence without overwhelming the
       existing gold/teal palette. */
    filter: drop-shadow(0 0 14px color-mix(in srgb,
        var(--emblem-active-color, #14D7C3) 55%, transparent));
}

/* Eye dot itself swaps fill on active */
.emblem-stage[data-active] .emblem-eye {
    fill: var(--emblem-active-color, #E5C158);
    transition: fill 240ms ease-out;
}

/* Lock-on reticle — hidden by default, fades in when a city
   is active. Implemented as ::before pseudo on the emblem
   stage so the SVG itself stays untouched. */
.emblem-stage::before {
    content: '';
    position: absolute;
    inset: -6%;
    border: 1px solid transparent;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 240ms ease-out, transform 320ms ease-out,
                border-color 240ms ease-out;
}
.emblem-stage[data-active]::before {
    opacity: 0.75;
    transform: scale(1);
    border-color: color-mix(in srgb,
        var(--emblem-active-color, #14D7C3) 60%, transparent);
    /* Four arc segments via radial mask — leaves 4 corner gaps */
    -webkit-mask:
        conic-gradient(from 0deg,
            #000 0deg 70deg, transparent 70deg 90deg,
            #000 90deg 160deg, transparent 160deg 180deg,
            #000 180deg 250deg, transparent 250deg 270deg,
            #000 270deg 340deg, transparent 340deg 360deg);
            mask:
        conic-gradient(from 0deg,
            #000 0deg 70deg, transparent 70deg 90deg,
            #000 90deg 160deg, transparent 160deg 180deg,
            #000 180deg 250deg, transparent 250deg 270deg,
            #000 270deg 340deg, transparent 340deg 360deg);
}

/* Scan-beam sync — one-shot pulse triggered by JS */
.emblem-stage.emblem-scan-pulse {
    animation: emblemScanPulse 520ms ease-out;
}
@keyframes emblemScanPulse {
    0% {
        filter: drop-shadow(0 0 0   rgba(20, 215, 195, 0));
        transform: scale(1);
    }
    25% {
        filter: drop-shadow(0 0 28px rgba(20, 215, 195, 0.85));
        transform: scale(1.025);
    }
    100% {
        filter: drop-shadow(0 0 0   rgba(20, 215, 195, 0));
        transform: scale(1);
    }
}

/* Make sure the stage can house the absolute pseudo + scale */
.emblem-stage {
    position: relative;
    transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
    .emblem-stage,
    .emblem-stage::before,
    .emblem-stage.emblem-scan-pulse {
        animation: none !important;
        transition: none !important;
    }
}