/* ============================================================
   GEKKOS Projekte
   Mockup-Karten (#work auf der Startseite) + Portfolio-Seite /projekte.
   Baut strikt auf den Tokens aus styles.css. Dark-Theme, #ff4a1c Akzent.
   Wiederverwendet die Tilt-/Glow-Mechanik der alten Work-Tiles
   (perspective am Grid, --mx/--my Spotlight via [data-tilt] in main.js).
   ============================================================ */

/* ---- gemeinsame Buttons (dark-tauglich) ---- */
.btn-solid{
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--accent);color:var(--dark);border:none;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--btn-fs);letter-spacing:var(--track-label);text-transform:uppercase;
  border-radius:var(--r-pill);padding:var(--btn-pad);
  transition:background-color .3s var(--ease);
}
.btn-solid:hover{background:var(--accent-hover)}
.btn-solid:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-solid .arr{transition:transform .4s var(--ease)}
.btn-solid:hover .arr{transform:translate(3px,-3px)}
/* .lbl auf den Projekt-Buttons traegt den magnetischen Transform (wie .btn-mag),
   inline-flex + gap erhaelt den Abstand zwischen Text und Pfeil. */
.btn-solid .lbl,.btn-line .lbl,.pfolio-lb-close .lbl{will-change:transform;display:inline-flex;align-items:center;gap:.7em}
.btn-line{
  display:inline-flex;align-items:center;gap:.7em;
  background:none;color:var(--paper-on-dark);cursor:pointer;
  font-family:var(--font-mono);font-size:var(--btn-fs);letter-spacing:var(--track-label);text-transform:uppercase;
  border:1.5px solid var(--line-on-dark);border-radius:var(--r-pill);padding:var(--btn-pad);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-line:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================
   Startseiten-Modul: Mockup-Karten (#work)
   ============================================================ */
.pcards{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(30px,4vw,72px);
  margin-top:clamp(30px,4vw,60px);
  perspective:1600px;
}
.pcards .pcard:nth-child(even){margin-top:clamp(0px,6vw,90px)}
@media (max-width:820px){
  .pcards{grid-template-columns:1fr;gap:34px}
  .pcards .pcard:nth-child(even){margin-top:0}
}

.pcard{
  display:block;position:relative;color:inherit;
  transform-style:preserve-3d;will-change:transform;
  transition:transform .6s var(--ease);
  --mx:50%;--my:50%;
}
.pcard-glow{
  position:absolute;inset:-6% -4% 12%;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 24%,transparent),transparent 62%);
  filter:blur(8px);
}
@media (hover:hover){.pcard:hover .pcard-glow{opacity:1}}
/* KEIN translateZ: die perspective vergroesserte den Inhalt um 2,56%, und ob
   das griff, haing davon ab ob GSAP der Karte gerade eine 3D- oder 2D-Transform
   gab (Wechsel beim Reveal = ruckartiger Groessensprung). Ohne translateZ ist
   die Groesse in jedem Zustand gleich, der Tilt funktioniert weiter. */
.pcard-inner{position:relative;z-index:1}
.pcard-shot{position:relative;overflow:visible}
/* kein Hover-Scale auf dem Bild: das aenderte die Groesse und sprang beim
   Erscheinen/Scroll-Stopp. Hover-Feedback kommt vom Tilt, Glow und Titel. */
.pcard-shot img{display:block;width:100%;height:auto;aspect-ratio:1560/1120}

