/* Lexend is loaded here rather than with <link> tags: extra tags in <head> break React's hydration. */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap");

/* Scapia-inspired theme for this copy of the portfolio: deep navy and Scapia orange in dark
   mode, warm cream in light mode, gold section labels, and a rounded geometric font.
   Overrides the site's own colour variables (html[...] beats the original [data-theme=...]). */

/* html[data-theme] outranks the font class Next.js puts on <html>. */
html[data-theme] {
  --font-geist-sans: "Lexend", "Geist", ui-sans-serif, system-ui, sans-serif;
  --radius-card: 1.25rem;
  --scapia-gold: #f2c46d;
}

/* The hero's room-photo backdrop is swapped (in index.html) for scapia-back-dark/light.png,
   soft glows whose edges match the page colour, so no edge fade is needed. */

/* Hero card (scapia-card.js): hides the globe + photo and shows a travel card instead. */
div.aspect-square.max-w-\[960px\] > :not(.gs-scard-wrap) { visibility: hidden; }
/* impact.css clips this box to keep the globe off the top bar; the card's orbit needs the room. */
div.aspect-square.max-w-\[960px\] { clip-path: none !important; }
.gs-scard-wrap {
  position: absolute; inset: 6% 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
}
@media (min-width: 768px) { .gs-scard-wrap { inset: 13% 0; } }
/* Orbit rings of app icons behind the card. Each icon sits at its angle (--a) on the ring,
   the ring spins, and the icon spins back the same amount so it always stays upright. */
.gs-orbit {
  position: absolute; left: 50%; top: 50%; aspect-ratio: 1;
  translate: -50% -50%; container-type: size; pointer-events: none;
  border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--color-primary) 45%, transparent);
}
.gs-orbit.outer { height: 108%; --spin: 60s; --dir: normal; }
.gs-orbit.inner { height: 84%; --spin: 45s; --dir: reverse; border-style: solid;
  border-color: color-mix(in oklab, var(--scapia-gold) 30%, transparent); }
.gs-orbit-spin { position: absolute; inset: 0; animation: gs-spin var(--spin) linear infinite var(--dir); }
.gs-orbit-item {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  transform: rotate(var(--a)) translateY(-50cqh) rotate(calc(-1 * var(--a)));
}
.gs-orbit-item img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  background: #fff8f1; box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.55), 0 0 0 2px rgb(255 255 255 / 0.85);
  animation: gs-spin var(--spin) linear infinite;
  animation-direction: var(--dir);
}
.gs-orbit.outer .gs-orbit-item img { animation-direction: reverse; }
.gs-orbit.inner .gs-orbit-item img { animation-direction: normal; }
@keyframes gs-spin { to { rotate: 360deg; } }
@media (max-width: 767px) { .gs-orbit-item { width: 40px; height: 40px; margin: -20px 0 0 -20px; } }
@media (prefers-reduced-motion: reduce) { .gs-orbit-spin, .gs-orbit-item img { animation: none; } }

