/* ===================================================================
   GreenCabinWales — stylesheet
   Sections: 1 tokens · 2 base · 3 background · 4 header · 5 hero
             6 cards · 7 band · 8 footer · 9 responsive · 10 motion
   =================================================================== */

/* ---------- 1. TOKENS (change colours here, nowhere else) ---------- */
:root {
  /* greens, sampled from the reference photograph */
  --green-900: #071c13;   /* deepest — bottom of the wall */
  --green-800: #0d2b1e;
  --green-700: #123c2a;
  --green-600: #1c6647;
  --green-500: #226e4d;   /* the wall's mid green */
  --green-400: #388c66;   /* where the light falls */
  /* THE brand green, taken from the logo mark. Every green on the site is
     this one colour — solid, or this same colour at some transparency.
     Change it here and it changes everywhere. */
  --accent:     #3ce35f;
  --accent-rgb: 60, 227, 95;   /* same colour, for rgba() tints */

  /* neutrals */
  --ink:       #f2fbf6;
  --ink-muted: rgba(233, 247, 239, 0.72);
  --line:      rgba(255, 255, 255, 0.16);
  --panel:     rgba(255, 255, 255, 0.055);

  /* layout */
  /* Full-bleed layout: content runs to the page edges, held off them by
     --pad. No centred column, so nothing is stranded in the middle of a
     wide monitor.
     NOTE: when running text is added later, cap that block's own width
     (around 65ch) — full-bleed paragraphs are unreadable at this size. */
  --maxw: 100%;
  --pad: clamp(1.5rem, 3.5vw, 4.5rem);
  --radius: 14px;

  /* type — Century Gothic, with the nearest geometric sans at each step
     down. It ships with Microsoft Office rather than with macOS or Windows
     themselves, so visitors without it land on Avant Garde / URW Gothic /
     Futura, which share its geometric, single-storey-'a' character. */
  --font: "Century Gothic", CenturyGothic, "ITC Avant Garde Gothic",
          "URW Gothic", Futura, "Avenir Next", "Segoe UI",
          ui-sans-serif, sans-serif;
}

/* ---------- 2. BASE ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Column layout so <main> can simply absorb whatever height the header
     doesn't use. Previously sections guessed the header height with
     calc(100vh - 5rem), which broke the moment the logo got bigger.
     The fixed .bg layers are out of flow and unaffected. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--green-900);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================================================================
   3. ANIMATED BACKGROUND
   Four stacked layers, all fixed behind the page and click-through:
     .bg-wall     the painted green wall + faint vertical seams (static)
     .bg-leaves   two foliage-shadow layers that sway at different speeds
     .bg-vignette darkening toward the edges
     .bg-grain    fine noise so the gradients don't band
   The leaf shadows are fractal-noise SVGs. Only `transform` is
   animated, so the whole thing runs on the GPU.
   =================================================================== */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--green-900);
}

.bg-wall {
  position: absolute;
  inset: 0;
  background:
    /* light pooling across the upper left */
    radial-gradient(80% 70% at 22% 18%, rgba(96, 186, 140, 0.5), transparent 62%),
    /* shadow gathering at the foot of the wall */
    radial-gradient(120% 70% at 45% 116%, var(--green-900) 0%, transparent 58%),
    /* the wall itself */
    linear-gradient(176deg,
      #2c7d59 0%,
      #2a7454 30%,
      #1f5c41 58%,
      var(--green-700) 78%,
      var(--green-800) 100%);
}

/* faint vertical striations + panel seams, as in the photograph */
.bg-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.014) 0 1px,
      transparent 1px 4px),
    linear-gradient(90deg,
      transparent 35.8%, rgba(0, 0, 0, 0.07) 36%, transparent 36.2%,
      transparent 57.4%, rgba(0, 0, 0, 0.06) 57.6%, transparent 57.8%);
}

