/* ============================================================
CDC EFFECTS — Pacchetto vanilla (no dipendenze)
============================================================
Include questo file in di ogni pagina che usa effetti:
Poi prima di :
Tutti gli stili sono prefissati con .cdc- per non collidere
con il tuo CSS esistente.
============================================================ */
:root{
--cdc-accent:#E5FF00;
--cdc-accent-2:#5AD7FF;
--cdc-ink-dark:#0a0a0a;
--cdc-ink-light:#f4f4ef;
--cdc-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
--cdc-display:'Archivo','Archivo Narrow',Helvetica,Arial,sans-serif;
}
/* ---------- 1. LOGO SCAN-BUILD ---------- */
.cdc-logo{
display:inline-flex;align-items:flex-end;gap:8px;
font-family:var(--cdc-display);font-weight:900;letter-spacing:-0.04em;line-height:0.85;
}
.cdc-logo__text{
position:relative;overflow:hidden;
-webkit-text-stroke:2px currentColor;-webkit-text-fill-color:transparent;color:transparent;
font-size:inherit;
}
.cdc-logo__text-inner{display:inline-block;animation:cdcBuildLeft 1600ms cubic-bezier(.7,0,.3,1) both}
.cdc-logo__scan{position:absolute;top:0;bottom:0;width:3px;background:var(--cdc-accent);box-shadow:0 0 16px var(--cdc-accent);animation:cdcScanProbe 1600ms cubic-bezier(.7,0,.3,1) both}
.cdc-logo__block{width:0.32em;height:0.72em;background:var(--cdc-accent);margin-bottom:0.05em;animation:cdcBlockClick 400ms cubic-bezier(.7,0,.3,1) 1600ms both}
.cdc-logo[data-loop="true"] .cdc-logo__text-inner,
.cdc-logo[data-loop="true"] .cdc-logo__scan,
.cdc-logo[data-loop="true"] .cdc-logo__block{animation-iteration-count:infinite;animation-duration:4200ms}
@keyframes cdcBuildLeft { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes cdcScanProbe { 0%{left:0;opacity:1} 100%{left:100%;opacity:0} }
@keyframes cdcBlockClick { 0%{transform:translateX(-12px) scaleX(0)} 60%{transform:translateX(0) scaleX(1.15)} 100%{transform:translateX(0) scaleX(1)} }
/* ---------- 2. BACKGROUND: GRID BLUEPRINT ---------- */
.cdc-bg-grid{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cdc-bg-grid svg{position:absolute;inset:0;width:100%;height:100%}
.cdc-bg-grid__slide-x{position:absolute;width:120px;height:8px;background:var(--cdc-accent);top:30%;left:-20%;animation:cdcBgSlideX 11s linear infinite}
.cdc-bg-grid__slide-y{position:absolute;width:8px;height:80px;background:var(--cdc-accent-2);top:-10%;left:70%;animation:cdcBgSlideY 14s linear infinite}
.cdc-bg-grid__lbl{position:absolute;font-family:var(--cdc-mono);font-size:9px;letter-spacing:0.08em;opacity:0.4}
.cdc-bg-grid__lbl--bl{bottom:10px;left:10px}
.cdc-bg-grid__lbl--tr{top:10px;right:10px}
@keyframes cdcBgSlideX { 0%{left:-20%} 100%{left:120%} }
@keyframes cdcBgSlideY { 0%{top:-20%} 100%{top:120%} }
/* ---------- 3. BACKGROUND: MARQUEE MANIFESTO ---------- */
.cdc-marquee{position:relative;width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:60px 0}
.cdc-marquee__row{white-space:nowrap;overflow:hidden;font-family:var(--cdc-display);font-weight:900;font-size:54px;letter-spacing:-0.02em;line-height:1.05;opacity:0.55;-webkit-text-stroke:1.5px currentColor;color:transparent}
.cdc-marquee__row--accent{color:var(--cdc-accent);-webkit-text-stroke:none;opacity:1}
.cdc-marquee__inner{display:inline-block;animation:cdcMarqueeL 28s linear infinite}
.cdc-marquee__row--rev .cdc-marquee__inner{animation-name:cdcMarqueeR}
@keyframes cdcMarqueeL { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes cdcMarqueeR { from{transform:translateX(-50%)} to{transform:translateX(0)} }
/* ---------- 4. SECTION TRANSITION (slice tipografico) ---------- */
.cdc-trans{position:fixed;inset:0;z-index:9000;pointer-events:none;display:none}
.cdc-trans.cdc-trans--run{display:block}
.cdc-trans__top, .cdc-trans__bot{position:absolute;left:0;right:0;height:50%;background:var(--cdc-ink-dark);color:var(--cdc-ink-light);display:flex;justify-content:center;overflow:hidden}
.cdc-trans__top{top:0;align-items:flex-end;animation:cdcTtop 1300ms cubic-bezier(.7,0,.3,1) forwards}
.cdc-trans__bot{bottom:0;align-items:flex-start;animation:cdcTbot 1300ms cubic-bezier(.7,0,.3,1) forwards}
.cdc-trans__ttl{font-family:var(--cdc-display);font-weight:900;font-size:clamp(80px,14vw,180px);letter-spacing:-0.05em;line-height:1}
.cdc-trans__top .cdc-trans__ttl{transform:translateY(50%)}
.cdc-trans__bot .cdc-trans__ttl{transform:translateY(-50%)}
.cdc-trans__line{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--cdc-accent);opacity:0;animation:cdcTline 1300ms cubic-bezier(.7,0,.3,1) forwards}
@keyframes cdcTtop { 0%{transform:translateY(-100%)} 30%,55%{transform:translateY(0)} 100%{transform:translateY(-100%)} }
@keyframes cdcTbot { 0%{transform:translateY(100%)} 30%,55%{transform:translateY(0)} 100%{transform:translateY(100%)} }
@keyframes cdcTline { 0%{opacity:0} 30%,55%{opacity:1} 100%{opacity:0} }
/* ---------- 5. LOADER ---------- */
.cdc-loader{position:fixed;inset:0;z-index:9100;background:var(--cdc-ink-dark);color:var(--cdc-ink-light);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;transition:opacity 600ms ease, visibility 600ms}
.cdc-loader.cdc-loader--gone{opacity:0;visibility:hidden}
.cdc-loader__meta{display:flex;justify-content:space-between;width:min(440px,70vw);font-family:var(--cdc-mono);font-size:11px;letter-spacing:0.14em}
.cdc-loader__bar{width:min(440px,70vw);height:14px;border:1px solid currentColor;position:relative}
.cdc-loader__fill{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--cdc-accent);transition:width 90ms linear}
.cdc-loader__sub{font-family:var(--cdc-mono);font-size:10px;opacity:0.55;letter-spacing:0.14em}
.cdc-blink{animation:cdcBlink 1s steps(1) infinite}
@keyframes cdcBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
/* ---------- 6. CURSORE CUSTOM ---------- */
html.cdc-cursor-on, html.cdc-cursor-on body, html.cdc-cursor-on a, html.cdc-cursor-on button { cursor:none }
.cdc-cursor{position:fixed;left:0;top:0;width:18px;height:18px;background:var(--cdc-accent);transform:translate(-50%,-50%);pointer-events:none;z-index:9200;mix-blend-mode:difference;transition:transform 160ms cubic-bezier(.2,.9,.2,1.2), background 160ms}
.cdc-cursor.cdc-cursor--over{transform:translate(-50%,-50%) scale(2.4);background:transparent;outline:1px solid var(--cdc-ink-light);mix-blend-mode:normal}
@media (hover:none){ .cdc-cursor{display:none} html.cdc-cursor-on, html.cdc-cursor-on *{cursor:auto !important} }
/* ---------- 7. DIVIDER TICKER ---------- */
.cdc-divider{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px;color:inherit}
.cdc-divider__lbl{font-family:var(--cdc-mono);font-size:10px;opacity:0.6;letter-spacing:0.16em;text-transform:uppercase;display:flex;justify-content:space-between}
.cdc-divider__bar{position:relative;height:38px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;overflow:hidden;display:flex;align-items:center}
.cdc-divider__inner{display:inline-flex;gap:24px;white-space:nowrap;font-family:var(--cdc-display);font-weight:900;font-size:22px;letter-spacing:-0.02em;animation:cdcMarqueeL 22s linear infinite}
.cdc-divider__chunk{display:inline-flex;align-items:center;gap:14px}
.cdc-dot{display:inline-block;width:14px;height:14px}
.cdc-dot--y{background:var(--cdc-accent)}
.cdc-dot--ink{background:currentColor}
.cdc-dot--out{border:1px solid currentColor}
/* ---------- Reveal on scroll ---------- */
.cdc-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.9,.2,1), transform .9s cubic-bezier(.2,.9,.2,1)}
.cdc-reveal.cdc-in{opacity:1;transform:translateY(0)}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.cdc-logo *, .cdc-bg-grid *, .cdc-marquee__inner, .cdc-divider__inner,
.cdc-trans__top, .cdc-trans__bot, .cdc-trans__line, .cdc-cursor, .cdc-reveal{
animation:none !important; transition:none !important;
}
.cdc-reveal{opacity:1;transform:none}
}