.gs-scard {
  position: relative; z-index: 1;
  container-type: size;
  height: 100%; max-height: 600px; aspect-ratio: 54 / 85.6;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 5% / 3.2%;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.06);
  transform: rotate(-4deg);
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gs-scard:hover { transform: rotate(0deg) scale(1.02); }
.gs-scard-top {
  flex: 0 0 22%; background: #121212;
  display: flex; align-items: center; justify-content: space-between; padding: 0 7cqw;
}
.gs-scard-badge {
  background: #1d2f8c; color: #fff; border: 0.4cqw solid #fff; box-shadow: 0 0 0 0.4cqw #1d2f8c;
  font: italic 800 3.4cqw/1 "Lexend", sans-serif; letter-spacing: 0.04em; padding: 1.2cqw 2cqw;
}
.gs-scard-brand { color: #fff; font: 600 7cqw/1 "Lexend", sans-serif; letter-spacing: -0.01em; }
.gs-scard-body { position: relative; flex: 1; background: linear-gradient(180deg, #f4642f 0%, #ee5826 100%); overflow: hidden; }
.gs-scard-body > * { position: absolute; }
.gs-scard-clouds { left: -6cqw; bottom: 6cqw; width: 112cqw; color: rgb(80 20 0 / 0.28); }
.gs-scard-trail { left: 5cqw; top: 9cqw; width: 58cqw; color: rgb(60 15 0 / 0.55); }
.gs-scard-nfc { left: 6cqw; top: 6cqw; width: 9cqw; color: #fff; }
.gs-scard-clouds svg, .gs-scard-trail svg, .gs-scard-nfc svg { display: block; width: 100%; height: auto; }
.gs-scard-name {
  left: 7cqw; top: 40cqw; margin: 0; color: #fff;
  font: 600 5.4cqw/1.3 "Lexend", sans-serif; letter-spacing: 0.05em; text-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}
.gs-scard-chip {
  left: 9cqw; bottom: 16cqw; width: 15cqw; aspect-ratio: 1.25; border-radius: 2cqw;
  background:
    linear-gradient(90deg, transparent 32%, rgb(0 0 0 / 0.25) 33% 35%, transparent 36% 64%, rgb(0 0 0 / 0.25) 65% 67%, transparent 68%),
    linear-gradient(0deg, transparent 47%, rgb(0 0 0 / 0.25) 48% 52%, transparent 53%),
    linear-gradient(135deg, #f1ede4, #b7b0a1);
  box-shadow: inset 0 0 0 0.4cqw rgb(0 0 0 / 0.18);
}
/* The cut-out photo is a square with the person centred; place them on the card's right. */
.gs-scard-photo { left: 13cqw; bottom: -21cqw; height: 190cqw; width: 190cqw; object-fit: contain; }

html[data-theme=product-dark] {
  --color-surface: #0a1430;
  --color-surface-raised: #111f45;
  --color-surface-sunken: #08102a;
  --color-surface-overlay: rgb(5 10 28 / 0.6);
  --color-muted: #13234d;
  --color-on-muted: #b7c2e0;
  --color-primary: #ff6a2b;
  --color-primary-hover: #ff7f45;
  --color-on-primary: #ffffff;
  --color-primary-subtle: #2b1c24;
  --color-primary-text: #ff8a55;
  --color-primary-border: #7a3417;
  --color-text-default: #f6f1ea;
  --color-text-muted: #b3bdd6;
  --color-text-faint: #7f8bab;
  --color-border-default: #22346a;
  --color-border-emphasis: #2e4383;
  --color-border-strong: #3b529a;
  --color-tint: rgb(255 255 255 / 0.06);
  --color-tint-subtle: rgb(255 255 255 / 0.03);
  --color-focus-ring: #ff6a2b;
}

html[data-theme=product] {
  --color-surface: #fff7f0;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #fdeee2;
  --color-muted: #fbeee4;
  --color-on-muted: #5b4a40;
  --color-primary: #e9531d;
  --color-primary-hover: #d24614;
  --color-on-primary: #ffffff;
  --color-primary-subtle: #ffe4d6;
  --color-primary-text: #c8440f;
  --color-primary-border: #f7b896;
  --color-text-default: #14254f;
  --color-text-muted: #4a5578;
  --color-text-faint: #7a84a3;
  --color-border-default: #f0dccd;
  --color-border-emphasis: #e6c7b2;
  --color-focus-ring: #e9531d;
  --scapia-gold: #b8862f;
}

/* This copy is light mode only (forced in index.html and the theme script), so hide the toggle. */
header button[aria-label="Switch to Light theme"],
header button[aria-label="Switch to Dark theme"] { display: none !important; }

/* Gold section labels ("Experience", "Achievements"…), like Scapia's gold script headings. */
.gs-head .text-primary { color: var(--scapia-gold); }

/* Primary buttons ("Let's talk"): pill-shaped like Scapia's app buttons. */
.btn-flat-primary, a[data-ph-cta="hero"] { border-radius: 999px; }