/* ================================================================
   FONTS
================================================================ */
@font-face {
  font-family: "C64";
  src: url("/fonts/C64_Pro-STYLE.woff2") format("woff2"),
       url("/fonts/C64_Pro-STYLE.woff") format("woff"),
       url("/fonts/C64_Pro-STYLE.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "C64Mono";
  src: url("/fonts/C64_Pro_Mono-STYLE.woff2") format("woff2"),
       url("/fonts/C64_Pro_Mono-STYLE.woff") format("woff"),
       url("/fonts/C64_Pro_Mono-STYLE.ttf") format("truetype");
  font-display: swap;
}
/* kirjoituskonefiilis kortteihin */
@font-face{
  font-family: "SpecialElite";
  src: url("/fonts/SpecialElite-Regular.ttf") format("truetype");
  font-display: swap;
}

/* ================================================================
   ROOT VARIABLES
================================================================ */
:root{
  --content: 960px;
  --pad: 12px;

  /* MUUTOS: valkoinen tausta kaikkialla */
  --bg: #ffffff;

  --ink: #1a1a1a;
  --white: #ffffff;
  --line: #e5e4ef;
  --link: #0a66c2;

  --c64-deep: #211c5a;
  --c64-violet: #6c5eb5;
  --c64-ink: #dedcf3;

  --grid-base: #ffffff;
  --grid-line: rgba(40,80,200,.12);

  --cover-h: 300px;
  --cover-zoom: 0.99;

  --profile-overlap: -70px;
  --profile-gap: 26px;

  --shine-duration: 5.2s;
  --shine-delay: .45s;

  --grid-step: 24px;
  --tw-size: 16.5px;
  --tw-track: 0.2px;
}

/* ================================================================
   GLOBAL BASE
================================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
}

a { color: var(--link); text-decoration: none; }

.c64  { font-family: "C64","Courier New",monospace; }
.mono { font-family: "C64Mono","Courier New",monospace; }

.wrap-narrow { max-width: var(--content); margin: 0 auto; padding: 0 var(--pad); }

/* ================================================================
   TOP BAR / NAV
================================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex; align-items: center; gap: 16px; height: 72px; position: relative;
}
.brand img { height: 66px; width: auto; display: block; }

.mainnav { margin-left: auto; display: flex; gap: 24px; }
.mainnav a {
  font-family: "C64","Courier New",monospace;
  color: var(--ink);
  font-weight: 800;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.mainnav a:hover { background:#fafafa; border-color: var(--line); }
.mainnav a.active { color: var(--link); }

/* hamburger (mobile) */
.menu-toggle { display: none; }
.hamburger {
  display:none; position:relative; width:40px; height:40px; cursor:pointer;
}
.hamburger span{
  position:absolute; left:8px; right:8px; height:3px; background:#333; border-radius:2px;
  transform-origin:center; transition:transform .25s ease, opacity .2s ease;
}
.hamburger span:nth-child(1){ top:12px; }
.hamburger span:nth-child(2){ top:18.5px; }
.hamburger span:nth-child(3){ top:25px; }

/* ================================================================
   ABOUT: HERO / COVER IMAGE
================================================================ */
.cover { background: transparent; }

/* MUUTOS: anna kansikuvan lohkolle väli yläpalkista */
.cover { margin-top: 28px; }
@media (min-width: 768px) { .cover { margin-top: 36px; } }

/* jos .cover tulee suoraan .topbarin jälkeen, varmistetaan rako */
.topbar + .cover { margin-top: 28px; }

.cover-inner { border-radius:10px; overflow:hidden; position:relative; }
.cover-img {
  display:block; width:100%; height:var(--cover-h);
  object-fit:cover; object-position:center top;
  transform:scale(var(--cover-zoom)); transform-origin: top center;
  border-radius:10px; image-rendering:pixelated;
  background:#2a257d; /* placeholder-väri, kuva päälle */
}

/* ================================================================
   ABOUT: PROFILE-HEAD
================================================================ */
.profile-head { display:flex; gap:16px; align-items:flex-end; margin-top:var(--profile-overlap); margin-bottom:var(--profile-gap); }
.avatar {
  width:124px; height:124px; border-radius:50%; border:4px solid var(--white);
  box-shadow:0 0 0 2px var(--line); overflow:hidden; flex-shrink:0; position:relative; z-index:3;
}
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 18%, rgba(255,255,255,.85) 48%, rgba(255,255,255,.4) 52%, transparent 82%);
  transform:translateX(-130%); animation:avatarShine var(--shine-duration) linear infinite;
  mix-blend-mode:screen; pointer-events:none;
}
@keyframes avatarShine { 0%{transform:translateX(-130%)} 100%{transform:translateX(130%)} }

