/* ==========================================================================
   projects.css
   Två delar:
     1. Projektkarusellen på startsidan.
     2. Projektsidornas färgidentitet och sidspecifika sektioner.
   ========================================================================== */

/* ==========================================================================
   DEL 1 — PROJEKTKARUSELLEN
   ========================================================================== */
.projects-section {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  /* Korten vid sidan och ljuseffekterna sticker ut utanför sektionen.
     Utan detta skulle sidan gå att scrolla i sidled. */
  overflow: hidden;
  padding: 96px var(--page-padding) 60px;
  background: linear-gradient(
    180deg,
    oklch(0.11 0.02 258) 0%,
    oklch(0.145 0.022 258) 14%,
    oklch(0.145 0.022 258) 86%,
    oklch(0.12 0.02 258) 100%
  );
}

/* -------- Bakgrundsdekor bakom karusellen -------- */
.projects-section__backdrop {
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, oklch(0.19 0.03 220 / 0.5) 0%, transparent 65%),
    linear-gradient(
      180deg,
      oklch(0.1 0.02 258) 0%,
      oklch(0.13 0.026 235) 30%,
      oklch(0.135 0.026 235) 70%,
      oklch(0.1 0.02 258) 100%
    );
}

/* Svagt rutnät som tonar ut mot kanterna. */
.projects-section__grid {
  background:
    repeating-linear-gradient(0deg, oklch(0.55 0.05 195 / 0.045) 0px, transparent 1px, transparent 58px),
    repeating-linear-gradient(90deg, oklch(0.55 0.05 195 / 0.04) 0px, transparent 1px, transparent 58px);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 0%, transparent 78%);
}

/* Två långsamt roterande cirklar. */
.projects-section__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.projects-section__orbit--outer {
  width: min(64vw, 760px);
  height: min(64vw, 760px);
  border: 1px solid oklch(0.72 0.15 190 / 0.12);
  animation: orbitSpin 90s linear infinite;
}

.projects-section__orbit--inner {
  width: min(46vw, 540px);
  height: min(46vw, 540px);
  border: 1px solid oklch(0.78 0.19 152 / 0.1);
  animation: orbitSpinRev 70s linear infinite;
}

.projects-section__glow--top {
  top: -120px;
  left: 0;
  right: 0;
  height: 240px;
  border-radius: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, oklch(0.72 0.2 152 / 0.12) 0%, transparent 75%);
}

.projects-section__glow--green {
  top: 8%;
  right: 6%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, oklch(0.72 0.2 152 / 0.09) 0%, transparent 70%);
  animation: glowBreathe 8s ease-in-out infinite;
}

.projects-section__glow--warm {
  bottom: 6%;
  left: 4%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, oklch(0.76 0.14 55 / 0.07) 0%, transparent 70%);
  animation: glowBreathe 9s ease-in-out infinite reverse;
}

.projects-section__glow--purple {
  top: 30%;
  left: 14%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, oklch(0.68 0.14 302 / 0.06) 0%, transparent 70%);
  animation: glowBreathe 7s ease-in-out infinite;
}

.projects-section__glow--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 900px);
  height: min(60vh, 480px);
  background: radial-gradient(ellipse, oklch(0.75 0.15 195 / 0.09) 0%, transparent 70%);
  animation: glowBreathe 10s ease-in-out infinite;
}

.projects-section__header {
  text-align: center;
  margin-bottom: clamp(28px, 5vh, 60px);
  position: relative;
  z-index: 2;
}