.bg-leaves {
  position: absolute;
  inset: -18%;
  will-change: transform;
  /* keep the dapple to the right, leaving the left of the wall clean */
  -webkit-mask-image: radial-gradient(62% 100% at 86% 40%, #000 10%, transparent 76%);
          mask-image: radial-gradient(62% 100% at 86% 40%, #000 10%, transparent 76%);
}

/* larger, softer clumps — the canopy further from the wall.
   The feColorMatrix alpha row is the threshold: bigger multiplier and
   more negative offset = fewer, more separated shadow shapes. */
.bg-leaves-a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='800'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.014' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 0 0 0 -1.62'/%3E%3C/filter%3E%3Crect width='1000' height='800' filter='url(%23a)'/%3E%3C/svg%3E");
  background-size: 1150px 920px;
  opacity: 0.55;
  filter: blur(6px);
  animation: sway-a 34s ease-in-out infinite alternate;
}

/* smaller, crisper leaves — closer to the wall, moving a touch faster */
.bg-leaves-b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='700'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022 0.03' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.4 0 0 0 -1.95'/%3E%3C/filter%3E%3Crect width='800' height='700' filter='url(%23b)'/%3E%3C/svg%3E");
  background-size: 720px 620px;
  opacity: 0.5;
  filter: blur(1.5px);
  animation: sway-b 23s ease-in-out infinite alternate;
  /* offset from layer A's mask so the two clump unevenly, as real foliage does */
  -webkit-mask-image: radial-gradient(52% 85% at 80% 62%, #000 6%, transparent 74%);
          mask-image: radial-gradient(52% 85% at 80% 62%, #000 6%, transparent 74%);
}

@keyframes sway-a {
  from { transform: translate3d(-1.6%, -1.1%, 0) scale(1.04) rotate(-0.6deg); }
  to   { transform: translate3d( 1.6%,  1.3%, 0) scale(1.09) rotate( 0.7deg); }
}
@keyframes sway-b {
  from { transform: translate3d( 1.2%,  0.9%, 0) scale(1.06) rotate( 0.5deg); }
  to   { transform: translate3d(-1.4%, -0.7%, 0) scale(1.01) rotate(-0.5deg); }
}

/* ---- the real footage ----
   Covers the viewport like a background-image with `cover`. Starts
   invisible and fades in once enough has buffered to play, so visitors
   never see it pop in mid-load — they see the CSS wall until then.  */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
  /* The footage has the GreenCabin logo burned into the top-left and the
     strapline top-right. Anchoring to the bottom and scaling up pushes the
     top ~20% of the frame off-screen, taking both with it.
     Raise the scale if any branding still peeks in. */
  transform-origin: bottom center;
  transform: scale(1.25);
}
.bg-video.is-ready { opacity: 1; }

.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 110% at 45% 38%, transparent 44%, rgba(0, 0, 0, 0.38) 100%);
}

.bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- 4. HEADER ---------- */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  /* logo hard left, strapline hard right — never grouped in the middle */
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.25rem, 2.5vh, 2rem) var(--pad) 1rem;
  /* NO `margin: 0 auto` here. Body is a flex column, and auto inline
     margins on a flex item make it shrink to its content and centre —
     which pulled the logo and strapline into the middle of the page. */
  width: 100%;
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 1.05rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  /* 1.5x the previous 22.5px */
  font-size: 33.75px;
}

/* (a `.logo img` rule used to live here; it out-specified .logo-mark and
   pinned the mark's height — .logo-mark is the single source now) */

/* "Green" and "Wales" stay white, "Cabin" picks up the brand green */
.logo-accent { color: var(--accent); }

/* the brand mark — sized by height so the aspect ratio looks after itself */
.logo-mark {
  display: block;
  flex: none;
  height: 56.25px;   /* 1.5x the previous 37.5px */
  width: auto;
}
.logo-mark.small { height: 45px; }

/* strapline opposite the logo. The green rule sits just clear of the
   baseline rather than tight against it, as on the brand lockup. */
/* first item in the centred stack */
.tagline-sub {
  margin: 0;
  color: var(--ink-muted);
  font-size: 1.875rem;    /* same size as the header strapline */
  font-weight: 700;
}

.tagline {
  margin: 0;
  color: var(--ink);
  font-size: 1.875rem;   /* 1.5x the previous 1.25rem */
  font-weight: 400;
  white-space: nowrap;
}

.tagline strong {
  font-weight: 700;
  border-bottom: 3.75px solid var(--accent);
  padding-bottom: 3px;
}

/* <main> takes the space the header leaves */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ---------- 4b. CENTRED STACK ----------
   Strapline, carousel, awards, contact — one column, centred on a single
   axis, with one `gap` governing every space between them. Even spacing
   is then structural rather than four margins kept in sync by hand. */
.stack {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4.5vh, 3.25rem);
  /* The heavier bottom padding is deliberate: with the stack centred, extra
     room underneath lifts the whole group up the page proportionally,
     rather than pinning it with a fixed offset. */
  /* bottom padding leaves room for the footer below without the page
     tipping into a scrollbar */
  padding: clamp(0.5rem, 1.5vh, 1rem) var(--pad) clamp(1rem, 3.5vh, 2.5rem);
  text-align: center;
}