.pcard-body{padding:clamp(6px,1vw,14px) 4px 0}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pcard-cat{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soft-on-dark);
}
.pcard-dot{
  width:auto;height:1.05em;aspect-ratio:502/559;flex:none;background:var(--accent);
  -webkit-mask:url('../assets/gecko_schwarz.svg') center/contain no-repeat;
          mask:url('../assets/gecko_schwarz.svg') center/contain no-repeat;
}
.pcard-no{font-family:var(--font-mono);font-size:12px;color:var(--soft-on-dark)}
.pcard-title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(24px,2.3vw,38px);line-height:1.02;letter-spacing:-.025em;
  text-transform:lowercase;color:var(--paper-on-dark);transition:color .3s var(--ease);
}
@media (hover:hover){.pcard:hover .pcard-title{color:var(--accent)}}
.pcard-desc{
  margin-top:10px;max-width:46ch;
  font-size:clamp(13.5px,1vw,15px);line-height:1.55;color:var(--soft-on-dark);
}

.work-foot{display:flex;justify-content:center;margin-top:clamp(46px,6vw,96px)}
/* btn-mag ist schwarz (fuer helle/orange Flaechen). Im dunklen #work-Block
   auf Akzent umstellen, damit der Button sichtbar bleibt. Animation (magnetisch
   + Pfeil) kommt unveraendert von .btn-mag / [data-magnetic]. */
.work-foot .btn-mag{background:var(--accent);color:var(--dark)}

/* ============================================================
   Portfolio-Seite /projekte (body.theme-dark)
   ============================================================ */
.pfolio-hero{
  min-height:66svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(140px,18vh,220px);padding-bottom:clamp(30px,5vw,70px);
  position:relative;isolation:isolate;overflow:hidden;
}
.pfolio-hero-gecko{
  top:clamp(120px,16vh,210px);right:calc(-1 * clamp(20px,4vw,60px));
  width:clamp(240px,30vw,480px);opacity:.06;transform:rotate(-15deg);
  background:var(--paper-on-dark);
}
.pfolio-hero .eyebrow{color:var(--soft-on-dark);margin-bottom:clamp(20px,3vw,34px)}
.pfolio-h1{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-display-2);line-height:.96;letter-spacing:-.04em;
  text-transform:lowercase;max-width:16ch;color:var(--paper-on-dark);
}
.pfolio-h1 span[data-split],.pfolio-h1 em[data-split]{display:block}
.pfolio-h1 em{font-style:normal;color:var(--accent)}
.pfolio-sub{
  max-width:56ch;color:var(--soft-on-dark);
  font-size:var(--fs-body-lg);line-height:1.55;margin-top:clamp(22px,3vw,36px);
}
.pfolio-note{
  max-width:58ch;margin-top:clamp(22px,2.6vw,32px);
  padding:clamp(12px,1.4vw,16px) clamp(16px,1.8vw,20px);
  border-left:2px solid var(--accent);border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  font-size:clamp(13.5px,1vw,15px);line-height:1.55;color:var(--soft-on-dark);
}
.pfolio-note strong{color:var(--paper-on-dark);font-weight:500}

.pfolio-list{
  display:flex;flex-direction:column;gap:clamp(64px,10vw,160px);
  padding-block:clamp(50px,7vw,110px);
}
.pfolio-item{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;gap:clamp(30px,5vw,84px);
  scroll-margin-top:100px;
}
.pfolio-item:nth-child(even) .pfolio-visual{order:2}
@media (max-width:900px){
  .pfolio-item{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .pfolio-item:nth-child(even) .pfolio-visual{order:0}
}

.pfolio-visual{position:relative;perspective:1600px}
.pfolio-shot{
  display:block;width:100%;position:relative;cursor:zoom-in;background:none;border:none;padding:0;
  transition:transform .6s var(--ease);--mx:50%;--my:50%;
}
.pfolio-glow{
  position:absolute;inset:-8% -6% 10%;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(500px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%);
  filter:blur(10px);
}
@media (hover:hover){.pfolio-shot:hover .pfolio-glow{opacity:1}}
.pfolio-shot img{display:block;width:100%;height:auto;aspect-ratio:1560/1120;position:relative;z-index:1}
.pfolio-shot:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}