.projects-section__kicker {
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.projects-section__title {
  font-size: clamp(26px, 3.6vw, 42px);
}

/* -------- Scenen som korten ligger på -------- */
.project-carousel {
  position: relative;
  height: clamp(420px, 52svh, 540px);
  flex-shrink: 0;
  perspective: 1800px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

/* -------- Ett projektkort --------
   JavaScript sätter data-offset på varje kort:
     0  = kortet i mitten
     1  = ett steg till höger,  -1 = ett steg till vänster
     2  = två steg till höger, -2 = två steg till vänster
   CSS bestämmer sedan hur varje position ska se ut. */
.project-card {
  position: absolute;
  width: 400px;
  max-width: 400px;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.65s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.65s ease;
}

.project-card[data-offset='0']  { transform: translateX(0)      scale(1)    rotateY(0deg);   opacity: 1;    z-index: 5; cursor: default; }
.project-card[data-offset='1']  { transform: translateX(360px)  scale(0.82) rotateY(-14deg); opacity: 0.5;  z-index: 4; }
.project-card[data-offset='-1'] { transform: translateX(-360px) scale(0.82) rotateY(14deg);  opacity: 0.5;  z-index: 4; }
.project-card[data-offset='2']  { transform: translateX(600px)  scale(0.64) rotateY(-22deg); opacity: 0.16; z-index: 3; }
.project-card[data-offset='-2'] { transform: translateX(-600px) scale(0.64) rotateY(22deg);  opacity: 0.16; z-index: 3; }

/* Kort som inte syns ska inte heller gå att nå med tangentbord eller mus. */
.project-card[aria-hidden='true'] {
  pointer-events: none;
}

/* Den mjuka upp- och nedrörelsen. Ligger i ett eget lager så att den inte
   krockar med kortets transform ovan. */
.project-card__float {
  height: 100%;
  animation: floatCard 5.5s ease-in-out infinite;
}

.project-card:nth-child(2) .project-card__float { animation-duration: 6.1s; animation-delay: 0.35s; }
.project-card:nth-child(3) .project-card__float { animation-duration: 6.7s; animation-delay: 0.7s; }
.project-card:nth-child(4) .project-card__float { animation-duration: 5.5s; animation-delay: 1.05s; }
.project-card:nth-child(5) .project-card__float { animation-duration: 6.1s; animation-delay: 1.4s; }

/* Själva glaskortet. */
.project-card__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(165deg, oklch(0.21 0.026 258 / 0.38), oklch(0.12 0.018 258 / 0.5));
  backdrop-filter: blur(12px) saturate(115%);
  border: 1px solid oklch(0.4 0.02 258 / 0.2);
  box-shadow: var(--shadow-card);
}

/* Kortet i mitten lyfts fram med starkare glas, ram och glow. */
.project-card[data-offset='0'] .project-card__inner {
  background: linear-gradient(165deg, oklch(0.29 0.04 210 / 0.48), oklch(0.12 0.02 258 / 0.7));
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid oklch(0.75 0.12 190 / 0.4);
  box-shadow:
    0 0 0 1px oklch(0.78 0.19 152 / 0.2) inset,
    0 0 90px -8px oklch(0.75 0.15 195 / 0.35),
    0 55px 120px -25px oklch(0.03 0.02 258 / 0.92),
    0 -30px 80px -35px oklch(0.75 0.15 195 / 0.4) inset;
}

.project-card__media {
  width: 100%;
  height: 190px;
  flex-shrink: 0;
  position: relative;
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mörk toning i nederkanten av bilden. */
.project-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, oklch(0.14 0.02 258 / 0.8) 100%);
  pointer-events: none;
}

.project-card__content {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Kategorin färgas med projektets egen accentfärg. */
.project-card__category {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--accent);
}

.project-card--omnira          { --accent: oklch(0.78 0.19 152); }
.project-card--familje-stunden { --accent: oklch(0.76 0.14 55); }
.project-card--gainpilot       { --accent: oklch(0.68 0.19 30); }
.project-card--studieos        { --accent: oklch(0.64 0.16 258); }
.project-card--the-prompt      { --accent: oklch(0.72 0.13 220); }

.project-card__name {
  font-size: 23px;
  margin-bottom: 11px;
  flex-shrink: 0;
}

/* Beskrivningen begränsas till två rader, precis som i designen. */
.project-card__description {
  font-size: 13.5px;
  line-height: 1.6;
  color: oklch(0.7 0.022 235);
  margin-bottom: 16px;
  flex: 1;
  min-height: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.project-card__tags .tag {
  font-size: 11px;
  padding: 5px 11px;
  border-color: var(--border);
  color: oklch(0.7 0.022 235);
}

.project-card__cta {
  align-self: flex-start;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid oklch(0.65 0.06 190 / 0.4);
  color: oklch(0.93 0.012 75);
  font-size: 13px;
  font-family: var(--font-body);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.3px;
}

/* -------- Kontroller under karusellen -------- */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: clamp(20px, 4vh, 44px);
  position: relative;
  z-index: 2;
}

