/* ==========================================================================
   Lazy Kiwi — page layout
   Tokens and reusable components come from kiwi-ui.css.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--kiwi-font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; }
a { color: var(--kiwi-gold-light); }

:focus-visible {
  outline: 2px solid var(--kiwi-gold-light);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(var(--kiwi-wrap), 100% - (var(--kiwi-gutter) * 2));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--kiwi-panel-2);
  color: var(--kiwi-cream);
}
.skip:focus { left: 12px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px 0;
  transition: padding .3s var(--kiwi-ease), background-color .3s, box-shadow .3s, backdrop-filter .3s;
}

.site-head::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s var(--kiwi-ease);
  background: linear-gradient(180deg, rgb(16 18 11 / 88%), rgb(16 18 11 / 62%));
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--kiwi-line);
}

.site-head.is-stuck { padding: 8px 0; }
.site-head.is-stuck::before { opacity: 1; }

.head-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--kiwi-cream);
  font-family: var(--kiwi-display);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 45%));
  transition: transform .35s var(--kiwi-ease);
}
.brand:hover img { transform: rotate(-8deg) scale(1.08); }

.site-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--kiwi-muted);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, background-color .2s;
}

.site-nav a:hover { color: var(--kiwi-cream); background: rgb(245 201 95 / 8%); }

.site-nav a.is-active {
  color: #1c1a10;
  background: linear-gradient(180deg, var(--kiwi-gold-light), var(--kiwi-gold));
  font-weight: 600;
  box-shadow: 0 4px 14px rgb(213 154 55 / 26%);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(760px, 88vh);
  margin-top: -76px;
  padding: 150px 0 96px;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: -12% 0 -6%;
  z-index: -3;
  background-image: url("../img/bg-tiny.jpg");
  background-size: cover;
  background-position: 50% 66%;
  transform: translate3d(0, var(--par, 0px), 0) scale(1.06);
  will-change: transform;
}

.hero-bg.is-loaded { background-image: url("../img/bg.jpg"); }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgb(13 15 9 / 92%) 2%, rgb(13 15 9 / 70%) 46%, rgb(13 15 9 / 26%) 82%),
    linear-gradient(180deg, rgb(13 15 9 / 62%) 0%, transparent 26%, rgb(16 18 11 / 90%) 86%, var(--kiwi-bg) 100%);
}

.hero-inner { position: relative; max-width: 640px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 7px 15px 7px 9px;
  border: 1px solid var(--kiwi-line);
  border-radius: 999px;
  background: rgb(20 22 14 / 62%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--kiwi-muted);
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.eyebrow img { width: 22px; height: 22px; object-fit: contain; }

.hero h1 {
  margin: 0 0 18px;
  font-family: var(--kiwi-display);
  font-size: clamp(3.1rem, 11vw, 6.2rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--kiwi-cream);
  text-shadow: 0 6px 34px rgb(0 0 0 / 55%);
}

.hero h1 .grad {
  background: linear-gradient(168deg, #ffe9a8 6%, var(--kiwi-gold-light) 42%, var(--kiwi-orange) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin: 0 0 30px;
  max-width: 52ch;
  color: #ddd2b6;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  text-shadow: 0 2px 16px rgb(0 0 0 / 55%);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Mascot ------------------------------------------------------------------ */
.hero-mascot {
  position: absolute;
  right: clamp(-20px, 3vw, 80px);
  bottom: 58px;
  z-index: 1;
  width: clamp(170px, 24vw, 280px);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform .5s var(--kiwi-ease);
}

/* Fixed box + contain, so swapping poses never resizes or shifts the kiwi. */
.hero-mascot img {
  display: block;
  width: 100%;
  height: clamp(165px, 22vw, 255px);
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 26px rgb(0 0 0 / 55%));
  animation: bob 5.5s ease-in-out infinite;
}

.hero-mascot:hover img { animation-duration: 2.4s; }
.hero-mascot.is-pop img { animation: pop .5s var(--kiwi-ease); }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-13px) rotate(-1.6deg); }
}

