/* =============================================================================
   KUUSAMO.gg V2 — Visual Polish Layer
   Senior art direction pass. One visual anchor per section.
   No new content. No layout changes. Fully reversible.

   Technique index:
   1. Hero        — seal offset + asymmetric right-bleed, bottom vignette
   2. Identity    — ghost watermark crest behind Band A
   3. News        — ember left-border on lead, increased section breathing room
   4. Team        — section title pulled slightly left of grid, subtle top rule
   5. Guide       — deliberate vertical offset between left and right columns
   6. Partners    — contained stage with hairline rules
   7. Footer      — depth gradient, tighter label rhythm
   ============================================================================= */

/* =============================================================================
   1. HERO
   The seal currently sits centred in the right column at 6% opacity.
   Pull it right so it bleeds off the edge — asymmetric, more cinematic.
   Add a bottom-edge vignette to ground the full-bleed section.
   ============================================================================= */

/* Shift seal to right-bleed position */
.kgg-hero__seal {
  width: clamp(280px, 75%, 420px); /* larger than before */
  margin-top: 0;
  /* Drift right so ~25% bleeds off screen */
  transform: translateX(18%);
  opacity: 0.055; /* very slightly reduced for the larger size */
}

/* Bottom vignette — grounds the hero, prevents it floating */
/* Subtle left-edge darkening on the text column to add depth */
/* =============================================================================
   2. IDENTITY (Section 2)
   Ghost crest watermark behind Band A content.
   Positioned in the right portion so it doesn’t compete with the copy.
   ============================================================================= */

.kgg-identity__band--a {
  position: relative;
  overflow: hidden; /* clip the watermark */
}

.kgg-identity__band--a::before { display: none; /* watermark removed */
  content: '';
  position: absolute;
  /* Place the crest in the upper-right of Band A */
  top: -15%;
  right: -8%;
  width: 55%;
  aspect-ratio: 1;
  background-image: url('https://www.kuusamo.gg/staging/wp-content/uploads/kuusamogg-logo-512x512-1-1.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.03; /* ghost — felt rather than seen */
  filter: brightness(0) invert(1); /* pure white so it reads on coal */
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above the watermark */
.kgg-identity__statement,
.kgg-identity__items {
  position: relative;
  z-index: 1;
}

/* =============================================================================
   3. NEWS (Current Moment)
   Ember left-border on the lead article — editorial hierarchy signal.
   A thin vertical line, not a box. Increases perceived craft.
   Also: increase top breathing room entering from Team (Coal → Forest Black).
   ============================================================================= */

.kgg-current { padding-block: var(--section-py); }

.kgg-current__lead {
  position: relative;
  padding-left: 0;
}

.kgg-current__lead::before { display: none; /* removed: headline hierarchy sufficient */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--c-ember) 0%,
    rgba(237,107,54,0.15) 70%,
    transparent 100%
  );
  border-radius: 1px;
}

/* =============================================================================
   4. TEAM
   Pull the section title slightly left of the content grid — typographic
   tension. The heading overshoots the grid edge by a small, deliberate amount.
   Add a very faint horizontal rule above the eyebrow to open the section.
   ============================================================================= */

.kgg-team__header {
  position: relative;
}

/* Faint rule above the eyebrow — a breath before the section begins */
.kgg-team__header::before { display: none; /* decorative line removed */ }

/* Title steps slightly left of the grid alignment */
.kgg-team__title {
  margin-left: -2px; /* optical pull — barely perceptible, feels intentional */
  letter-spacing: -0.025em; /* tighten slightly — General Sans at this size benefits */
}

/* =============================================================================
   5. GUIDE (CS2-opas)
   Left column content drops slightly lower than the right column list.
   Deliberate vertical misalignment creates editorial tension.
   The rule separating the section from Team becomes an entry marker.
   ============================================================================= */

.kgg-guide { padding-block: var(--section-py); }

.kgg-guide__left {
  padding-top: 18px; /* drops left content below the right column list start */
}

/* The entry border gets a very subtle left extension — a detail for close viewers */
.kgg-guide {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(199,204,208,0.1); /* almost invisible — replaces the current var(--border) */
}

/* =============================================================================
   6. PARTNERS
   Hairline rules above AND below the logo row create a contained stage.
   Logos feel presented rather than floating.
   ============================================================================= */

.kgg-partners-section__logos {
  position: relative;
  padding-block: var(--space-5); /* equal 48px above and below logos */
}

.kgg-partners-section__logos::before,
.kgg-partners-section__logos::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%; /* doesn’t span full width — feels considered, not mechanical */
  height: 1px;
  background: rgba(199,204,208,0.12);
}
.kgg-partners-section__logos::before { top: 0; }
.kgg-partners-section__logos::after  { bottom: 0; }

/* =============================================================================
   7. FOOTER
   Depth gradient: the footer background isn’t flat Forest Black —
   it very subtly lightens toward the top, creating a sense of lift
   where the content lives and depth at the base.
   Almost invisible. Felt as atmosphere.
   ============================================================================= */

.kgg-site-footer {
  background: linear-gradient(
    to bottom,
    rgba(36,32,30,1)  0%,   /* very slightly lighter than c-forest at top */
    var(--c-forest)   40%,  /* settles to pure forest black */
    rgba(22,19,18,1) 100%   /* imperceptibly darker at absolute bottom */
  );
}

/* The copyright bar gets a slightly darker ground */
.kgg-site-footer__bottom {
  background: rgba(0,0,0,0.15);
  border-top-color: rgba(199,204,208,0.1); /* softer than before */
}

/* =============================================================================
   SECTION TRANSITIONS
   The Coal → Forest Black transitions are currently abrupt cuts.
   Add very subtle overlap gradients at section boundaries to smooth them.
   ============================================================================= */

/* Team (Coal) exits with a slight upward fade */
.kgg-team {
  position: relative;
}
.kgg-team::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(38,39,43,0.25));
  pointer-events: none;
}

/* =============================================================================
   VERTICAL RHYTHM ADJUSTMENTS
   Small asymmetric tweaks so sections don’t breathe identically.
   ============================================================================= */

/* Identity: slightly more top padding — gives the watermark crest room */
.kgg-identity { padding-block: var(--section-py); }

/* Partners: tighter, more compact — logos don’t need as much air */
.kgg-partners-section { padding-block: var(--section-py); }

/* Guide: handled above with asymmetric padding */

/* =============================================================================
   MOBILE: disable decorative elements that don’t translate to small screens
   ============================================================================= */
@media (max-width: 767px) {
  .kgg-identity__band--a::before { display: none; /* watermark removed */ display: none; } /* watermark too large on mobile */
  .kgg-current__lead { padding-left: 0; }           /* remove left border on mobile */
  .kgg-current__lead::before { display: none; /* removed: headline hierarchy sufficient */ display: none; }
  .kgg-hero__seal { transform: none; }              /* reset seal on mobile */
  .kgg-partners-section__logos::before,
  .kgg-partners-section__logos::after { display: none; }
  .kgg-team__header::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* No animations added in this layer — no overrides needed */
}