.carousel-dots {
  display: flex;
  gap: 9px;
}

.carousel-dots__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: oklch(0.4 0.02 258 / 0.6);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.carousel-dots__dot[aria-current='true'] {
  width: 22px;
  background: var(--accent);
}

/* ==========================================================================
   DEL 2 — PROJEKTSIDORNAS FÄRGIDENTITET
   Varje projekt har sin egen accentfärg. Genom att sätta variablerna här
   följer alla komponenter automatiskt med — ingen dubblerad CSS behövs.

   --hero-accent / --hero-accent-2 = de LÅSTA hero-färgerna från designen
   --accent                        = färgen sektionsetiketter använder
   --accent-2                      = projektets sekundära färg
   ========================================================================== */
.project-page--omnira {
  --hero-accent: oklch(0.78 0.19 152);
  --hero-accent-2: oklch(0.72 0.06 235);
  --accent: oklch(0.78 0.19 152);
  --accent-2: oklch(0.65 0.06 235);
  --accent-frame: oklch(0.2 0.03 220 / 0.4);
}

.project-page--familje-stunden {
  --hero-accent: oklch(0.76 0.14 55);
  --hero-accent-2: oklch(0.74 0.1 20);
  --accent: oklch(0.8 0.13 55);
  --accent-2: oklch(0.65 0.09 220);
  --accent-frame: oklch(0.25 0.03 40 / 0.35);
}

.project-page--gainpilot {
  --hero-accent: oklch(0.68 0.19 30);
  --hero-accent-2: oklch(0.72 0.17 55);
  --accent: oklch(0.72 0.19 35);
  --accent-2: oklch(0.6 0.12 40);
  --accent-frame: oklch(0.2 0.05 30 / 0.35);
}

.project-page--studieos {
  --hero-accent: oklch(0.64 0.16 258);
  --hero-accent-2: oklch(0.7 0.11 292);
  --accent: oklch(0.7 0.14 258);
  --accent-2: oklch(0.75 0.1 292);
  --accent-frame: oklch(0.2 0.05 258 / 0.35);
}

.project-page--the-prompt {
  --hero-accent: oklch(0.72 0.13 220);
  --hero-accent-2: oklch(0.62 0.2 300);
  --accent: oklch(0.72 0.13 220);
  --accent-2: oklch(0.62 0.2 300);
  --accent-frame: oklch(0.2 0.05 260 / 0.4);
}

/* -------- BILDUTSNITT I PROJEKTHJÄLTARNA (desktop) --------
   Omnira och StudieOS har text inbakad i själva artworken — symbol,
   ordmärke och tagline. Den texten måste hamna OVANFÖR Översikt-blocket,
   annars krockar de två.

   Principen är: artworken flyttas, överlägget står stilla.
   Översikt, brödtext, highlight och statuskort rörs alltså aldrig.

   Värdena nedan är uträknade så att den visuella ordningen blir:
     symbol → ordmärke → tagline → luftgap → Översikt

   På mobil nollställs de här reglerna helt (se responsive.css), eftersom
   artworken där visas hel i stället för beskuren. */

/* Omnira: ordningen är symbol → OMNIRA → AI OPERATING SYSTEM → gap.
   Kristallen börjar 14,7 % ned i bildfilen, så bilden kan flyttas upp
   högst 14,7 % innan spetsen börjar klippas. -14 % lämnar en liten
   säkerhetsmarginal och håller hela kristallen synlig.
   På lägre skärmar krävs ett större upplyft — se responsive.css. */
.project-page--omnira .project-hero__image {
  object-position: 50% 35%;
  transform: translateY(-14%);
}

/* StudieOS: hela hjärn- och boksymbolen ska synas, därför tas den tidigare
   inzoomningen (1.3) bort. Bilden är bredare än hög i förhållande till
   heron, så den täcker ytan även utan uppskalning. */
.project-page--studieos .project-hero__image {
  object-position: 50% 15%;
  transform: translateY(-29%);
}