@keyframes pop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-24px) scale(1.07, .94); }
  70%  { transform: translateY(4px) scale(.96, 1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* Speech bubble ----------------------------------------------------------- */
.speech {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 96%;
  width: max-content;
  max-width: min(260px, 46vw);
  padding: 12px 16px;
  border: 1px solid var(--kiwi-line-strong);
  border-radius: 16px 16px 4px 16px;
  background: linear-gradient(180deg, #3d3421, #241f14);
  box-shadow: var(--kiwi-shadow);
  color: var(--kiwi-cream);
  font-size: .88rem;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .28s var(--kiwi-ease), transform .28s var(--kiwi-ease);
}

.speech.is-on { opacity: 1; transform: translateY(0) scale(1); }

/* Drifting feathers ------------------------------------------------------- */
.drift {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.drift img {
  position: absolute;
  top: -80px;
  width: 62px;
  opacity: 0;
  animation: drift linear infinite;
}

@keyframes drift {
  0%   { opacity: 0; transform: translate3d(0, -10vh, 0) rotate(0deg); }
  12%  { opacity: .3; }
  85%  { opacity: .18; }
  100% { opacity: 0; transform: translate3d(90px, 105vh, 0) rotate(220deg); }
}

/* Scroll cue -------------------------------------------------------------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border: 1px solid var(--kiwi-line);
  border-radius: 50%;
  background: rgb(20 22 14 / 55%);
  color: var(--kiwi-gold-light);
  text-decoration: none;
  animation: cue 2.4s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: .65; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { position: relative; padding: clamp(64px, 9vw, 108px) 0; }

.section-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
}

.section-head img {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / 45%));
}

.section-head h2 {
  margin: 0;
  font-family: var(--kiwi-display);
  font-size: clamp(1.85rem, 4.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  background: linear-gradient(170deg, #fff3d4 10%, var(--kiwi-gold-light) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head p { margin: 5px 0 0; color: var(--kiwi-muted); font-size: .98rem; }

/* --------------------------------------------------------------------------
   Link cards
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s var(--kiwi-ease), border-color .3s, box-shadow .3s;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--kiwi-line-strong);
  box-shadow: inset 0 1px rgb(255 255 255 / 9%), var(--kiwi-shadow-lg);
}

.card-art {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 45%));
  transition: transform .4s var(--kiwi-ease);
}

.card:hover .card-art { transform: translateY(-4px) rotate(-5deg) scale(1.07); }

.card-body { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; }

.card-body h3 {
  margin: 0 0 3px;
  font-family: var(--kiwi-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--kiwi-cream);
}

.card-body p {
  margin: 0;
  color: var(--kiwi-muted);
  font-size: .89rem;
  line-height: 1.45;
}

.card-go {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: center;
  color: var(--kiwi-gold);
  font-size: 1.15rem;
  opacity: .5;
  transition: transform .3s var(--kiwi-ease), opacity .3s;
}

.card:hover .card-go { opacity: 1; transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Sounds
   -------------------------------------------------------------------------- */
.sounds { display: grid; gap: 26px; padding: clamp(22px, 4vw, 34px); }

.sounds-top {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.sounds-top img.mascot {
  width: 104px;
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 16px rgb(0 0 0 / 45%));
}

.sounds-copy { flex: 1 1 260px; min-width: 0; }
.sounds-copy h3 {
  margin: 0 0 5px;
  font-family: var(--kiwi-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--kiwi-cream);
}
.sounds-copy p { margin: 0; color: var(--kiwi-muted); font-size: .92rem; }

.tracks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.track {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 15px;
  border: 1px solid var(--kiwi-line);
  border-radius: 14px;
  background: rgb(255 255 255 / 3%);
  color: var(--kiwi-cream);
  font-size: .94rem;
  text-decoration: none;
  transition: transform .25s var(--kiwi-ease), border-color .25s, background-color .25s;
}

.track:hover, .track:focus-visible {
  transform: translateX(4px);
  border-color: var(--kiwi-line-strong);
  background: rgb(245 201 95 / 8%);
}

.track-n {
  flex: 0 0 auto;
  color: var(--kiwi-gold);
  font-family: var(--kiwi-display);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  opacity: .8;
}

.track-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.track img { width: 20px; height: 20px; flex: 0 0 auto; object-fit: contain; opacity: .75; transition: opacity .25s, transform .25s; }
.track:hover img { opacity: 1; transform: translateX(2px); }

/* --------------------------------------------------------------------------
   Projects
   -------------------------------------------------------------------------- */
.projects { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }

.project {
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 36px);
  padding: clamp(20px, 3.4vw, 32px);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s var(--kiwi-ease), border-color .3s, box-shadow .3s;
}

.project:hover, .project:focus-visible {
  transform: translateY(-5px);
  border-color: var(--kiwi-line-strong);
  box-shadow: inset 0 1px rgb(255 255 255 / 9%), var(--kiwi-shadow-lg);
}

.project-art {
  position: relative;
  z-index: 1;
  width: clamp(96px, 15vw, 148px);
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 12px 20px rgb(0 0 0 / 50%));
  transition: transform .4s var(--kiwi-ease);
}
.project:hover .project-art { transform: translateY(-6px) rotate(-4deg); }

.project-body { position: relative; z-index: 1; min-width: 0; }

.project-body h3 {
  margin: 12px 0 7px;
  font-family: var(--kiwi-display);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  font-weight: 600;
  color: var(--kiwi-cream);
}

.project-body p { margin: 0 0 14px; color: var(--kiwi-muted); max-width: 60ch; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
  padding: 4px 11px;
  border: 1px solid var(--kiwi-line);
  border-radius: 999px;
  color: #cfc4a6;
  font-size: .76rem;
  letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   Screening room
   -------------------------------------------------------------------------- */
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--kiwi-line);
  border-radius: 18px;
  background: #0e100a;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--kiwi-ease), border-color .3s, box-shadow .3s;
}

.video:hover, .video:focus-visible {
  transform: translateY(-5px);
  border-color: var(--kiwi-line-strong);
  box-shadow: var(--kiwi-shadow-lg);
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0e100a;
}

.video-frame img,
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-frame img {
  object-fit: cover;
  transition: transform .55s var(--kiwi-ease), filter .35s;
}

.video:hover .video-frame img { transform: scale(1.05); filter: brightness(1.06); }

.video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgb(10 12 7 / 78%));
  pointer-events: none;
}

