/* ============================================================
   Mobilise — site styles
   Per Mobilise Brand Style Guide (2024):
     Mobilise Blue  #0035B1   •  Off-White   #F1EDE5   •  Chartreuse #DEF54F
   Typography:
     Title  → Swell           (single weight, headings only, ≥10pt digital)
     Body   → Lufga           (variable weights: 300/400/500/600/700)
     Accent → Bestfriend Sig  (handwritten, sparingly)
   ============================================================ */

/* ----- Brand fonts ----- */
@font-face {
  font-family: "Swell";
  src: url("assets/fonts/Swell-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lufga";
  src: url("assets/fonts/Lufga-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lufga";
  src: url("assets/fonts/Lufga-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lufga";
  src: url("assets/fonts/Lufga-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lufga";
  src: url("assets/fonts/Lufga-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lufga";
  src: url("assets/fonts/Lufga-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bestfriend Signature";
  src: url("assets/fonts/BestfriendSignature-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Brand palette (per style guide) ----- */
  --color-bg: #0035B1;          /* Mobilise Blue — RGB(0, 53, 177) */
  --color-bg-deep: #00277F;     /* deeper Mobilise Blue for card surfaces / shadows */
  --color-ink: #ffffff;
  --color-ink-soft: rgba(255, 255, 255, 0.72);
  --color-icon: #F1EDE5;        /* Off-White — RGB(241, 237, 229) */
  --color-accent: #DEF54F;      /* Chartreuse — RGB(222, 245, 79) */

  /* ----- Typography ----- */
  --font-display: "Swell", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --font-text: "Lufga", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --font-accent: "Bestfriend Signature", "Caveat", "Brush Script MT", cursive;

  /* Type scale (fluid) */
  --fs-h1:  clamp(36px, 5vw, 64px);
  --fs-h2:  clamp(28px, 3.6vw, 44px);
  --fs-h3:  clamp(20px, 2.4vw, 28px);
  --fs-body: clamp(15px, 1.05vw, 18px);
  --fs-small: clamp(13px, 0.9vw, 15px);

  /* ----- Layout ----- */
  --max-width: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --reel-gap: clamp(16px, 2.4vw, 32px);
  --radius: 18px;

  /* ----- Motion ----- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ----- Headings (Swell — title typeface) ----- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0 0 0.5em;
  text-transform: uppercase;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ----- Accent (Bestfriend Signature — used sparingly) ----- */
.accent {
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--color-accent);
  font-size: 1.25em;
}

/* ----- Page (foreground content) ----- */
.page {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(48px, 8vw, 120px);
}

/* ----- Brand logo (animated video) ----- */
.brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 80px);
}

.brand__logo {
  display: block;
  height: clamp(220px, 28vw, 420px);
  width: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
  background: transparent;
}

/* ----- Decorative background clips ----- */
.bg-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-art__clip {
  position: absolute;
  display: block;
  /* Clips share the same blue as the page; they read as floating shapes. */
  background: var(--color-bg);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.18));
  animation: bobble 9s ease-in-out infinite;
}

.bg-art__clip--smile {
  width: clamp(140px, 18vw, 240px);
  top: clamp(40px, 7vw, 110px);
  left: clamp(8px, 3vw, 56px);
  transform: rotate(-8deg);
  animation-delay: -1s;
}

.bg-art__clip--pizza {
  width: clamp(120px, 15vw, 200px);
  top: clamp(20px, 5vw, 80px);
  right: clamp(8px, 3vw, 56px);
  transform: rotate(7deg);
  animation-delay: -3s;
  animation-duration: 11s;
}

.bg-art__clip--flower {
  width: clamp(110px, 12vw, 170px);     /* smaller — was 140–230 */
  bottom: clamp(-40px, -1vw, -8px);     /* tucked partly below the fold */
  left: clamp(-30px, -1vw, -8px);       /* tucked partly off the left edge */
  transform: rotate(6deg);
  animation-delay: -5s;
  animation-duration: 12s;
  opacity: 0.85;                        /* slight knock-back so text reads cleanly */
}

.bg-art__clip--ball {
  width: clamp(130px, 16vw, 220px);
  bottom: clamp(40px, 7vw, 110px);
  right: clamp(4px, 2vw, 40px);
  transform: rotate(-5deg);
  animation-delay: -2s;
  animation-duration: 10s;
}

@keyframes bobble {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* Hide bg art on small screens so the reels stay the focus. */
@media (max-width: 720px) {
  .bg-art__clip--pizza,
  .bg-art__clip--ball { display: none; }
  .bg-art__clip--smile {
    width: 110px;
    top: 8px;
    left: -10px;
    opacity: 0.85;
  }
  .bg-art__clip--flower {
    width: 110px;
    bottom: 8px;
    right: -10px;
    left: auto;
    opacity: 0.85;
  }

  /* On mobile the centered logo would otherwise overlap the top-left
     smile clip and the bottom edge of the fixed Home / Feedback nav.
     Push the brand block down so it clears both. */
  .brand {
    margin-top: clamp(80px, 22vw, 140px);
  }
}

/* Reduced motion: stop the gentle bobble */
@media (prefers-reduced-motion: reduce) {
  .bg-art__clip { animation: none; }
  .bg-icon     { animation: none !important; }
}

/* ----- Scattered hand-drawn icons (transparent PNGs) ----- */
.bg-icon {
  position: absolute;
  display: block;
  width: clamp(36px, 5vw, 72px);
  height: clamp(36px, 5vw, 72px);
  object-fit: contain;
  opacity: 0.95;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: drift 14s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* Each icon: position + rotation + size variation. Numbers chosen to
   sit in negative space around the reels, not on top of them. */
.bg-icon--01 { top:  4%; left:  22%; transform: rotate(-8deg);  animation-delay: -0.5s; }
.bg-icon--02 { top:  2%; left:  38%; transform: rotate( 6deg);  animation-delay: -2s;   width: clamp(30px, 4vw, 56px); height: clamp(30px, 4vw, 56px); }
.bg-icon--03 { top:  8%; left:  56%; transform: rotate(-4deg);  animation-delay: -3.5s; }
.bg-icon--04 { top:  3%; left:  72%; transform: rotate( 9deg);  animation-delay: -5s;   width: clamp(34px, 4.5vw, 64px); height: clamp(34px, 4.5vw, 64px); }
.bg-icon--05 { top: 22%; left:   2%; transform: rotate( 4deg);  animation-delay: -1.5s; }
.bg-icon--06 { top: 36%; left:   3%; transform: rotate(-10deg); animation-delay: -6s;   width: clamp(30px, 4vw, 56px); height: clamp(30px, 4vw, 56px); }
.bg-icon--07 { top: 22%; right:  2%; transform: rotate(-7deg);  animation-delay: -2.5s; }
.bg-icon--08 { top: 36%; right:  3%; transform: rotate( 5deg);  animation-delay: -7s;   width: clamp(30px, 4vw, 56px); height: clamp(30px, 4vw, 56px); }
.bg-icon--09 { bottom: 22%; left:  2%; transform: rotate(8deg);   animation-delay: -4s; }
.bg-icon--10 { bottom: 36%; left:  3%; transform: rotate(-5deg);  animation-delay: -8s;  width: clamp(30px, 4vw, 56px); height: clamp(30px, 4vw, 56px); }
.bg-icon--11 { bottom: 22%; right: 2%; transform: rotate(7deg);   animation-delay: -3s; }
.bg-icon--12 { bottom: 36%; right: 3%; transform: rotate(-9deg);  animation-delay: -5.5s; width: clamp(30px, 4vw, 56px); height: clamp(30px, 4vw, 56px); }
.bg-icon--13 { bottom:  6%; left:  22%; transform: rotate( 4deg); animation-delay: -1s; }
.bg-icon--14 { bottom:  4%; left:  44%; transform: rotate(-6deg); animation-delay: -4.5s; width: clamp(34px, 4.5vw, 64px); height: clamp(34px, 4.5vw, 64px); }
.bg-icon--15 { bottom:  6%; left:  68%; transform: rotate( 8deg); animation-delay: -2.5s; }

/* Hide most icons on phones to keep the layout clean. */
@media (max-width: 720px) {
  .bg-icon--02,
  .bg-icon--03,
  .bg-icon--04,
  .bg-icon--06,
  .bg-icon--08,
  .bg-icon--10,
  .bg-icon--12,
  .bg-icon--14 { display: none; }
  .bg-icon { width: 32px; height: 32px; }
}

/* Feedback page: long, text-rich. The scattered icons drift into reading
   space because .bg-art stretches to body height. Hide them — the four
   bigger video bg clips still carry decoration. */
.page-feedback .bg-icon { display: none; }

/* Same logic for the bottom-right ball clip — it sits in the same band
   as the bottom paragraph on a long page. */
.page-feedback .bg-art__clip--ball {
  width: clamp(100px, 11vw, 160px);
  bottom: clamp(-30px, -1vw, -8px);
  right: clamp(-25px, -1vw, -8px);
  opacity: 0.85;
}

/* ----- Reels grid ----- */
.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--reel-gap);
  align-items: stretch;
  position: relative;
  z-index: 2;
}

@media (max-width: 880px) {
  .reels {
    grid-template-columns: repeat(2, 1fr);
  }
  .reels .reel:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--reel-gap) / 2);
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .reels {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .reels .reel:last-child {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }
}

/* ----- Individual reel card ----- */
.reel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-deep);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 14px 36px rgba(0, 0, 0, 0.32);
  transition:
    transform 420ms var(--ease),
    box-shadow 420ms var(--ease);
  will-change: transform;
}

