/* ============================================================
   Café Shires — coming soon
   Palette + vignette are sampled directly from the brand film,
   so the video edges dissolve into the page at any aspect ratio.
   ============================================================ */

:root {
  /* Ground — measured off the film's own backdrop */
  --ground-core:   #cac2b9;
  --ground-mid:    #b8afa6;
  --ground-edge:   #a49a91;
  --ground-corner: #9b9188;

  /* Brand */
  --teal:        #4f9aa0;
  --teal-bright: #6fc6c8;

  /* Ink */
  --ink:      #2c2521;
  --ink-mid:  #463c35;
  --ink-soft: #473e36;   /* 4.8:1 on the mid ground — AA at small sizes */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Safe-area aware gutters */
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --floor: calc(clamp(1.5rem, 4vh, 3rem) + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ground-corner);
  color: var(--ink);
  font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* ---------- Stage ---------------------------------------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* Film and announcement share a column, so they can never
     collide however the viewport is shaped. Centring the pair
     keeps them reading as one composition instead of drifting
     apart on tall screens. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Reserve the pinned footer's band so the centred composition
     can never run into it on short screens. */
  padding-bottom: calc(var(--floor) + 2.6rem);
  /* Rebuilt from the film's measured falloff:
     centre #c9c1b8 → 0.6r #bbb3aa → 0.8r #afa49b → corner #9e948b */
  background:
    radial-gradient(120% 105% at 50% 41%,
      var(--ground-core)   0%,
      #c1b9b0             34%,
      var(--ground-mid)   58%,
      #ada298             76%,
      var(--ground-edge)  89%,
      var(--ground-corner) 100%);
}

/* ---------- Film ----------------------------------------- */