.video.is-playing .video-frame::after,
.video.is-playing .play { display: none; }

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--kiwi-gold-light), var(--kiwi-gold));
  box-shadow: 0 10px 26px rgb(0 0 0 / 45%), 0 0 0 0 rgb(245 201 95 / 35%);
  color: #241d0e;
  font-size: 1.35rem;
  padding-left: 4px;
  transition: transform .3s var(--kiwi-ease), box-shadow .3s;
}

.video:hover .play { transform: scale(1.1); box-shadow: 0 12px 30px rgb(0 0 0 / 50%), 0 0 0 10px rgb(245 201 95 / 12%); }

.video-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgb(53 45 29 / 62%), rgb(26 24 16 / 78%));
}

.video-meta h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--kiwi-display);
  font-size: .96rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--kiwi-cream);
}

.video-meta .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--kiwi-red); box-shadow: 0 0 10px rgb(238 65 59 / 60%); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-foot { position: relative; padding: 20px 0 56px; text-align: center; }

.foot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 34px;
  color: var(--kiwi-muted);
  font-size: .88rem;
}

.foot-inner img.mascot { width: 92px; height: auto; filter: drop-shadow(0 10px 16px rgb(0 0 0 / 45%)); }
.foot-inner p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.foot-links a { color: var(--kiwi-muted); text-decoration: none; transition: color .2s; }
.foot-links a:hover { color: var(--kiwi-gold-light); }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
/* Gated on .js so a blocked or failed script can never leave the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--kiwi-ease), transform .7s var(--kiwi-ease);
  transition-delay: var(--d, 0ms);
}

.js .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .hero { min-height: 0; padding: 128px 0 300px; text-align: left; }
  .hero-mascot { right: 50%; bottom: 92px; width: 190px; transform: translateX(50%); }
  .hero-mascot.is-pop img { animation: pop .5s var(--kiwi-ease); }
  .speech { right: 50%; bottom: 100%; transform: translate(50%, 8px) scale(.94); transform-origin: bottom center; border-radius: 16px; }
  .speech.is-on { transform: translate(50%, -10px) scale(1); }
  .scroll-cue { display: none; }
  .brand span { display: none; }
  /* the nav scrolls sideways here — fade the edge so that reads as scrollable */
  .site-nav { mask-image: linear-gradient(90deg, #000 84%, transparent); }
  .project { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 520px) {
  .card { padding: 16px; gap: 13px; }
  .card-art { width: 62px; height: 62px; }
  .section-head { gap: 13px; }
  .section-head img { width: 42px; height: 42px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — keep it calm
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .drift { display: none; }
  .hero-bg { transform: none; }
}