.reel:hover,
.reel:focus-within {
  transform: translateY(-4px) scale(1.012);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.24),
    0 24px 56px rgba(0, 0, 0, 0.44);
}

.reel__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--color-bg-deep);
  overflow: hidden;
}

.reel__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .reel { transition: none; }
}

/* ============================================================
   Top-right nav (Home / Feedback)
   Sits absolutely so the centered logo layout stays intact.
   ============================================================ */
.site-nav {
  position: fixed;
  top: clamp(16px, 2.4vw, 28px);
  right: clamp(16px, 2.4vw, 28px);
  z-index: 50;
  display: flex;
  gap: 8px;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background-color 220ms var(--ease),
    color 220ms var(--ease),
    border-color 220ms var(--ease),
    transform 220ms var(--ease);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  outline: none;
  transform: translateY(-1px);
}

.site-nav__link[aria-current="page"] {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

@media (max-width: 480px) {
  .site-nav__link {
    padding: 8px 14px;
  }
}

/* ============================================================
   Feedback page
   ============================================================ */
.feedback-intro {
  max-width: 760px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  text-align: center;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  color: var(--color-ink-soft);
}

.feedback-intro__heading {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  font-size: var(--fs-h2);
  margin-bottom: 0.4em;
  line-height: 1.05;
}

.video-stack {
  display: grid;
  /* Larger row-gap because each slot now carries a title + body copy below the video */
  gap: clamp(48px, 6vw, 88px);
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
}

.video-slot {
  position: relative;
  margin: 0;            /* override default <figure> margin */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.video-slot__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;     /* 1920×1080 container, fluid down */
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 14px 36px rgba(0, 0, 0, 0.32);
}

.video-slot__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  outline: none;
}

.video-slot__caption {
  font-family: var(--font-display);   /* Swell — title typeface */
  font-weight: 400;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  margin-top: 6px;
  padding-left: 2px;
}

.video-slot__note {
  font-family: var(--font-text);      /* Lufga */
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-ink);
  max-width: 68ch;                    /* keep prose at a comfortable width */
  margin: 0;
  padding-left: 2px;
  opacity: 0.92;
}