.pfolio-info{max-width:44ch}
.pfolio-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft-on-dark);margin-bottom:16px;
}
.pfolio-cat{color:var(--accent)}
.pfolio-meta .sep{opacity:.5}
.pfolio-title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(34px,4vw,66px);line-height:1;letter-spacing:-.03em;
  text-transform:lowercase;color:var(--paper-on-dark);
}
.pfolio-tags{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(16px,2vw,24px);list-style:none;
}
.pfolio-tags li{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-on-dark);border-radius:var(--r-pill);padding:.45em .9em;color:var(--soft-on-dark);
}
.pfolio-label{
  margin-top:clamp(22px,3vw,34px);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}
.pfolio-story{
  margin-top:12px;font-size:clamp(15px,1.15vw,17.5px);line-height:1.6;color:var(--paper-on-dark);opacity:.92;
}
.pfolio-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px)}

/* ---- CTA am Seitenende ---- */
.pfolio-cta{
  text-align:center;padding:clamp(70px,11vw,150px) var(--pad);
  position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--line-on-dark);
}
.pfolio-cta .small{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soft-on-dark);margin-bottom:clamp(18px,2vw,26px);
}
.pfolio-cta h2{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-h2-cta);line-height:.98;letter-spacing:-.035em;text-transform:lowercase;
  color:var(--paper-on-dark);max-width:16ch;margin-inline:auto;
}
.pfolio-cta .btn-solid{margin-top:clamp(30px,4vw,50px)}

/* ---- Lightbox (Flat-Screenshot) ---- */
.pfolio-lb{
  position:fixed;inset:0;z-index:500;display:flex;align-items:flex-start;justify-content:center;
  background:color-mix(in srgb,var(--dark) 90%,transparent);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  padding:clamp(50px,7vw,90px) var(--pad) 40px;overflow-y:auto;overscroll-behavior:contain;
}
.pfolio-lb.open{opacity:1;visibility:visible}
.pfolio-lb-inner{position:relative;max-width:1100px;width:100%}
.pfolio-lb img{
  display:block;width:100%;height:auto;border-radius:var(--r-card);
  box-shadow:0 40px 100px rgba(0,0,0,.6);transform:translateY(14px);transition:transform .4s var(--ease);
}
.pfolio-lb.open .pfolio-lb-inner img{transform:translateY(0)}
.pfolio-lb-close{
  position:fixed;top:clamp(16px,2.5vw,30px);right:var(--pad);z-index:2;
  background:none;border:none;color:var(--paper-on-dark);cursor:pointer;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
}
.pfolio-lb-close:hover{color:var(--accent)}

/* ---- Hover-Glow/Titel beim Scrollen aussetzen ----
   Ohne das flackern Glow und Titel, wenn Karten unter dem stehenden Cursor
   durchscrollen (jede loest kurz :hover aus). main.js setzt is-scrolling
   waehrend des Scrollens; danach greift echter Hover wieder normal. */
html.is-scrolling .pcard-glow,
html.is-scrolling .pcard-title,
html.is-scrolling .pfolio-glow{transition:none}
html.is-scrolling .pcard:hover .pcard-glow,
html.is-scrolling .pfolio-shot:hover .pfolio-glow{opacity:0}
html.is-scrolling .pcard:hover .pcard-title{color:var(--paper-on-dark)}

.pfolio-cta-gecko{
  background:var(--paper-on-dark);opacity:.05;
  right:calc(-1 * clamp(20px,4vw,70px));bottom:-10%;
  width:clamp(240px,28vw,480px);transform:rotate(-12deg);
}

/* CTA Sekundaerlink */
.pfolio-cta-sec{margin-top:clamp(18px,2.5vw,26px)}
.pfolio-cta-sec a{font:500 13px/1 var(--font-mono);letter-spacing:.08em;color:var(--soft-on-dark);text-decoration:none;border-bottom:1px solid var(--line-on-dark);padding-bottom:4px;transition:color .3s}
.pfolio-cta-sec a:hover{color:var(--paper-on-dark)}
.pfolio-cta-sec a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}