/* =========================================================
   LANDING — Loader · Hero · Cursor Micro-Text
   ========================================================= */

/* ---- Stars canvas ---- */
#starsCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---- Couple scene overlay ---- */
.couple-scene {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Starts visible, then slides out downward after load */
  transform: translateY(0);
  transition: transform 5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
              opacity 4.5s ease 0.3s;
}
body.loaded .couple-scene {
  transform: translateY(100vh);
  opacity: 0;
}
.couple-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---- Birds canvas ---- */
#planeCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#planeCanvas.visible {
  opacity: 1;
}

/* ---- Floating Clouds ---- */
@keyframes cloud-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }

.clouds-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  /* Clouds drift in from above */
  transform: translateY(-160px);
  opacity: 0;
  transition: transform 3.5s cubic-bezier(0.22, 1, 0.36, 1) 2s,
              opacity 3s ease 2s;
}
body.loaded .clouds-layer {
  transform: translateY(0);
  opacity: 1;
}

/* Outer: holds fixed position + JS parallax transform */
.cloud {
  position: absolute;
  will-change: transform;
}

/* Inner: handles bob animation only */
.cloud-inner {
  position: relative;
  width: 100%;
}

.cloud-inner img {
  display: block;
  width: 100%;
}

.cloud-text {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: 'Abril Fatface', serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: rgba(25, 30, 45, 0.88);
  letter-spacing: 0.04em;
  text-align: center;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 6px rgba(255,255,255,0.6);
}

/* Each cloud: bigger, all within viewport, no text overlap */
.cloud--1 { width: 420px; top: 4%;  left: 1%;  opacity: 1; }
.cloud--1 .cloud-inner { animation: cloud-bob 9s  ease-in-out infinite; }

.cloud--2 { width: 500px; top: 40%; left: 38%; opacity: 0.70; }
.cloud--2 .cloud-inner { animation: cloud-bob 11s ease-in-out infinite 1.5s; }

.cloud--3 { width: 300px; top: 53%; left: 2%;  opacity: 1; }
.cloud--3 .cloud-inner { animation: cloud-bob 13s ease-in-out infinite 3s; }

.cloud--4 { width: 400px; top: 6%;  left: 62%; opacity: 0.62; }
.cloud--4 .cloud-inner { animation: cloud-bob 8s  ease-in-out infinite 0.8s; }

.cloud--6 { width: 320px; top: 48%; left: 64%; opacity: 0.68; }
.cloud--6 .cloud-inner { animation: cloud-bob 10s ease-in-out infinite 4s; }

.cloud--7 { width: 430px; top: 20%; left: 68%; opacity: 0.65; }
.cloud--7 .cloud-inner { animation: cloud-bob 14s ease-in-out infinite 1s; }

.cloud--8 { width: 500px; top: 12%; left: 28%; opacity: 0.78; }
.cloud--8 .cloud-inner { animation: cloud-bob 9s  ease-in-out infinite 2.5s; }

body.landing {
  overflow: hidden;
  height: 100vh;
  background: #080808;
  cursor: none;
}

body.landing a,
body.landing button {
  cursor: none;
}

/* Restore normal cursor in navbar and footer */
body.landing .site-header,
body.landing .site-header a,
body.landing .landing-contact,
body.landing .landing-contact a,
body.landing .landing-contact span {
  cursor: auto;
}

body.landing .site-header a:hover,
body.landing .landing-contact a:hover {
  cursor: pointer;
}

/* ----- CUSTOM CURSOR ---------------------------------------- */

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(12px, 12px) scale(0.8);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 22px;
  background: rgba(8, 8, 8, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

.custom-cursor.visible {
  opacity: 1;
  transform: translate(12px, 12px) scale(1);
}

.custom-cursor.on-link {
  opacity: 0;
  transform: translate(12px, 12px) scale(0.7);
}

.custom-cursor-dot {
  width: 8px;
  height: 8px;
  background: #d63a2a;
  border-radius: 50%;
  flex-shrink: 0;
  animation: cursor-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes cursor-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 58, 42, 0.6); }
  50%       { box-shadow: 0 0 0 5px rgba(214, 58, 42, 0); }
}

