/* ==============================
   Global reset / base
   ============================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ==============================
   Scene layers
   ============================== */
.scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.logo {
  position: absolute;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  height: clamp(120px, 20vh, 260px);
  width: auto;
  z-index: 5;
}

.kangaroo {
  position: absolute;
  display: none;
  pointer-events: none;
  user-select: none;
  z-index: 1; /* BELOW UI */
}

/* Stronger sky gradient */
.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #2f66ff 0%,
    #4f8fff 25%,
    #9fd4ff 55%,
    #eaf6ff 75%,
    #fff2d6 100%
  );
  z-index: 0;
}

/* Clouds layer (overscanned so clouds can be above the top) */
.clouds {
  position: absolute;
  inset: -22% 0 0 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* One cloud instance */
.cloud {
  position: absolute;
  width: var(--w);
  top: var(--top);
  opacity: var(--op);

  transform: translateX(-40vw) scale(var(--scale));
  will-change: transform, filter;
  animation: drift var(--dur) linear infinite;

  filter:
    blur(var(--blur))
    drop-shadow(0 10px 18px rgba(255,255,255,0.22));

  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(circle, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
  -webkit-mask-size: 120% 120%;
          mask-size: 120% 120%;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

@keyframes drift {
  from { transform: translateX(-40vw) scale(var(--scale)); }
  to   { transform: translateX(140vw) scale(var(--scale)); }
}

/* Optional haze to blend clouds */
.haze {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(255,255,255,0.20) 0%,
    rgba(255,255,255,0.00) 55%
  );
  mix-blend-mode: screen;
}

/* Landscape image fills the screen */
.landscape {
  position: absolute;
  inset: 0;
  background-image: url("foreground.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; }
}

/* ==============================
   Image Buttons (About + Library)
   ============================== */
:root{
  --ctaW: min(520px, 92vw);
  --ctaGap: 14px;
  --ctaBottom: clamp(24px, 6vh, 60px);
}

/* Stack wrapper */
.cta-stack{
  position: fixed;
  left: 50%;
  bottom: var(--ctaBottom);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ctaGap);
  z-index: 1000;
}

/* Button reset */
.img-btn{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

/* Images */
.img-btn img{
  width: var(--ctaW);
  height: auto;
  display: block;

  border-radius: 25%;
  opacity: 0.85;
  backdrop-filter: blur(4px);

  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.48));
  transition:
    transform 180ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}

.img-btn:hover img{
  transform: translateY(-4px);
  filter: drop-shadow(0 24px 44px rgba(0,0,0,0.58));
}

.img-btn:active img{
  transform: translateY(1px) scale(0.99);
}

.img-btn:focus-visible{
  outline: 3px solid rgba(255,255,255,0.72);
  outline-offset: 6px;
  border-radius: 14px;
}

.about-img-btn img{
  width: min(420px, 88vw);
}

@keyframes introGlow {
  0%   { filter: drop-shadow(0 18px 34px rgba(0,0,0,0.48)); }
  45%  { filter: drop-shadow(0 18px 34px rgba(0,0,0,0.48))
                 drop-shadow(0 0 34px rgba(255,255,255,0.28)); }
  100% { filter: drop-shadow(0 18px 34px rgba(0,0,0,0.48)); }
}

.intro-flash img{ animation: introGlow 900ms ease-out 280ms 1; }

@media (max-width: 520px){
  .cta-stack{ gap: 12px; }
}

/* ==============================
   Video Library modal (BLUE)
   ============================== */

.library-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.library-overlay.open{ display: flex; }

.library-modal{
  width: min(980px, 96vw);
  max-height: min(88vh, 780px);

  /* allow arrows to sit outside the filmstrip frame */
  overflow: hidden;          /* ✅ stop spill */
  display: flex;             /* ✅ lets us size sections */
  flex-direction: column;

  border-radius: 40px;

  /* Blue panel style */
  background: #243b6b;
  border: 6px solid #1b4fb2;

  box-shadow:
    0 18px 0 #0b4f8a,
    0 30px 60px rgba(0,0,0,0.45);

  position: relative;
  padding: 32px 28px 26px 28px; /* bottom buffer so video never kisses the edge */
  color: #ffffff;
}

/* When a video is playing, hide the header row to free vertical space */
.library-overlay.is-playing .library-header-row{
  display: none;
}

/* Tighten spacing once header is gone */
.library-overlay.is-playing .strip-wrap{
  margin-top: 0;
}

/* Close button */
.library-modal .library-close{
  position: absolute;
  top: 14px;
  right: 16px;
  background: #073763;
  color: white;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 16px;
}

/* Header (re-used markup from About) */
.library-modal .library-header{
  padding: 0;
  text-align: center;
}

.library-modal .library-header h2{
  display: inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  background: #3B43AD;
  color: #ffffff;
  font-weight: 800;
  font-size: 22px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.22);
  margin-bottom: 6px;
}

.library-modal .library-header p{
  margin-top: 6px;
  font-size: 14px;
  opacity: 0.9;
}