/* ---------- PRIVACY POLICY PAGE ----------
   Running text, so it gets a proper measure. The landing page is full-bleed,
   but paragraphs stretched across a wide monitor are unreadable — this block
   caps itself at roughly 68 characters and centres. */
.policy {
  width: min(68ch, 100%);
  margin: 0 auto;
  padding: clamp(1rem, 3vh, 2rem) var(--pad) clamp(3rem, 8vh, 5rem);
  text-align: left;
}

.policy h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.policy h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  margin: 2.25rem 0 0.6rem;
}

.policy p {
  margin: 0 0 1rem;
  color: var(--ink-muted);
  font-size: 1.05rem;
}

.policy a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.policy a:hover { color: var(--ink); }

.policy-meta { font-size: 0.9rem; opacity: 0.8; }

.policy-back {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* ---------- FOOTER ----------
   Bottom right, on the same gutter as the header strapline above it. */
.site-footer {
  padding: 0 var(--pad) clamp(0.9rem, 2.2vh, 1.6rem);
  text-align: right;
}

.site-footer p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.site-footer a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.site-footer a:hover { color: var(--accent); }

.footer-sep { opacity: 0.5; }

/* ---------- 3D LOGO CAROUSEL ----------
   The logos stand around a vertical axis and the whole ring turns, so each
   one swings toward the viewer at the front and recedes at the back.

   Geometry: for n items of width w standing on a circle,
       radius = (w / 2) / tan(180deg / n)
   With 11 items 220px wide that gives ~375px, which leaves a clear gap
   between neighbours rather than letting them overlap.               */
.ring-block {
  display: flex;
  justify-content: center;
  width: 100%;          /* without this it shrink-wraps to the stage's fixed
                           width and drags the ring off the left of a phone */
}

.ring-stage {
  /* Radius and item width are tied by the geometry above, so they're
     variables — the narrow-screen rule further down changes both together
     and the spacing stays correct. */
  --ring-r: 375px;
  --item-w: 220px;
  width: min(760px, 100%);
  height: 190px;
  /* The 3D itself — without this it's flat. Deep rather than shallow: a
     tighter perspective scaled the front logo to ~1.5x and it bullied
     everything around it. */
  perspective: 1800px;
}

.ring {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;  /* children keep their own depth */
  animation: ring-spin 60s linear infinite;
}

@keyframes ring-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

.ring-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--item-w);
  height: 70px;
  margin: -35px 0 0 calc(var(--item-w) / -2);
  transform-style: preserve-3d;
  /* stand this item at its own angle, then push it out to the rim */
  transform: rotateY(calc(var(--i) * (360deg / 11))) translateZ(var(--ring-r));

  /* Fade with depth. Rotation is linear, so an item's angle over time is
     known in advance: every item runs the identical curve, offset by a
     negative delay equal to its share of the cycle. Item 0 peaks at the
     front, item 1 one eleventh later, and so on. */
  animation: ring-fade 60s linear infinite;
  animation-delay: calc(var(--i) * -60s / 11);
}

/* Back half dimmed and softened, never hidden — it reads as distance
   rather than clutter. The curve falls away quickly either side of the
   front so the near arc stays clearly the subject; a gentler ramp left
   six or seven logos competing at once. Blur is the second depth cue. */
@keyframes ring-fade {
  0%   { opacity: 1;    filter: blur(0); }
  15%  { opacity: 0.66; filter: blur(0.4px); }
  32%  { opacity: 0.34; filter: blur(1px); }
  50%  { opacity: 0.2;  filter: blur(1.4px); }
  68%  { opacity: 0.34; filter: blur(1px); }
  85%  { opacity: 0.66; filter: blur(0.4px); }
  100% { opacity: 1;    filter: blur(0); }
}

.ring-item .face {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 175px;
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
  backface-visibility: hidden;
}

/* The far side of a rotated element renders mirrored. Giving each item a
   second copy turned 180deg means the viewer always meets a correctly
   oriented face, whichever side of the ring the logo is on. */
.ring-item .back { transform: rotateY(180deg); }

.awards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.45rem;
  text-align: center;
}

.award {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.3rem;      /* matched to .contact-line */
  line-height: 1.35;
}

.award-org  { color: var(--ink-muted); }
.award-sep  { color: rgba(255, 255, 255, 0.3); }
.award-name { color: var(--ink); font-weight: 600; }

