/* YngwieRig site - shared base for the three mockups: tokens, the aurora sky,
   the hero title card, the room window, and the "gear" primitives every
   mockup builds its sections from (enclosures, plates, knobs, LEDs, jacks). */

:root{
  --bg:#07070b; --bg2:#0e0e14; --panel:#14131b; --line:#24222d; --line2:#37343f;
  --ink:#f3efe7; --ink2:#b8b2a6; --ink3:#7d7870;
  --mint:#5cf0c0; --ice:#8fdcff; --violet:#9d7dff; --rose:#ff73bf;
  --acc:var(--mint); --acc2:var(--ice);
  --chrome-a:#ffffff; --chrome-b:#c8d0da; --chrome-c:#6f7b8a; --chrome-d:#2a3038;
  --poster:"Anton",Impact,"Arial Narrow",sans-serif;
  --display:"Sora","Manrope",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  --mono:"JetBrains Mono",Consolas,monospace;
  --r:18px; --maxw:1180px; --hit:.55;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:#fff;color:#0a0a0f}
button{font-family:inherit}

/* grain over everything, very quiet */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

/* ---------- the sky: aurora, page top down onto the window ---------------- */
.sky{position:absolute;left:0;top:0;width:100%;height:900px;z-index:0;pointer-events:none;overflow:hidden}
.sky canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}