.id { position:relative; }
.id h3, .id h3.c64 {
  margin:0 0 14px; font-size:20px; font-weight:700; letter-spacing:.3px; color:var(--c64-ink);
  opacity:.95; position:relative; z-index:3; margin-left:-10px;
}
.id .sub, .id .meta {
  display:block; margin:0 0 6px; font-size:15px; position:relative;
  background-image:linear-gradient(90deg, var(--c64-violet) 0 47%, var(--c64-ink) 49%, var(--c64-ink) 51%, var(--c64-violet) 53%, var(--c64-violet) 100%);
  background-size:260% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:shineText var(--shine-duration) linear infinite; animation-delay:var(--shine-delay);
}
@keyframes shineText { 0%{background-position:-60% 0} 100%{background-position:160% 0} }

/* ================================================================
   PAGE CONTENT WRAPPER
================================================================ */
.content { padding:16px var(--pad); }

/* ================================================================
   RUUTUPAPERI-KORTIT
================================================================ */
.card {
  background: var(--grid-base);
  border: 2px solid var(--c64-violet);
  border-radius: 10px;
  padding: var(--grid-step);
  margin: 0 auto 16px;

  background-image:
    repeating-linear-gradient(0deg, var(--grid-line), var(--grid-line) 1px, transparent 1px, transparent var(--grid-step)),
    repeating-linear-gradient(90deg, var(--grid-line), var(--grid-line) 1px, transparent 1px, transparent var(--grid-step));

  box-shadow: 0 0 0 4px var(--white);

  font-family: "SpecialElite","Courier New",monospace;
  font-size: var(--tw-size);
  letter-spacing: var(--tw-track);
  line-height: 1.6;
  color: var(--ink);
}
.card h2 { margin:0 0 calc(var(--grid-step)/2); font-size:20px; line-height:1.3; }
.card h2.c64 { font-size:22px; letter-spacing:1px; font-family:"C64","Courier New",monospace; }
.card p { margin:0 0 12px; }

