/* V1: dark green swirl, chrome orb, lime accents */

.v1 {
  /* Palette: the decided brand colours for Swirl (documented on /pages/brand.html) */
  --brand-ink: #111111;
  --brand-paper: #ffffff;
  --brand-lime: #d4f24c;
  --brand-forest: #1a260e;
  --brand-moss: #3b5320;
  --brand-fern: #86a347;
  --brand-mist: #f4f5f0;

  --accent: var(--brand-lime);
  --card-bg: var(--brand-mist);
  --nav-bg: rgb(16 23 9 / 0.58);
  --nav-border: rgb(255 255 255 / 0.12);
  --nav-ink: #f5f5ee;
  --nav-indicator: rgb(255 255 255 / 0.14);
  --nav-shadow: 0 12px 40px -14px rgb(0 0 0 / 0.55);
  --hero-brand-ink: #f5f5ee;
  --mention-hover: #f3f6e6;
  --footer-line: rgb(255 255 255 / 0.16);

  --cover-bg:
    linear-gradient(180deg, rgb(8 12 4 / 0.1) 0%, rgb(8 12 4 / 0.2) 45%, rgb(8 12 4 / 0.8) 100%),
    url("../../images/web/background-swirl.jpg") 22% center / cover;
  --cover-ink: #f5f5ee;
  --cover-accent: var(--accent);
  --spine-bg: linear-gradient(90deg, #0c1207, #1c2811 50%, #0c1207);

  --panel-bg:
    linear-gradient(115deg, rgb(10 15 5 / 0.94) 30%, rgb(14 21 8 / 0.72)),
    url("../../images/web/background-swirl.jpg") center / cover;
  --panel-ink: #f5f5ee;
  --panel-muted: rgb(245 245 238 / 0.7);
  --panel-accent: var(--accent);
  --field-bg: rgb(255 255 255 / 0.06);
  --field-border: rgb(255 255 255 / 0.18);
  --focus: var(--accent);
  --focus-ring: rgb(212 242 76 / 0.22);
  --chip-on-bg: var(--accent);
  --chip-on-ink: #111;
  --term-bg: #080c05;
  --term-ok: var(--accent);
}

/* Hero: the gradient approximates the swirl so the canvas fades in, not pops */
.v1 .hero {
  color: #f5f5ee;
  background:
    radial-gradient(60% 70% at 55% 35%, #86a347 0%, transparent 70%),
    radial-gradient(50% 60% at 15% 20%, #b9c98f 0%, transparent 60%),
    linear-gradient(160deg, #3b5320 0%, #1a260e 55%, #0b1106 100%);
}
.v1 .hero__inner { padding: 120px clamp(20px, 8.1vw, 117px) 64px var(--gutter); }
.v1 .hero__title { text-shadow: 0 1px 24px rgb(0 0 0 / 0.18); }
.v1 .hero .gl--bg::after {
  /* soft vignette so copy stays readable over the brightest folds */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(10 16 4 / 0.35) 0%, transparent 55%);
  pointer-events: none;
}
.gl-off .v1 [data-gl="swirl"],
.v1 [data-gl="swirl"].gl-failed { background-image: url("../../images/web/background-swirl.jpg"); }
.gl-off .v1 [data-gl="band"],
.v1 [data-gl="band"].gl-failed { background-image: url("../../images/web/about-background.jpg"); }

/* About band */
.v1 .about--band {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(540px, 54vw, 780px);
  padding-block: 96px;
  color: #f5f5ee;
  background:
    radial-gradient(60% 50% at 70% 10%, #5b6f2c 0%, transparent 70%),
    linear-gradient(180deg, #2b3a1a, #151e0c);
  overflow: hidden;
}
.v1 .about--band .gl--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 14 5 / 0.25), rgb(10 14 5 / 0.45));
}
.v1 .about .pill {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.v1 .about .pill:hover { background: rgb(255 255 255 / 0.2); }

/* Work */
.v1 .case--featured {
  --case-muted: rgb(245 245 238 / 0.72);
  --case-line: rgb(255 255 255 / 0.16);
  --tag-bg: rgb(255 255 255 / 0.1);
  color: #f5f5ee;
  background:
    linear-gradient(120deg, rgb(14 20 8 / 0.94), rgb(20 30 12 / 0.8)),
    url("../../images/web/about-background.jpg") center / cover;
}
.v1 .case--featured .case__logo { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14); border-radius: 12px; }

/* Footer */
.v1 .footer { color: #e9ebe0; background: #0d1208; }