/* ---------- layout + type ------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--acc)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;margin:0;text-wrap:balance}
h2{font-size:clamp(24px,2.6vw,32px);line-height:1.1;margin:10px 0 12px}
h3{font-size:17px;line-height:1.25}
.lead{font-size:16px;color:var(--ink2);max-width:56ch;margin:0}
.muted{color:var(--ink3)}
.mono{font-family:var(--mono)}

/* chrome lettering */
.chrome{background:linear-gradient(180deg,var(--chrome-a) 0%,var(--chrome-b) 38%,var(--chrome-c) 50%,var(--chrome-a) 52%,var(--chrome-b) 70%,var(--chrome-d) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;position:relative;
  filter:drop-shadow(0 2px 0 #0b0d10) drop-shadow(0 4px 0 #000) drop-shadow(0 0 1px rgba(255,115,191,.55)) drop-shadow(0 10px 30px color-mix(in srgb,var(--acc) 30%,transparent))}
.chrome-wrap{position:relative;display:inline-block}
.chrome-wrap .sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:250% 100%;background-position:200% 0;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,60%{background-position:200% 0}90%,100%{background-position:-50% 0}}

/* buttons */
.btn{background:transparent;display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:13px 22px;border-radius:999px;border:1px solid transparent;transition:transform .15s ease,box-shadow .2s ease,background .2s;cursor:pointer;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:#fff;color:#0a0a0f;box-shadow:0 10px 30px rgba(255,255,255,.10)}
.btn-primary:hover{box-shadow:0 0 0 5px rgba(255,255,255,.12),0 14px 36px color-mix(in srgb,var(--acc) 35%,transparent)}
.btn-ghost{border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink2);background:rgba(255,255,255,.04)}
.btn-sm{padding:10px 16px;font-size:12px}
.btn .arrow{transition:transform .2s}.btn:hover .arrow{transform:translateX(4px)}

/* ---------- hero: the title card, the window under it ----------------------- */
.hero{padding:110px 0 0;position:relative}
.hero .copy{position:relative;z-index:2;max-width:980px;margin:0 auto;text-align:center}
.hero .copy>*{animation:rise 1.3s cubic-bezier(.2,.7,.2,1) both}
.hero .copy>:nth-child(1){animation-delay:.25s}.hero .copy>:nth-child(2){animation-delay:.4s}.hero .copy>:nth-child(3){animation-delay:.7s}.hero .copy>:nth-child(4){animation-delay:.85s}.hero .copy>:nth-child(5){animation-delay:1s}
@keyframes rise{from{opacity:.3;transform:translateY(26px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero .eyebrow{justify-content:center}
.hero .eyebrow::after{content:"";width:18px;height:2px;background:var(--acc)}
.title{font-family:var(--poster);font-weight:400;font-size:clamp(38px,6vw,84px);line-height:.96;letter-spacing:.02em;margin:20px 0 22px}
.title .line{display:block}
.title .line.big{font-size:1.12em}
.hero .lead{margin:0 auto 22px;max-width:52ch;font-size:17px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.hero .fine{font-size:14px;color:var(--ink3);line-height:1.7}
.hero .fine b{color:var(--ink2);font-weight:600}
.demorow{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink2);margin:56px 0 12px}
.demorow .l{display:flex;align-items:center;gap:8px}
.demorow .l::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.demorow .l span{color:var(--ink3)}
.demorow .r{display:flex;gap:6px}
.demorow button{font-size:13px;color:var(--ink2);background:transparent;border:0;padding:6px 10px;border-radius:8px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.demorow button:hover{color:#fff;background:rgba(255,255,255,.06)}
.demo{position:relative;z-index:2;border-radius:14px 14px 0 0;background:var(--panel);border:1px solid rgba(255,255,255,.12);border-bottom:0;overflow:hidden;
  box-shadow:0 -1px 0 color-mix(in srgb,var(--acc) 50%,transparent),0 -30px 140px -20px color-mix(in srgb,var(--acc) 35%,transparent),0 40px 100px rgba(0,0,0,.7)}
.demo::before{content:"";position:absolute;left:0;right:0;top:0;height:160px;z-index:3;pointer-events:none;mix-blend-mode:screen;animation:breathe 5s ease-in-out infinite alternate;
  background:radial-gradient(45% 100% at 50% 0%,color-mix(in srgb,var(--acc) 50%,transparent),transparent 70%)}
@keyframes breathe{from{opacity:.45}to{opacity:.8}}
.demo:fullscreen{border-radius:0;border:0}
.demo:fullscreen .stage{height:calc(100vh - 42px);aspect-ratio:auto}
.demo .bar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink3);background:#0f0f15}
.demo .bar .ico{width:14px;height:14px;border-radius:3px;background:linear-gradient(135deg,#fff,#9a9aa6);margin-right:4px}
.demo .bar .wt{color:var(--ink);font-weight:700}
.demo .bar .win{display:flex;margin-left:8px}
.demo .bar .win i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink2);width:38px;line-height:28px;text-align:center;cursor:default}
.demo .bar .win i:hover{background:rgba(255,255,255,.08)}.demo .bar .win i:last-child:hover{background:#c42b1c;color:#fff}
.demo .bar .right{margin-left:auto;display:flex;gap:8px}
.demo .bar button{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:transparent;border:1px solid var(--line2);color:var(--ink2);padding:5px 10px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.demo .bar button:hover{border-color:#fff;color:#fff}
.stage{position:relative;aspect-ratio:1900/1050;background:#000}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.stage img.on{opacity:1}
.hot{position:absolute;border:0;background:transparent;cursor:pointer;padding:0;border-radius:8px;outline:none}
.hot::after{content:"";position:absolute;inset:0;border-radius:8px;border:1.5px solid transparent;transition:border-color .2s,box-shadow .2s}
.hot:hover::after,.hot:focus-visible::after{border-color:rgba(255,255,255,.85);box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 24px rgba(255,255,255,.25)}
.hot .tag{position:absolute;left:50%;top:-30px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#0a0a0f;background:#fff;padding:4px 8px;border-radius:5px;opacity:0;transition:opacity .2s,transform .2s;white-space:nowrap;pointer-events:none}
.hot:hover .tag{opacity:1;transform:translate(-50%,-4px)}
.stage.zoomed .hot{display:none}
.caption{position:absolute;left:14px;bottom:14px;right:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;opacity:0;transform:translateY(8px);transition:opacity .35s .2s,transform .35s .2s;pointer-events:none}
.stage.zoomed .caption{opacity:1;transform:none;pointer-events:auto}
.caption .card{background:rgba(10,10,15,.82);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;max-width:420px}
.caption h4{margin:0 0 4px;font-family:var(--display);font-weight:800;font-size:16px}
.caption p{margin:0;font-size:13px;color:var(--ink2)}
.caption .back{pointer-events:auto}
.hint{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);background:rgba(10,10,15,.7);padding:6px 10px;border-radius:6px;border:1px solid var(--line2);transition:opacity .3s}
.stage.zoomed .hint{opacity:0}

/* ---------- gear primitives ---------------------------------------------- */
.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1d2a26;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);transition:all .3s}
.led.on{background:var(--acc);box-shadow:0 0 8px var(--acc),0 0 18px color-mix(in srgb,var(--acc) 60%,transparent)}
.led.red{background:#3a1a10}.led.red.on{background:#ff3b1f;box-shadow:0 0 8px #ff3b1f,0 0 18px rgba(255,59,31,.6)}
.jewel{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#5a1a12,#2a0a06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.1);transition:all .4s}
.jewel.on{background:radial-gradient(circle at 40% 35%,#ffb4a0,#ff3b1f 50%,#8a1200);box-shadow:0 0 10px #ff3b1f,0 0 26px rgba(255,59,31,.55)}
.screw{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9aa0aa,#3a3d45 60%,#1a1c22);box-shadow:0 1px 2px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.5)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1.5px;background:#0c0d10;transform:translateY(-50%) rotate(var(--sr,25deg))}
.screws>.screw:nth-child(1){left:12px;top:12px}.screws>.screw:nth-child(2){right:12px;top:12px;--sr:-40deg}
.screws>.screw:nth-child(3){left:12px;bottom:12px;--sr:70deg}.screws>.screw:nth-child(4){right:12px;bottom:12px;--sr:10deg}
.plate{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:5px;color:#141820;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;white-space:nowrap;
  background:linear-gradient(180deg,#e9edf2,#aeb6c2 45%,#7e8794 55%,#c9d0d9);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 2px 6px rgba(0,0,0,.6);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.plate.dark{background:linear-gradient(180deg,#2a2c33,#15161b);color:var(--ink2);text-shadow:none;border:1px solid rgba(255,255,255,.08)}
.knob{--rot:-60deg;position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#4a4d56,#1c1e24 65%,#0b0c10);
  box-shadow:0 4px 10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.15),0 0 0 3px #101116,0 0 0 4px rgba(255,255,255,.08)}
.knob::after{content:"";position:absolute;left:50%;top:4px;width:2px;height:14px;margin-left:-1px;background:#fff;border-radius:2px;transform-origin:50% 18px;transform:rotate(var(--rot));box-shadow:0 0 6px var(--acc);transition:transform .15s linear}
.knob.sm{width:30px;height:30px}.knob.sm::after{height:10px;transform-origin:50% 12px;top:3px}
.knob.chicken::after{width:5px;height:20px;margin-left:-2.5px;top:2px;border-radius:3px 3px 1px 1px;background:linear-gradient(#f3f3f3,#8a8f98);transform-origin:50% 20px}
.kn{display:flex;flex-direction:column;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.kns{display:flex;gap:18px;align-items:flex-end}
.fsw{width:38px;height:38px;border-radius:50%;border:0;padding:0;cursor:pointer;background:radial-gradient(circle at 40% 30%,#b9bec7,#5b6069 55%,#2a2d33);
  box-shadow:0 3px 0 #0b0c10,0 8px 16px rgba(0,0,0,.7),inset 0 0 0 4px #2f3239,inset 0 0 0 5px rgba(255,255,255,.15);transition:transform .1s,box-shadow .1s}
.fsw:active{transform:translateY(2px);box-shadow:0 1px 0 #0b0c10,0 4px 10px rgba(0,0,0,.7),inset 0 0 0 4px #2f3239,inset 0 0 0 5px rgba(255,255,255,.15)}
.fsw.sm{width:26px;height:26px;box-shadow:0 2px 0 #0b0c10,0 5px 10px rgba(0,0,0,.7),inset 0 0 0 3px #2f3239,inset 0 0 0 4px rgba(255,255,255,.15)}
.toggle{display:inline-block;width:14px;height:26px;border-radius:7px;background:linear-gradient(#2a2d33,#111);border:1px solid rgba(255,255,255,.1);position:relative}
.toggle::after{content:"";position:absolute;left:3px;right:3px;top:3px;height:9px;border-radius:4px;background:linear-gradient(#d8dbe0,#8a8f98)}
.toggle.dn::after{top:auto;bottom:3px}
.jack{position:absolute;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#000 0 30%,#4a4e57 32%,#1a1c22 60%,#3a3d45);box-shadow:0 0 0 2px #0b0c10,0 0 0 3px rgba(255,255,255,.1)}
.jack.top{top:-9px}.jack.bot{bottom:-9px}
.grille{background-color:#0b0b0f;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1.5px,transparent 1.5px 7px),repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1.5px,transparent 1.5px 7px)}
.tolex{background-color:#0f0f14;background-image:radial-gradient(rgba(255,255,255,.045) 12%,transparent 13%),radial-gradient(rgba(0,0,0,.4) 12%,transparent 13%);background-size:6px 6px;background-position:0 0,3px 3px}
.brushed{background:linear-gradient(180deg,#3b3f47,#23262c 50%,#2e3138);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(180deg,#3b3f47,#23262c 50%,#2e3138)}
.enclosure{position:relative;border-radius:22px;background:linear-gradient(180deg,#1b1b22,#0f0f14);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.6)}
.enclosure::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 80% at 50% -20%,rgba(255,255,255,.06),transparent 50%)}

/* ---------- footer + reveal ----------------------------------------------- */
footer{border-top:1px solid var(--line);padding:40px 0 60px;color:var(--ink3);font-size:13px;position:relative;z-index:1}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.wordmark{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:#fff;display:inline-flex;align-items:center;gap:9px}
.wordmark i{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#fff,#9a9aa6);display:inline-block}
.rv{transform:translateY(16px);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{transform:none}.hero .copy>*{opacity:1;filter:none;transform:none}}