/* ==========================================================================
   Cypress Creek TV
   Colors and sizes worth touching are the custom properties in :root below.
   ========================================================================== */

:root {
  --ink: #0a0d0c;          /* page background */
  --paper: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --accent: #e11d18;       /* the red from the show's title card */
  --accent-hot: #ff2a24;
  --line: rgba(255, 255, 255, 0.18);

  --container: 78rem;      /* outer width the content aligns to */
  --column: min(34rem, 37vw);   /* button column width on wide screens */
  /* Rendered width of the wordmark. The footer stack borrows it so the Jolt
     Life mark and copyright centre under the logo rather than sitting flush
     left. */
  --logo-w: clamp(13rem, 30vw, 24rem);
  --pad: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Hero — stacking order, bottom to top:
   media (0) → vignette (1) → content (3)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(3rem, 9vh, 6rem) var(--pad) 0;
  overflow: hidden;
}

/* The photo always renders at its natural width-fit — never `cover` — so the
   scene keeps its real proportions at every window shape: the pumpjack stays
   a distant background object and the family cutout reads as the foreground.
   (`cover` zoomed the photo hugely in squarish/tall windows, blowing the rig
   up until the layered family looked wrong against it.) The photo is 16:9, so
   its rendered height is 56.25vw; on windows taller than that, the second
   background layer — a gradient over the photo's last stretch — dissolves the
   gravel into the flat page ink below. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(10, 13, 12, 0) 0%, var(--ink) 96%),
    image-set(
      url("assets/background.webp?v=4") type("image/webp"),
      url("assets/background.jpg?v=4") type("image/jpeg")
    );
  background-size: 100% 9rem, 100% auto;
  background-position: 0 calc(56.25vw - 9rem), 50% 0;
  background-repeat: no-repeat;
}

/* Safari < 17 and older Chrome ignore image-set(); give them the JPEG. */
@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero__media {
    background-image:
      linear-gradient(180deg, rgba(10, 13, 12, 0) 0%, var(--ink) 96%),
      url("assets/background.jpg?v=4");
  }
}

/* Darkens the left side for the logo and the bottom for the buttons.
   These alphas are tuned to the bright misty-morning photo — the old dusk
   backgrounds wore a much heavier scrim that crushed this one to black. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(6, 9, 8, 0.62) 0%, rgba(6, 9, 8, 0.45) 38%, rgba(6, 9, 8, 0.08) 78%, rgba(6, 9, 8, 0.2) 100%),
    linear-gradient(180deg, rgba(6, 9, 8, 0.2) 0%, transparent 26%, rgba(6, 9, 8, 0.35) 78%, rgba(6, 9, 8, 0.7) 100%);
}

.hero__inner,
.footer {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* Hugs its content and centres itself with auto margins, rather than
   stretching and centring the content inside. */
/* Top-anchored, not centred: the photo renders width-fit, so on tall windows
   it only fills the upper part of the hero — centring would sink the logo and
   buttons into the dark ground below it. The hero's own top padding sets the
   offset; the footer's auto margin takes all the slack. */
.hero__inner {
  flex: 0 0 auto;
  margin-block: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer { margin-top: auto; }

/* --------------------------------------------------------------------------
   John — standing in the scene on the right
   -------------------------------------------------------------------------- */

.figure {
  position: absolute;
  z-index: 2;           /* above the vignette, below the buttons and footer */
  /* Anchored to the photo, not the content: the photo renders 56.25vw tall
     (width-fit, 16:9) and John is 32vw x 47vw (image ratio 1.47 tall).
     9.2vw grounds his cut-off exactly on the photo's bottom edge; the small
     lift keeps his head up on the wordmark line, with his darkened thighs
     dissolving into the band where the photo fades to ink. */
  top: calc(9.2vw - 0.5rem);
  bottom: auto;
  left: auto;
  right: clamp(3rem, 8vw, 10rem);
  width: 32vw;
  pointer-events: none;
}

/* Height follows the image's own 1372x2017 ratio, so the box hugs him
   exactly. The grounding treatment — full brightness to ~60% of his height,
   easing down to black where the cutout ends mid-thigh — is baked into the
   image's colors (not its alpha), so he never goes see-through. Regenerate
   it when swapping the cutout (ask Claude). */
.figure img {
  width: 100%;
  height: auto;
}

/* No width cap: the photo is width-fit, so the whole scene scales with the
   window — a cap would make him shrink relative to it and sink toward the
   scene's ever-lower floor on big monitors. Scaling with vw keeps him
   planted at the same spot in the scene at every size. */

/* --------------------------------------------------------------------------
   Logo + rule
   -------------------------------------------------------------------------- */

.logo { margin: 0; }

.logo img {
  width: var(--logo-w);
  filter: drop-shadow(0 0.15em 1.75rem rgba(0, 0, 0, 0.7));
}

.rule {
  width: 4.5rem;
  height: 0.375rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem);
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.actions {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--column);
}