.custom-cursor-text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

/* Small trailing dot — follows cursor instantly */
.cursor-dot-small {
  position: fixed;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cursor-dot-small.visible {
  opacity: 0.8;
}

/* Hide cursor during loading */
body:not(.loaded) .custom-cursor,
body:not(.loaded) .cursor-dot-small {
  display: none;
}

/* Hide custom cursor when over navbar or footer */
body.landing:has(.site-header:hover) .custom-cursor,
body.landing:has(.site-header:hover) .cursor-dot-small,
body.landing:has(.landing-contact:hover) .custom-cursor,
body.landing:has(.landing-contact:hover) .cursor-dot-small {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.15) !important;
}

@media (hover: none) {
  .custom-cursor,
  .cursor-dot-small { display: none; }
  body.landing { cursor: auto; }
  body.landing a, body.landing button { cursor: auto; }
}

/* Once loaded — still no scroll on landing */
body.landing.loaded {
  overflow: hidden;
}

/* ----- FULL-SCREEN BACKGROUND VIDEO -------------------------------- */

.bg-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  cursor: default;
  transform: translateY(-60px);
  transition: transform 4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
body.loaded .bg-video {
  transform: translateY(0);
}

.bg-video video,
.bg-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  image-rendering: high-quality;
}

/* Dark gradient overlay so text stays readable */
.bg-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.52) 0%,
      rgba(0,0,0,0.25) 40%,
      rgba(0,0,0,0.30) 70%,
      rgba(0,0,0,0.70) 100%);
  pointer-events: none;
}

/* ----- CENTRE TITLE ----------------------------------------- */