.award-year {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.medal-word        { font-weight: 700; letter-spacing: 0.04em; }
.medal-word.gold   { color: #f2d68d; }
.medal-word.bronze { color: #e0a97e; }

/* ---------- 4c. CONTACT ----------
   Right-hand end of the bottom row, set as plain text — no panel,
   border or backdrop. */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0;
  /* sits further from the awards than the stack's uniform gap */
  margin-top: clamp(1rem, 3.5vh, 2.5rem);
}

/* scoped to out-specify `.card p`, which would otherwise pin the size
   and mute the colour of this paragraph */
.contact-card .contact-lead {
  margin: 0 0 0.5rem;
  color: var(--ink-muted);   /* same as .award-org ("Archer Awards") */
  font-size: 1.4rem;
  font-weight: 600;
}

/* Email and phone on one row, sitting together at the right-hand end
   under the sentence rather than pushed to its two edges. */
.contact-lines {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
}

.contact-line {
  color: var(--accent);      /* the brand green, same as the logo mark */
  font-size: 1.3rem;         /* matched to .award */
}
/* they're still links, so they need to respond to the pointer */
.contact-line:hover { color: var(--ink); }

/* Tablets and small laptops: the full-size ring is 750px across and hangs
   off both edges here. Radius and item width step down together so the
   spacing stays right. Must come before the phone rule below. */
@media (max-width: 900px) {
  .ring-stage {
    --ring-r: 300px;
    --item-w: 176px;
    height: 165px;
    perspective: 1400px;
  }
  .ring-item .face { max-width: 140px; max-height: 38px; }

  /* At 30px and `nowrap` the strapline is 443px wide — too much to sit
     beside the logo here, and it pushed the page into a sideways scroll. */
  .tagline {
    font-size: 1.4rem;
    white-space: normal;
    text-align: right;
  }
  .tagline-sub { font-size: 1.4rem; }
}

@media (max-width: 700px) {
  /* at 1.25x the strapline no longer fits a phone on one line, and
     `nowrap` was pushing it off the right edge */
  .tagline {
    font-size: 1rem;
    white-space: normal;
    text-align: right;
  }
  .tagline-sub {
    font-size: 1rem;         /* same size as the header strapline */
  }

  /* Give the organisation its own line so the year stays attached to the
     award name. Without this the flex row wraps and orphans the year. */
  .award { font-size: 1.15rem; }      /* matched to .contact-line */
  .award-org { flex: 0 0 100%; }
  .award-sep { display: none; }

  .awards-list { gap: 1.4rem; }

  /* A 750px-wide ring does not fit a phone. Radius and item width shrink
     together — r = (w / 2) / tan(180deg / 11) — so the logos stay evenly
     spaced rather than bunching up. */
  .ring-stage {
    /* The ring is 2r wide at its widest, so the radius has to fit the phone
       with room to spare or the outer logos get cut off by the screen edge.
       item width then follows from w = 2r * tan(180deg / 11). */
    --ring-r: 148px;
    --item-w: 87px;
    height: 120px;
    perspective: 800px;
  }
  .ring-item .face { max-width: 72px; max-height: 26px; }

  /* the long contact sentence runs to several lines on a phone, so it
     steps down further than the desktop size */
  .contact-card .contact-lead { font-size: 1.2rem; }      /* 1.25x */
  .contact-line { font-size: 1.15rem; }                   /* 1.25x */
}

@media (max-width: 560px) {
  .logo-text { display: none; }
  /* pull the dapple toward the middle so it still reads on a narrow screen */
  .bg-leaves {
    -webkit-mask-image: radial-gradient(85% 60% at 72% 26%, #000 8%, transparent 78%);
            mask-image: radial-gradient(85% 60% at 72% 26%, #000 8%, transparent 78%);
  }
}

/* ---------- 10. REDUCED MOTION ----------
   Anyone who has asked their OS to limit animation gets a still page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bg-leaves { animation: none; }
  /* hold the ring still, and level every logo so none sit dimmed */
  .ring { animation: none; }
  .ring-item { animation: none; opacity: 0.85; }
  * { transition-duration: 0.01ms !important; }
}

/* footer and policy text step down on a phone */
@media (max-width: 700px) {
  .site-footer { text-align: center; }
  .site-footer p { font-size: 0.78rem; }
  .policy h2 { font-size: 1.1rem; }
  .policy p { font-size: 1rem; }
}