.btn {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.0625rem 1.375rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  background: rgba(10, 13, 12, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn__label {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn__sub {
  font-size: 0.8125rem;
  color: var(--muted);
}

.btn:hover,
.btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
}

.btn--primary .btn__sub { color: rgba(255, 255, 255, 0.82); }

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
}

/* A button that goes nowhere yet (the shop). Rendered as a <span>, so it can't
   be focused or clicked — this just stops it pretending otherwise on hover. */
.btn--soon,
.btn--soon:hover {
  cursor: default;
  background: var(--accent);
  border-color: var(--accent);
  transform: none;
}

.btn:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Social row
   -------------------------------------------------------------------------- */

.social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* Spans are the not-linked-yet placeholders; the hover rules below only
   target real <a>s, so placeholders sit still until an account goes live. */
.social a,
.social span {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;          /* full tap target around a small glyph */
  border-radius: 0.25rem;
  color: var(--paper);
  opacity: 0.72;
  transition: opacity 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.social svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
  filter: drop-shadow(0 0.1em 0.5rem rgba(0, 0, 0, 0.6));
}

/* Instagram is drawn as outlines, not a filled silhouette. This has to be a
   CSS rule rather than a fill="none" attribute — the rule above would win. */
.social svg.is-stroke {
  fill: none;
  stroke: currentColor;
}

.social a:hover,
.social a:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.social a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  display: flex;            /* keeps the stack hugging its own content width */
  padding: clamp(2.5rem, 7vh, 4rem) 0 clamp(1.5rem, 4vh, 2.25rem);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Jolt Life mark over the copyright line, the pair centred under the logo */
.footer__stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: var(--logo-w);
}

.footer p {
  margin: 0;
  white-space: nowrap;   /* stays one centred line even if it outruns the box */
}

.footer__jolt {
  display: block;
  opacity: 0.72;
  transition: opacity 0.18s ease;
}

.footer__jolt img { width: 6.5rem; }

.footer__jolt:hover,
.footer__jolt:focus-visible { opacity: 1; }

.footer__jolt:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Narrow screens — full-width buttons and a heavier scrim
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  body { --column: 100%; }

  /* Phones go back to a `cover` crop — width-fit would render the photo as a
     short strip. This crop centres the pumpjack so it reads clearly as the
     subject, sun and fog behind it. */
  .hero__media {
    background-image: image-set(
      url("assets/background.webp?v=4") type("image/webp"),
      url("assets/background.jpg?v=4") type("image/jpeg")
    );
    /* auto 115% + bottom anchor crops a little sky, lifting the rig higher
       on screen; 67% centres it in the slice. */
    background-size: auto 115%;
    background-position: 54% 100%;
  }

  @supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
    .hero__media { background-image: url("assets/background.jpg?v=4"); }
  }

  /* No room for a six-person group beside full-width buttons — phones show
     just the scenery. */
  .figure { display: none; }

  /* Content sits at the top on phones; the footer needs pushing down */
  .footer {
    margin-top: auto;
    justify-content: center;   /* Jolt Life mark + copyright centred on phones */
  }


  /* The backdrop is busy at phone widths, so the buttons go near solid.
     No blur either — it smears the backdrop into a frosted smudge behind
     the text. */
  .btn {
    background: rgba(10, 13, 12, 0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .btn--primary { background: var(--accent); }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(6, 9, 8, 0.55) 0%, rgba(6, 9, 8, 0.3) 22%, rgba(6, 9, 8, 0.82) 62%, rgba(6, 9, 8, 0.95) 100%);
  }

  .actions { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}