/* ================================================================
   LISTS
================================================================ */
.list{ list-style:none; margin:0; padding:0; }
.list li{ padding:12px 0; border-top:none; line-height:var(--grid-step); }
.list li:first-child{ border-top:none; }
.title{ font-weight:700; line-height:var(--grid-step); }
.meta{ font-size:13px; color:#666; line-height:var(--grid-step); }

/* ================================================================
   MARQUEE (jos käytössä muilla sivuilla)
================================================================ */
.marquee{ background:transparent; }
.marquee-clip{
  position:relative; overflow:hidden; border-radius:8px; background:var(--c64-deep);
  border-top:2px solid var(--c64-violet); border-bottom:2px solid var(--c64-violet);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.marquee-clip::before, .marquee-clip::after{
  content:""; position:absolute; top:0; width:64px; height:100%; z-index:2; pointer-events:none;
}
.marquee-clip::before{ left:0;  background:linear-gradient(to right, var(--c64-deep), rgba(33,28,90,0)); }
.marquee-clip::after { right:0; background:linear-gradient(to left,  var(--c64-deep), rgba(33,28,90,0)); }
.marquee-inner{
  color:var(--c64-ink); white-space:nowrap; display:inline-block; padding:10px 0;
  animation:marq 16s linear infinite; will-change:transform; letter-spacing:1px; font-size:16px;
}
@keyframes marq { from { transform: translateX(100%) } to { transform: translateX(-100%) } }
.marquee-inner .ball{
  display:inline-block; width:10px; height:10px; margin:0 14px; background:var(--c64-ink);
  border-radius:50%; box-shadow:0 0 0 2px var(--c64-deep) inset;
  animation: ik-bounce .9s ease-in-out infinite; vertical-align:middle;
}
.marquee-inner .ball:nth-of-type(3n+1){ animation-delay:.15s; }
.marquee-inner .ball:nth-of-type(3n+2){ animation-delay:.35s; }
@keyframes ik-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ================================================================
   HOME: INTRO / CANVAS (jos käytössä)
================================================================ */
.intro-wrapper{ margin-top:12px; margin-bottom:24px; }
.intro-block{
  position:relative; background:var(--bg); min-height:160px; border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.intro-content{ position:relative; z-index:1; text-align:center; padding:16px; }
#sky{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
@media (max-width:600px){ .intro-block{ min-height:130px; } }

/* ================================================================
   (valinnaiset) RATTAAT
================================================================ */
.gears{ position:relative; width:120px; height:120px; max-width:40vw; max-height:40vw; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 4px rgba(255,255,255,.4)); }
.gear{ position:absolute; width:70px; height:70px; border-radius:50%; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.8) 0 30%, rgba(0,0,0,0) 31%); opacity:.85; }
.gear::before{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  background: conic-gradient(from 0deg, rgba(0,0,0,0) 0deg 10deg, rgba(0,0,0,0.85) 10deg 20deg);
  mask: radial-gradient(circle at 50% 50%, transparent 0 28px, #000 29px 999px);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 28px, #000 29px 999px);
  opacity:.9;
}
.gear-a{ width:70px; height:70px; animation:spinCW 6s linear infinite; transform-origin:center; }
.gear-b{ width:50px; height:50px; animation:spinCCW 6s linear infinite; transform-origin:center; top:-20px; left:30px; }
@keyframes spinCW{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes spinCCW{ from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@media (max-width:480px){ .gears{ width:90px; height:90px; } .gear-a{ width:60px; height:60px; } .gear-b{ width:44px; height:44px; top:-16px; left:24px; } }

/* ================================================================
   FOOTER — yhtenäinen kaikilla sivuilla
================================================================ */
.foot{
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 12px 0;
  margin-top: 24px;
}
.foot .wrap-narrow{
  font-size:12px; line-height:1.4;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color:var(--ink);
  padding:0 var(--pad);
}
.foot a{ color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; word-break:break-all; margin-left:4px; }
.foot a:hover{ color:var(--link); border-bottom-color:var(--link); }

/* ================================================================
   CONTACT PAGE SPECIALS (jos käytössä)
================================================================ */
.btn-shimmer{
  background-image:linear-gradient(90deg, var(--link) 0%, #88CCFF 50%, var(--link) 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation: shimmerText 3.5s linear infinite;
}
@keyframes shimmerText{ 0%{background-position:-100% 0} 100%{background-position:100% 0} }

.contact-title{
  font-family:"C64","Courier New",monospace; font-weight:700; font-size:1.5rem; text-align:left; margin:0 0 24px 0; color:var(--ink); position:relative; z-index:2; animation:ufoFlash 9s ease-in-out infinite;
}
@keyframes ufoFlash{
  0%,100%{ text-shadow:none; }
  45%{ text-shadow:0 0 6px rgba(140,200,255,0.3), 0 0 12px rgba(140,200,255,0.15); }
  50%{ text-shadow:0 0 10px rgba(140,200,255,0.5), 0 0 20px rgba(140,200,255,0.25); }
  55%{ text-shadow:0 0 6px rgba(140,200,255,0.3), 0 0 12px rgba(140,200,255,0.15); }
}
.h-captcha{ display:flex; justify-content:center; align-items:center; width:100%; box-sizing:border-box; margin:0 auto 8px auto; max-width:100%; }
.h-captcha iframe{
  width:100%!important; max-width:304px!important; transform:scale(0.9); transform-origin:center;
  display:block!important; margin:0 auto!important; position:static!important;
}
@supports (-webkit-touch-callout:none){ .h-captcha iframe{ transform:scale(0.85); } }
nav iframe{ display:none!important; }

/* ================================================================
   RESPONSIVE BREAKPOINTS
================================================================ */
@media (max-width:900px){
  :root{ --content:94vw; --cover-h:190px; --profile-overlap:-48px; --profile-gap:18px; }

  .hamburger{ display:block; margin-left:auto; }
  .mainnav{
    position:absolute; right:var(--pad); top:72px; display:none; flex-direction:column; gap:0;
    background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08);
    overflow:hidden; min-width:180px;
  }
  .mainnav a{ padding:12px 14px; border-radius:0; font-size:14px; }
  .mainnav a + a { border-top:1px solid var(--line); }

  .menu-toggle:checked ~ .hamburger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .menu-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
  .menu-toggle:checked ~ .hamburger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .menu-toggle:checked ~ .mainnav{ display:flex; }

  .cover-img{ transform:none; }
  .avatar{ width:100px; height:100px; margin-top:-6px; }
  .id h3{ font-size:16px; opacity:.95; letter-spacing:.35px; }
  .profile-head .id{ margin-top:12px; }
  .brand img{ height:38px; }
}

/* ================================================================
   ACCESSIBILITY
================================================================ */
@media (prefers-reduced-motion:reduce){
  .marquee-inner .ball{ animation:none; }
  .gear-a, .gear-b{ animation:none; }
  .wave-ch{ animation:none; }
  .avatar::after{ animation:none; }
}