/*
Theme Name: Ratafita OS
Author: Ratafita
Description: Retro-futuriste v3 — synthwave, glitch, timeline, portfolio, curseur neon.
Version: 3.0.0
Text Domain: shizuka
*/
:root{
  --bg:#07020f;--bg2:#140828;--magenta:#ff2e97;--cyan:#00f0ff;--purple:#a24bff;--gold:#ffd23f;
  --grid:rgba(0,240,255,.35);--ink:#e9ddff;--dim:#8a7bb0;
  --disp:"Orbitron",sans-serif;--logo:"Audiowide",sans-serif;--body:"Rajdhani",system-ui,sans-serif;--mono:"Share Tech Mono",monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.7;overflow-x:hidden;position:relative;cursor:none}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:120;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
::selection{background:var(--magenta);color:#fff}

/* cursor */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:130;transform:translate(-50%,-50%);mix-blend-mode:screen}
.cur-dot{width:7px;height:7px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.cur-ring{width:34px;height:34px;border:1px solid var(--magenta);box-shadow:0 0 14px rgba(255,46,151,.6);transition:width .2s,height .2s,border-color .2s}
.cur-ring.big{width:58px;height:58px;border-color:var(--cyan)}
@media(hover:none){.cur-dot,.cur-ring{display:none}body{cursor:auto}}

/* header */
.site-head{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:18px 40px;backdrop-filter:blur(8px);background:linear-gradient(180deg,rgba(7,2,15,.9),transparent)}
.brand{font-family:var(--logo);font-size:23px;letter-spacing:.05em;background:linear-gradient(180deg,#fff 10%,#c9d6ff 42%,#8b7bff 52%,#fff 60%,#a7b0d8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(162,75,255,.6))}
.nav a{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;margin-left:28px;color:var(--cyan);transition:.3s}
.nav a:hover{color:#fff;text-shadow:0 0 10px var(--cyan)}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 12%,var(--bg2),var(--bg) 70%);z-index:0}
.stars{position:absolute;inset:0;z-index:0;background-image:
 radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 32% 68%,#cfe,transparent),
 radial-gradient(1.5px 1.5px at 55% 18%,#fff,transparent),radial-gradient(1px 1px at 72% 42%,#fbd,transparent),
 radial-gradient(1px 1px at 85% 72%,#fff,transparent),radial-gradient(1.5px 1.5px at 45% 82%,#fff,transparent),
 radial-gradient(1px 1px at 92% 28%,#bff,transparent),radial-gradient(1px 1px at 8% 78%,#fff,transparent);
 animation:tw 5s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.5}50%{opacity:1}}
.sun{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:min(58vw,420px);aspect-ratio:1;border-radius:50%;z-index:1;
 background:linear-gradient(#fff 2%,var(--gold) 16%,var(--magenta) 55%,var(--purple));box-shadow:0 0 100px rgba(255,46,151,.5)}
.sun::after{content:"";position:absolute;left:0;right:0;top:52%;bottom:0;border-radius:0 0 999px 999px;background:repeating-linear-gradient(to bottom,transparent 0 5px,var(--bg) 5px 9px,transparent 9px 10px)}
.grid-floor{position:absolute;bottom:0;left:-40%;right:-40%;height:42vh;z-index:1;opacity:.6;background-image:linear-gradient(var(--grid) 2px,transparent 2px),linear-gradient(90deg,var(--grid) 2px,transparent 2px);background-size:64px 64px;transform:perspective(280px) rotateX(62deg);transform-origin:bottom;animation:grid 1.1s linear infinite}
@keyframes grid{to{background-position:0 64px}}
.hero-inner{position:relative;z-index:3;padding:0 24px}
.hero .kicker{font-family:var(--mono);font-size:13px;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase;margin-bottom:22px;text-shadow:0 0 12px var(--cyan)}
.glitch{font-family:var(--disp);font-weight:900;font-size:clamp(2.6rem,8vw,6rem);line-height:.98;text-transform:uppercase;color:#fff;position:relative;text-shadow:0 0 6px #fff,0 0 24px var(--magenta)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;background:var(--bg);overflow:hidden}
.glitch::before{left:2px;text-shadow:-2px 0 var(--cyan);animation:g1 3s infinite linear alternate-reverse;clip-path:inset(0 0 55% 0)}
.glitch::after{left:-2px;text-shadow:-2px 0 var(--magenta);animation:g2 2.4s infinite linear alternate-reverse;clip-path:inset(60% 0 0 0)}
@keyframes g1{0%{clip-path:inset(0 0 90% 0)}20%{clip-path:inset(30% 0 40% 0)}40%{clip-path:inset(10% 0 70% 0)}60%,100%{clip-path:inset(0 0 95% 0)}}
@keyframes g2{0%{clip-path:inset(80% 0 5% 0)}25%{clip-path:inset(50% 0 30% 0)}50%{clip-path:inset(70% 0 12% 0)}75%,100%{clip-path:inset(88% 0 2% 0)}}
.hero .cy{color:var(--cyan)}
.hero p.lead{margin:28px auto 0;max-width:540px;font-size:1.15rem;color:var(--dim)}
.boot{margin-top:22px;font-family:var(--mono);font-size:12px;color:var(--cyan);letter-spacing:.1em;min-height:1.2em}
.boot::after{content:"_";animation:cur 1s step-end infinite}
@keyframes cur{50%{opacity:0}}
.scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase}

section{padding:120px 0;position:relative}
.sec-label{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--magenta);margin-bottom:16px;text-shadow:0 0 12px rgba(255,46,151,.6)}
.sec-title{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,4.5vw,3rem);text-transform:uppercase;line-height:1.08;color:#fff}

.marquee{border-top:2px solid var(--magenta);border-bottom:2px solid var(--magenta);padding:15px 0;overflow:hidden;white-space:nowrap;background:rgba(255,46,151,.05)}
.marquee span{display:inline-block;font-family:var(--disp);font-weight:800;font-size:1.4rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);animation:scr 20s linear infinite;padding-left:100%}
@keyframes scr{to{transform:translateX(-100%)}}

.manifesto{text-align:center;background:radial-gradient(70% 120% at 50% 0%,rgba(162,75,255,.12),transparent)}
.manifesto p{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.35;max-width:16ch;margin:0 auto;color:#fff;text-transform:uppercase}
.manifesto .hl{color:var(--magenta);text-shadow:0 0 24px var(--magenta)}
.manifesto .hl2{color:var(--cyan);text-shadow:0 0 24px var(--cyan)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.card{border:1px solid rgba(0,240,255,.3);background:linear-gradient(160deg,rgba(162,75,255,.08),rgba(0,240,255,.03));padding:36px 30px;position:relative;transition:.4s;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--magenta),var(--cyan))}
.card:hover{transform:translateY(-6px);border-color:var(--cyan);box-shadow:0 0 30px rgba(0,240,255,.25)}
.card .no{font-family:var(--mono);font-size:13px;color:var(--magenta)}
.card h3{font-family:var(--disp);font-weight:700;font-size:1.5rem;text-transform:uppercase;margin:12px 0 12px;color:#fff}
.card p{color:var(--dim)}

/* timeline */
.tl{margin-top:60px;position:relative;padding-left:32px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--magenta),var(--cyan))}
.tl-item{position:relative;padding:0 0 46px 34px}
.tl-item::before{content:"";position:absolute;left:-1px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--cyan);box-shadow:0 0 12px var(--cyan)}
.tl-item .st{font-family:var(--mono);font-size:12px;color:var(--magenta);letter-spacing:.2em}
.tl-item h4{font-family:var(--disp);font-weight:700;font-size:1.35rem;text-transform:uppercase;color:#fff;margin:6px 0 6px}
.tl-item p{color:var(--dim);max-width:52ch}

/* portfolio */
.folio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.tile{aspect-ratio:4/3;border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:22px;transition:.4s}
.tile:nth-child(1){background:linear-gradient(135deg,#ff2e97,#7b2ff7)}
.tile:nth-child(2){background:linear-gradient(135deg,#00f0ff,#7b2ff7)}
.tile:nth-child(3){background:linear-gradient(135deg,#ffd23f,#ff2e97)}
.tile:nth-child(4){background:linear-gradient(135deg,#a24bff,#00f0ff)}
.tile:nth-child(5){background:linear-gradient(135deg,#ff6b6b,#ffd23f)}
.tile:nth-child(6){background:linear-gradient(135deg,#00f0ff,#ff2e97)}
.tile::after{content:"";position:absolute;inset:0;background:rgba(7,2,15,.45);transition:.4s}
.tile:hover::after{background:rgba(7,2,15,.15)}
.tile:hover{transform:scale(1.02);box-shadow:0 0 30px rgba(0,240,255,.3)}
.tile .cap{position:relative;z-index:2}
.tile .cap h4{font-family:var(--disp);font-weight:800;font-size:1.5rem;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.tile .cap span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.85);text-transform:uppercase}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:56px 0}
.stat .n{font-family:var(--disp);font-weight:900;font-size:clamp(2rem,5vw,3.4rem);color:var(--cyan);text-shadow:0 0 20px rgba(0,240,255,.5)}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:8px}

.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
.quote{border-left:2px solid var(--magenta);padding:28px 30px;background:linear-gradient(90deg,rgba(255,46,151,.06),transparent)}
.quote p{font-family:var(--body);font-size:1.2rem;color:#fff;line-height:1.6}
.quote .who{font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--cyan);margin-top:16px;text-transform:uppercase}

.cta{text-align:center;background:radial-gradient(80% 120% at 50% 0%,rgba(255,46,151,.14),transparent)}
.cta h2{font-family:var(--disp);font-weight:900;font-size:clamp(2rem,5.5vw,3.6rem);text-transform:uppercase;color:#fff;text-shadow:0 0 26px var(--magenta)}
.btn{display:inline-block;margin-top:34px;padding:18px 46px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#fff;border:2px solid var(--cyan);transition:.35s;box-shadow:0 0 18px rgba(0,240,255,.3),inset 0 0 18px rgba(0,240,255,.08)}
.btn:hover{background:var(--cyan);color:var(--bg);box-shadow:0 0 40px var(--cyan)}

.site-foot{padding:70px 40px 40px;border-top:1px solid rgba(0,240,255,.15);background:linear-gradient(180deg,transparent,rgba(162,75,255,.06))}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;max-width:1200px;margin:0 auto 44px}
.foot-brand{font-family:var(--logo);font-size:26px;background:linear-gradient(180deg,#fff,#8b7bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-brand+p{color:var(--dim);margin-top:12px;max-width:32ch}
.foot-col h5{font-family:var(--disp);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);margin-bottom:16px}
.foot-col a{display:block;color:var(--dim);font-size:.95rem;padding:5px 0;transition:.25s}
.foot-col a:hover{color:var(--cyan)}
.foot-bar{max-width:1200px;margin:0 auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.foot-bar .mag{color:var(--magenta)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(max-width:900px){.cards,.folio,.quotes{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.site-head{padding:14px 20px}.nav a{margin-left:14px}.wrap{padding:0 22px}section{padding:80px 0}.foot-bar{flex-direction:column;gap:10px}}