.film {
  position: relative;
  flex: 0 1 auto;         /* hug the film, but yield when short */
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Largest 16:9 box that fits the region: frame edges and picture
   edges coincide exactly, which is what lets the mask feather the
   real edge of the picture — and lets the patch below be placed in
   percentages that hold at every size.
   The mark sits in the middle third of the frame, so the feather
   works on empty backdrop, never artwork. */
.film__frame {
  position: relative;
  /* max-width/max-height already bound this; without it flex would
     shrink the frame and defeat the portrait zoom below. */
  flex: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 62vh;
  max-height: 62svh;      /* keeps clear of mobile browser chrome */
  aspect-ratio: 16 / 9;   /* holds the box steady before metadata */
  opacity: 0;
  transition: opacity 900ms var(--ease);

  /* Dissolve all four edges into the page gradient underneath. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* safety net: never stretch, whatever the frame does */
}

/* The generator's watermark is burned into the footage, bottom
   right, in the same spot for the whole clip. The backdrop behind
   it holds steady at #afa79e throughout, so a soft disc of exactly
   that colour retires it. Sized in percentages of the frame, so it
   stays locked to the mark at any viewport size. It sits inside the
   masked frame, so it fades out with the picture at the edges. */
.film__patch {
  position: absolute;
  left: 85.1%;
  top: 73.1%;
  width: 10.9%;
  height: 19.4%;    /* equals the width in px on a 16:9 frame */
  pointer-events: none;
  background: radial-gradient(closest-side,
    #afa79e 0%, #afa79e 44%, rgba(175,167,158,0) 100%);
}

/* Revealed only once we're past the film's white title frame */
.is-filmready .film__frame { opacity: 1; }

/* Portrait: the mark only spans a third of the frame, so fitting
   the whole frame to a phone leaves it tiny. Overshoot the width
   and let the empty sides bleed off-screen — the height stays
   inside the film box, so the top and bottom feather survive.
   max-height still caps this, so it eases back toward a plain fit
   rather than ever cropping the mark. */
@media (max-aspect-ratio: 1/1) {
  .film__frame {
    /* Capped by what the height limit allows, so the frame stays
       exactly 16:9 — an explicit width fighting max-height would
       distort the picture and pull the patch off the watermark. */
    width: min(168vw, calc(62svh * 16 / 9));
    max-width: none;
  }
}

/* ---------- Atmosphere ----------------------------------- */

.veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.veil--vignette {
  background:
    radial-gradient(115% 95% at 50% 42%,
      rgba(0,0,0,0) 42%,
      rgba(48,38,30,.10) 74%,
      rgba(43,33,26,.26) 100%);
  mix-blend-mode: multiply;
}

/* Fine film grain, keeps the video and the CSS ground on the
   same surface so no seam reads between them. */
.veil--grain {
  opacity: .34;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- The announcement ----------------------------- */

.plate {
  flex: 0 0 auto;
  padding-inline: var(--gutter);
  padding-top: clamp(.5rem, 2vh, 1.4rem);
  padding-bottom: clamp(.4rem, 1.5vh, 1rem);
  text-align: center;
  z-index: 2;
}

.plate__rule {
  display: block;
  width: min(58vw, 20rem);
  height: 1px;
  margin: 0 auto clamp(1.1rem, 2.6vh, 1.9rem);
  background: linear-gradient(90deg,
    transparent, rgba(44,37,33,.42) 22%, rgba(44,37,33,.42) 78%, transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 1100ms var(--ease-out);
}

.plate__title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 34, "WONK" 1;
  font-weight: 340;
  font-size: clamp(2.9rem, 12.5vw, 8.2rem);
  line-height: .94;
  letter-spacing: -0.018em;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .32em;
}

/* Each word rises out of its own mask */
.word {
  display: block;
  overflow: hidden;
  padding-block: 0.06em;      /* room for descenders while masked */
  margin-block: -0.06em;
}

.word > span {
  display: block;
  transform: translateY(115%);
  transition: transform 1200ms var(--ease-out);
  transition-delay: calc(var(--i) * 110ms);
}

.plate__note {
  margin: clamp(1rem, 2.4vh, 1.6rem) 0 0;
  font-size: clamp(.78rem, 1.75vw, .95rem);
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink-mid);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

/* Reveal */
.is-revealed .plate__rule { transform: scaleX(1); }
.is-revealed .word > span { transform: translateY(0); }
.is-revealed .plate__note {
  opacity: 1;
  transform: none;
  transition-delay: 620ms;
}

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

.foot {
  /* Pinned, so it never competes with the centred composition. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter) var(--floor);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.is-revealed .foot {
  opacity: 1;
  transform: none;
  transition-delay: 900ms;
}

.foot__mark {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.foot__controls {
  display: flex;
  gap: .4rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .5em .85em;
  border: 1px solid rgba(44,37,33,.22);
  border-radius: 999px;
  background: rgba(255,252,248,.16);
  color: var(--ink-mid);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 300ms var(--ease), border-color 300ms var(--ease),
              color 300ms var(--ease);
}

.chip:hover {
  background: rgba(255,252,248,.42);
  border-color: rgba(44,37,33,.4);
  color: var(--ink);
}

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

.chip__icon {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.chip__spk { fill: currentColor; stroke-linejoin: round; }

/* Sound button: muted shows the slash, unmuted shows the waves */
#sound .chip__waves { opacity: 0; transition: opacity 250ms var(--ease); }
#sound .chip__slash { opacity: 1; transition: opacity 250ms var(--ease); }
#sound[aria-pressed="true"] .chip__waves { opacity: 1; }
#sound[aria-pressed="true"] .chip__slash { opacity: 0; }

#sound[hidden], #replay[hidden] { display: none; }

/* ---------- Autoplay refused ----------------------------- */

.kickoff {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: 1.1rem;
  justify-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.kickoff[hidden] { display: none; }

.kickoff__ring {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1px solid rgba(44,37,33,.34);
  background: rgba(255,252,248,.2);
  position: relative;
  transition: transform 400ms var(--ease-out), background 400ms var(--ease);
}

.kickoff__ring::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: .85rem solid var(--ink);
  border-block: .55rem solid transparent;
}

.kickoff:hover .kickoff__ring {
  transform: scale(1.06);
  background: rgba(255,252,248,.44);
}

.kickoff__label {
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* ---------- Reduced motion -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .film__frame,
  .plate__rule,
  .word > span,
  .plate__note,
  .foot {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}