.landing-title {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.landing-eyebrow {
  font-size: 11px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 20px;
}

.landing-name {
  position: relative;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(52px, 10vw, 130px);
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1;
  margin: 0;
}

/* Typing cursor blink */
.landing-name.typing::after {
  content: '|';
  display: inline-block;
  color: rgba(255,255,255,0.7);
  animation: blink .7s step-end infinite;
  margin-left: 4px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Glitch layers */
.landing-name.glitch::before,
.landing-name.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.landing-name.glitch::before {
  color: #ff2d55;
  animation: glitch-top 4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
}

.landing-name.glitch::after {
  color: #00e5ff;
  animation: glitch-bottom 4s infinite;
  clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
}

/* Per-letter glitch flash as each letter types in */
.landing-name.letter-flash { animation: letter-shake 0.18s steps(1) forwards; }
.landing-name.letter-flash::before {
  transform: translate(-14px, -5px) skewX(-10deg);
  opacity: 1 !important;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.landing-name.letter-flash::after {
  transform: translate(14px, 5px) skewX(10deg);
  opacity: 1 !important;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes letter-shake {
  0%   { transform: translate(-4px, 0) skewX(-3deg); }
  25%  { transform: translate( 5px, 0) skewX( 4deg); }
  50%  { transform: translate(-3px, 1px) skewX(-2deg); }
  75%  { transform: translate( 3px,-1px) skewX( 3deg); }
  100% { transform: none; }
}

@keyframes glitch-top {
  0%,  78%        { transform: none; opacity: 0; }
  79%             { transform: translate(-10px, -4px) skewX(-6deg); opacity: 1; }
  80%             { transform: translate( 12px,  2px) skewX( 8deg); opacity: 0.9; }
  81%             { transform: translate(-6px,   3px) skewX(-3deg); opacity: 1; }
  82%             { transform: translate( 8px,  -2px) skewX( 5deg); opacity: 0.85; }
  83%             { transform: none; opacity: 0; }
  84%             { transform: translate(-14px,  4px) skewX(-8deg); opacity: 1; }
  85%             { transform: translate(  6px, -3px) skewX( 4deg); opacity: 0.9; }
  86%,  93%       { transform: none; opacity: 0; }
  94%             { transform: translate(-8px, -2px) skewX(-5deg); opacity: 1; }
  95%             { transform: translate( 10px, 3px) skewX( 6deg); opacity: 0.9; }
  96%             { transform: none; opacity: 0; }
  97%             { transform: translate(-12px, 2px) skewX(-7deg); opacity: 1; }
  98%             { transform: translate(  5px,-4px) skewX( 3deg); opacity: 0.85; }
  99%, 100%       { transform: none; opacity: 0; }
}

@keyframes glitch-bottom {
  0%,  78%        { transform: none; opacity: 0; }
  79%             { transform: translate( 12px,  3px) skewX( 7deg); opacity: 1; }
  80%             { transform: translate(-10px, -4px) skewX(-6deg); opacity: 0.9; }
  81%             { transform: translate(  7px,  2px) skewX( 4deg); opacity: 1; }
  82%             { transform: translate(-12px, -1px) skewX(-8deg); opacity: 0.85; }
  83%             { transform: none; opacity: 0; }
  84%             { transform: translate( 10px, -3px) skewX( 5deg); opacity: 1; }
  85%             { transform: translate( -6px,  4px) skewX(-4deg); opacity: 0.9; }
  86%,  93%       { transform: none; opacity: 0; }
  94%             { transform: translate( 9px,  3px) skewX( 6deg); opacity: 1; }
  95%             { transform: translate(-11px, -2px) skewX(-7deg); opacity: 0.9; }
  96%             { transform: none; opacity: 0; }
  97%             { transform: translate( 13px, -3px) skewX( 8deg); opacity: 1; }
  98%             { transform: translate( -5px,  2px) skewX(-3deg); opacity: 0.85; }
  99%, 100%       { transform: none; opacity: 0; }
}

/* Main text shake during glitch burst */
@keyframes glitch-shake {
  0%,  78%  { transform: none; }
  79%        { transform: translate(-3px, 0); }
  80%        { transform: translate( 3px, 0); }
  81%        { transform: translate(-2px, 1px); }
  82%        { transform: translate( 2px,-1px); }
  83%,  93%  { transform: none; }
  94%        { transform: translate(-2px, 0); }
  95%        { transform: translate( 2px, 0); }
  96%, 100%  { transform: none; }
}

.landing-name.glitch { animation: glitch-shake 4s infinite; }

.landing-sub {
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* ----- FLUID CANVAS ----------------------------------------- */

#fluidCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}


/* ----- SHOWREEL MODAL (matches subpage vid-modal) ---------- */

.vid-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 5000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vid-modal.open { display: flex; }
.vid-modal-inner {
  position: relative;
  width: 100%;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
}
.vid-modal-inner.wide  { max-width: 1100px; }
.vid-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.vid-modal-title {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.vid-modal-close {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  background: none;
  border: none;
  transition: color .2s ease;
}
.vid-modal-close:hover { color: #fff; }
.vid-modal-body {
  position: relative;
  width: 100%;
  background: #000;
}
.vid-modal-body.ratio-16-9 { aspect-ratio: 16/9; }
.vid-modal-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ----- SHOWREEL BUTTON ------------------------------------- */

.showreel-btn {
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 28px;
  background: rgba(8, 8, 8, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  backdrop-filter: blur(8px);
}

.showreel-btn:hover {
  background: rgba(20, 20, 20, 0.92);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.showreel-dot {
  width: 8px;
  height: 8px;
  background: #d63a2a;
  border-radius: 50%;
  flex-shrink: 0;
  animation: showreel-pulse 1.6s ease-in-out infinite;
}

@keyframes showreel-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 58, 42, 0.55); }
  50%       { box-shadow: 0 0 0 5px rgba(214, 58, 42, 0); }
}

/* ----- MESSAGE REEL (SVG stroke animation) ------------------ */

.message-reel {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.message-svg {
  width: min(860px, 88vw);
  height: auto;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.message-svg text {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 72px;
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 1;
  stroke-dasharray: 0 50%;
  stroke-dashoffset: 25%;
  animation: stroke-draw 5s ease forwards;
}

@keyframes stroke-draw {
  0% {
    fill: rgba(255, 255, 255, 0);
    stroke: rgba(255, 255, 255, 1);
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    stroke-width: 1;
  }
  70% {
    fill: rgba(255, 255, 255, 0);
    stroke: rgba(255, 255, 255, 1);
  }
  80% {
    fill: rgba(255, 255, 255, 0);
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 2;
  }
  100% {
    fill: rgba(255, 255, 255, 1);
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
  }
}

/* ----- BOTTOM CONTACT BAR ----------------------------------- */

.landing-contact {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  border-top: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px) saturate(120%);
  background: rgba(0,0,0,0.35);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
  gap: 12px;
}

.landing-contact a {
  color: rgba(255,255,255,0.75);
  transition: color .3s ease;
}

.landing-contact a:hover { color: #ffffff; opacity: 1; }

.lc-label {
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-right: 10px;
}

.lc-sep {
  margin: 0 8px;
  color: rgba(255,255,255,0.2);
}

.lc-center { text-align: center; }
.lc-right { display: flex; align-items: center; }

@media (max-width: 720px) {
  .landing-contact {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px;
  }
  .lc-center, .lc-right { text-align: left; }
}

/* Override navbar for full-screen landing — always transparent, text white */
body.landing .site-header {
  z-index: 4;
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

body.landing .site-header .brand-mark,
body.landing .site-header .site-nav a {
  color: rgba(255,255,255,0.85);
}

body.landing .site-header .brand-mark:hover,
body.landing .site-header .site-nav a:hover {
  color: #ffffff;
  opacity: 1;
}

/* ----- LOADER (cat watching ball on progress bar) -------------------------------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #f4f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}

body.loaded .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Scene wrapper */
.loader-scene {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The SVG holds the entire illustration — cat + bar + ball */
.cat-scene {
  width: min(480px, 90vw);
  height: auto;
  overflow: visible;
}

/* Ball rolls left → right across the bar */
.loader-ball {
  animation: ball-roll 2.6s var(--ease) forwards;
}

@keyframes ball-roll {
  0%   { cx: 39px;  cy: 259px; }
  100% { cx: 461px; cy: 259px; }
}

/* Pupils slide left → right in sync with the ball
   cx is animated as an SVG geometry property so it stays
   in SVG user-units regardless of the rendered scale      */
.cat-eyes circle:nth-child(1) { animation: pupil-l 2.6s var(--ease) forwards; }
.cat-eyes circle:nth-child(2) { animation: pupil-r 2.6s var(--ease) forwards; }
.cat-eyes circle:nth-child(3) { animation: shine-l 2.6s var(--ease) forwards; }
.cat-eyes circle:nth-child(4) { animation: shine-r 2.6s var(--ease) forwards; }

/* Left pupil: cx 302 → 310  (center 306 ± 4) */
@keyframes pupil-l {
  0%   { cx: 302px; }
  100% { cx: 310px; }
}
/* Right pupil: cx 336 → 344  (center 340 ± 4) */
@keyframes pupil-r {
  0%   { cx: 336px; }
  100% { cx: 344px; }
}
/* Left shine */
@keyframes shine-l {
  0%   { cx: 304px; }
  100% { cx: 312px; }
}
/* Right shine */
@keyframes shine-r {
  0%   { cx: 338px; }
  100% { cx: 346px; }
}

/* Label */
.loader .label {
  font-size: 14px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #999999;
}

/* ----- HERO ------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px var(--gutter) 80px;
  text-align: center;
}

.hero .hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 32px;
}

.hero-video {
  position: relative;
  width: min(880px, 92vw);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-strong);
  background: #050505;
  overflow: hidden;
  cursor: none;
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(0.85) contrast(1.05);
  transition: filter .8s var(--ease);
}

.hero-video:hover video {
  filter: grayscale(0%) brightness(1) contrast(1);
}

.hero-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-video .start-label {
  position: absolute;
  bottom: 24px; left: 28px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.hero-video .start-label::after {
  content: '';
  width: 36px;
  height: 1px;
  background: #fff;
  display: inline-block;
  transition: width .5s var(--ease-out), background-color .5s var(--ease-out);
}

.hero-video:hover .start-label::after {
  width: 72px;
  background: var(--color-primary);
}

.hero-video .frame-tag {
  position: absolute;
  top: 18px; right: 22px;
  z-index: 2;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-video .frame-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--color-tertiary);
  box-shadow: 0 0 10px var(--color-tertiary);
  border-radius: 50%;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Cursor micro-text */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 80;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width .35s var(--ease), height .35s var(--ease), opacity .3s var(--ease);
  opacity: 0;
}

.cursor-text {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 81;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--color-primary);
  padding: 8px 14px;
  border-radius: 999px;
  transform: translate(-50%, -160%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  white-space: nowrap;
  box-shadow: 0 6px 24px var(--primary-soft);
}

body.has-cursor .cursor-dot { opacity: 1; }
body.cursor-active .cursor-dot { width: 60px; height: 60px; mix-blend-mode: difference; }
body.cursor-active .cursor-text { opacity: 1; }

@media (hover: none) {
  .cursor-dot, .cursor-text { display: none; }
  .hero-video { cursor: pointer; }
}

/* ----- EXPLORE NAV CARDS ----------------------------------- */

.explore {
  padding: 120px var(--gutter) 60px;
  max-width: var(--container);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.explore-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 60px;
}

.explore-head h2 {
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 200;
  letter-spacing: -0.03em;
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
  .explore-grid { grid-template-columns: 1fr; }
}

/* ----- CARD BACKGROUND IMAGE -------------------------------- */

.card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .6s var(--ease);
  filter: grayscale(60%) brightness(0.45);
  z-index: 0;
}

.explore-card:hover .card-bg { opacity: 1; }

.explore-card .num,
.explore-card .name,
.explore-card .desc,
.explore-card .arrow { position: relative; z-index: 1; }

.explore-card {
  position: relative;
  display: block;
  padding: 50px 40px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: background .5s var(--ease);
}

.explore-grid .explore-card:last-child { border-right: 0; }

@media (max-width: 720px) {
  .explore-card { border-right: 0; }
}

.explore-card:hover { background: #292828; opacity: 1; }
.explore-card:hover .name {color: var(--color-general); transition: color .4s var(--ease); }
.explore-card:hover .desc {color: var(--color-text); transition: color .4s var(--ease); }

.explore-card .num {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-mute);
}

.explore-card .name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.02em;
  margin-top: 24px;
}

.explore-card .desc {
  margin-top: 12px;
  color: var(--text-soft);
  font-size: 14px;
  max-width: 280px;
}

.explore-card .arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color .35s var(--ease), transform .5s var(--ease-out);
}

.explore-card .arrow span { display: inline-block; transition: transform .5s var(--ease-out); }
.explore-card:hover .arrow { color: var(--color-secondary); }
.explore-card:hover .arrow span { transform: translateX(8px); }

/* Marquee strip — adds a cinematic touch between sections */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 22px 0;
  margin-top: 80px;
}

.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(18px, 2.5vw, 28px);
  letter-spacing: 0.02em;
  color: var(--text-soft);
}

.marquee-track span { display: inline-flex; align-items: center; gap: 60px; }
.marquee-track .star { color: var(--color-tertiary); font-size: 14px; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Full-screen overlay */
.loader {
  position: fixed;
  inset: 0;
  background: #c9921a url('../image/bg-landing.png') center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  z-index: 999;
  transition: opacity .8s ease, visibility .8s ease;
}

body.loaded .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The cat image */
.loader-cat {
  width: 320px;
  margin-bottom: -113px;
  margin-right: 40px;
}

/* Progress bar (the dark pill) */
.loader-bar {
  position: relative;
  width: 320px;        /* same width as image */
  height: 28px;
  background: #1c1c1c;
  border-radius: 999px;
  overflow: hidden;
}

/* The rolling ball inside the bar — position controlled by JS */
.loader-ball {
  position: absolute;
  width: 26px;
  height: 26px;
  background: #ffffff;
  border-radius: 50%;
  top: 1px;
  left: 1px;
  animation: none;
  transition: left 0.1s linear;
}

@keyframes ball-roll {
  0%   { left: 1px; }
  100% { left: calc(100% - 27px); }
}

/* Percentage counter below bar */
.loader-percent {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #1c1c1c;
  text-align: center;
  width: 320px;
}

/* "Loading the reel" text */
.loader .label {
  margin-top: 16px;
  font-size: 14px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #1c1c1c;
}

/* ----- PHOTO STRIP ----------------------------------------- */

.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

@media (max-width: 720px) {
  .photo-strip { grid-template-columns: 1fr; }
}

.strip-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-right: 1px solid var(--line);
}

.strip-item:last-child { border-right: 0; }

@media (max-width: 720px) {
  .strip-item { border-right: 0; border-bottom: 1px solid var(--line); aspect-ratio: 3 / 2; }
  .strip-item:last-child { border-bottom: 0; }
}

.strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%) brightness(0.9) contrast(1.05);
  transition: filter .8s var(--ease), transform .8s var(--ease);
  display: block;
}

.strip-item:hover img {
  filter: grayscale(0%) brightness(1) contrast(1);
  transform: scale(1.04);
}
/* =========================================================
   NAV BADGE — drops from the top of the page
   ========================================================= */

/* Allow the badge to extend above the nav item */
.landing .site-header,
.landing .site-nav {
  overflow: visible;
}

.landing .site-nav a {
  padding: 6px 16px;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* The badge: extends from top of page downward, surrounds the nav text */
.landing .site-nav a::before {
  content: '';
  position: absolute;
  /* Reach all the way to the top of the viewport from the nav item */
  top: -60px;
  left: 0;
  right: 0;
  bottom: -10px;
  background: rgba(120, 40, 200, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 0 0 5px 5px;

  /* Sit behind the text */
  z-index: -1;

  /* Reveal from top → bottom */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.landing .site-nav a:hover::before {
  clip-path: inset(0 0 0% 0);
}

/* Hide the old underline — badge replaces it */
.landing .site-nav a::after {
  display: none;
}

/* ── Doodle camera overlays ── */
.doodle-cameras {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.doodle-cam {
  position: fixed;
  top: 50%;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

.doodle-cam--1 { width: 280px; }
.doodle-cam--2 { width: 200px; }
.doodle-cam--3 { width: 140px; }
.doodle-cam--4 { width: 180px; }
.doodle-cam--5 { width: 300px; }

/* =========================================================
   MOBILE RESPONSIVE — landing page
   ========================================================= */

@media (max-width: 768px) {

  /* --- Header nav --- */
  body.landing .site-header {
    padding: 16px 20px;
  }

  .brand-mark {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .site-nav {
    gap: 12px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  /* All 7 clouds — staggered left/right, no overlaps */
  .cloud--1 { width: 200px !important; top: 3%  !important; left: 0%  !important; }
  .cloud--4 { width: 165px !important; top: 5%  !important; left: 53% !important; }
  .cloud--8 { width: 250px !important; top: 26% !important; left: 8%  !important; }
  .cloud--3 { width: 155px !important; top: 45% !important; left: 3%  !important; }
  .cloud--2 { width: 195px !important; top: 47% !important; left: 48% !important; }
  .cloud--7 { width: 220px !important; top: 65% !important; left: 5%  !important; }
  .cloud--6 { width: 155px !important; top: 79% !important; left: 45% !important; }

  /* Cloud text slightly smaller */
  .cloud-text {
    font-size: 0.85rem !important;
    white-space: nowrap;
  }

  /* --- Contact bar --- */
  .landing-contact {
    padding: 14px 20px;
    font-size: 11px;
    gap: 6px;
  }

  .lc-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-right: 6px;
  }

  /* --- Doodle cameras — hide on mobile --- */
  .doodle-cameras { display: none; }

  /* --- Custom cursor — hide on touch --- */
  .custom-cursor,
  .cursor-dot-small { display: none !important; }

  /* --- Showreel modal --- */
  .vid-modal-inner.wide {
    max-width: 100%;
  }
  .vid-modal {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .site-nav {
    gap: 8px;
    font-size: 9px;
  }

  .brand-mark {
    font-size: 9px;
  }
}