/* StudieOS har en något mörkare hero-ton i designen. */
.project-page--studieos .project-hero__tint {
  background:
    radial-gradient(ellipse 62% 66% at 50% 100%, oklch(0.08 0.018 258 / 0.66) 0%, transparent 74%),
    linear-gradient(
      180deg,
      oklch(0.09 0.018 258 / 0.04) 0%,
      transparent 20%,
      transparent 38%,
      oklch(0.09 0.018 258 / 0.34) 60%,
      oklch(0.09 0.018 258 / 0.56) 80%,
      oklch(0.09 0.018 258 / 0.7) 100%
    );
}

/* ==========================================================================
   DEL 3 — SEKTIONSBAKGRUNDER PÅ PROJEKTSIDORNA
   Varje projektsida varvar mellan några mörka toner. Klasserna namnges
   efter tonen så att HTML:en blir lätt att läsa.
   ========================================================================== */
.bg-deep      { background: oklch(0.09 0.018 258); }
.bg-night     { background: oklch(0.1 0.018 258); }
.bg-navy      { background: oklch(0.11 0.018 235); }
.bg-steel     { background: oklch(0.13 0.022 235); }
.bg-slate     { background: oklch(0.115 0.02 258); }
.bg-charcoal  { background: oklch(0.125 0.022 235); }
.bg-ink       { background: oklch(0.145 0.022 258); }

/* Familje-Stunden har varmare toner. */
.bg-fs-blue   { background: oklch(0.1 0.02 240); }
.bg-fs-dark   { background: oklch(0.108 0.02 258); }
.bg-fs-warm   { background: oklch(0.1 0.018 20); }
.bg-fs-rust   { background: oklch(0.13 0.024 20); }

/* The Prompt. */
.bg-tp-deep   { background: oklch(0.09 0.02 258); }
.bg-tp-blue   { background: oklch(0.115 0.02 240); }
.bg-tp-black  { background: oklch(0.08 0.02 258); }

/* GainPilot. */
.bg-gp-warm   { background: oklch(0.09 0.015 30); }
.bg-gp-cool   { background: oklch(0.108 0.015 258); }
.bg-gp-black  { background: oklch(0.08 0.015 30); }

/* StudieOS. */
.bg-sos-deep   { background: oklch(0.095 0.016 258); }
.bg-sos-blue   { background: oklch(0.11 0.02 258); }
.bg-sos-purple { background: oklch(0.09 0.02 292); }
.bg-sos-violet { background: oklch(0.1 0.018 292); }
.bg-sos-panel  { background: oklch(0.12 0.02 258); }

/* ==========================================================================
   DEL 4 — SIDFOTEN PÅ PROJEKTSIDORNA
   Tillbaka-knapp plus länkar till föregående och nästa projekt.
   ========================================================================== */
.project-footer {
  position: relative;
  border-radius: 20px;
  padding: 34px clamp(20px, 4vw, 44px);
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(165deg, oklch(0.18 0.02 258 / 0.5), oklch(0.1 0.018 258 / 0.65));
  border: 1px solid color-mix(in srgb, var(--hero-accent-2) 15%, transparent);
  box-shadow: 0 0 40px -18px color-mix(in srgb, var(--hero-accent) 20%, transparent);
}

.project-footer__top {
  text-align: center;
  margin-bottom: 26px;
}

.project-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  border-top: 1px solid oklch(0.35 0.02 258 / 0.35);
  padding-top: 24px;
}

.project-footer__link {
  flex: 1;
  min-width: 200px;
  background: oklch(0.15 0.02 258 / 0.4);
  border: 1px solid oklch(0.4 0.02 258 / 0.35);
  border-radius: 12px;
  color: oklch(0.85 0.02 235);
  padding: 16px 20px;
  transition: border-color 0.2s ease;
}

.project-footer__link:hover {
  border-color: var(--hero-accent);
}

.project-footer__link--prev { text-align: left; }
.project-footer__link--next { text-align: right; }

.project-footer__label {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: oklch(0.55 0.02 235);
  margin-bottom: 6px;
}

.project-footer__name {
  font-size: 14.5px;
  font-weight: 600;
  color: oklch(0.94 0.012 75);
}