/* Filmstrip wrapper (acts like the inner "card") */
.strip-wrap{
  position: relative;
  margin-top: 14px;
  padding: 16px 18px 18px 18px;
  border-radius: 24px;

  background: #2D2E2E;
  border: #B0C7EE;
  box-shadow: inset 0 4px 10px rgba(255,255,255,0.18);

  /* allow nav buttons to sit outside this card */
  overflow: visible;         /* ✅ arrows can sit outside the strip card */
}

.filmstrip{
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 180px;
  gap: 14px;
    background: #2D2E2E;   /* ← SET IT HERE */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;

  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);

  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scrollbar-width: thin;
  cursor: grab;
}

.filmstrip.is-dragging{ cursor: grabbing; }

.filmstrip::-webkit-scrollbar { height: 10px; }
.filmstrip::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.28);
  border-radius: 999px;
}

.thumb{
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  cursor: pointer;
  user-select: none;
  transform: translateZ(0);
}

.thumb img{
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.thumb .cap{
  padding: 10px 10px 12px 10px;
  font-size: 13px;
  line-height: 1.2;
  opacity: 0.95;
}

.thumb:hover{ border-color: rgba(255,255,255,0.40); }

.thumb.is-selected{
  border-color: rgba(255,255,255,0.65);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18) inset;
}

/* Arrow buttons (outside the card for visibility) */
.strip-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;

  width: 56px;
  height: 56px;
  border-radius: 999px;

  border: 3px solid #052a4e;
  background: #1b4fb2;
  color: #ffffff;

  font-size: 40px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 10px 0 rgba(0,0,0,0.18),
    0 18px 28px rgba(0,0,0,0.25);

  opacity: 1;
  transition: transform 120ms ease, filter 120ms ease, opacity 150ms ease;
}

/* push outside the strip card */
.strip-nav.prev{ left: -34px; }
.strip-nav.next{ right: -34px; }

.strip-nav:hover{ filter: brightness(1.06); }

.strip-nav:active{ transform: translateY(-50%) scale(0.96); }

.strip-nav:disabled{
  opacity: 0.35;
  cursor: default;
  filter: grayscale(0.25);
}

@media (max-width: 640px){
  .strip-nav{
    width: 46px;
    height: 46px;
    font-size: 34px;
  }
  .strip-nav.prev{ left: -26px; }
  .strip-nav.next{ right: -26px; }
}

/* Edge fades */
.strip-fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 150ms ease;
}

/* Player */
.player{
  padding: 16px 18px 22px 18px; /* bottom buffer */
}

.player-media iframe,
.player-media video{
  width: 100%;
  max-height: 48vh; /* more breathing room so bottom of video is visible */
  border-radius: 16px;
  background: black;
  display: block;
}

.player-media iframe{ height: 48vh; }

.player-title{
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.95;
}

/* ==============================
   About modal (Orange Panel Style)
   ============================== */

.about-overlay{
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(0,0,0,0.35);
}

.about-overlay.open{ display: flex; }

.about-modal{
  width: min(820px, 94vw);
  max-height: 85vh;
  overflow: auto;
  border-radius: 40px;

  background: linear-gradient(to bottom, #ffb347, #f59e1a);
  border: 6px solid #8c3f00;

  box-shadow:
    0 18px 0 #c86a00,
    0 30px 60px rgba(0,0,0,0.45);

  position: relative;
  padding: 32px 28px 28px 28px;
  color: #3b1d00;
}

/* Close button */
.about-modal .library-close{
  position: absolute;
  top: 14px;
  right: 16px;
  background: #8c3f00;
  color: white;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 16px;
}

/* ==============================
   Header row with characters (GRID)
   ============================== */

.about-header-row{
  display: grid;
  grid-template-columns: 140px 1fr 140px; /* left | center | right */
  align-items: center;
  column-gap: 20px;
  margin-bottom: 18px;
}

.header-left{ grid-column: 1; justify-self: center; }
.about-header-row .library-header{ grid-column: 2; text-align: center; margin: 0; }
.header-right{ grid-column: 3; justify-self: center; }

/* Header pill */
.about-modal .library-header h2{
  display: inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  background: #ff8c00;
  color: white;
  font-weight: 800;
  font-size: 22px;
  box-shadow: 0 6px 0 #c86a00;
}



/* Subtitle */
.about-modal .library-header p{
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.8;
}

.about-figure{
  width: 130px;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 6px 0 rgba(140,63,0,0.18));
}

@media (max-width: 820px){
  .about-header-row{
    grid-template-columns: 1fr;
    row-gap: 12px;
    text-align: center;
  }

  .header-left,
  .header-right{
    grid-column: auto;
  }

  .about-figure{ width: 105px; }
}

/* ==============================
   Body + Contact card
   ============================== */

.about-body{
  font-size: 16px;
  line-height: 1.6;
  margin-top: 6px;
}

.about-card{
  margin-top: 20px;
  padding: 18px;
  border-radius: 24px;

  background: linear-gradient(to bottom, #ffe3b0, #ffd089);
  border: 4px solid #d17800;

  box-shadow: inset 0 4px 10px rgba(255,255,255,0.4);
}

.about-card-title{
  font-weight: 800;
  margin-bottom: 8px;
  font-size: 18px;
}

.about-card-line a{
  color: #8c3f00;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about-card-line.subtle{
  font-size: 13px;
  margin-top: 6px;
  opacity: 0.8;
}