/* =========================================================================
   Moonlight Companies — static rebuild
   Single-page vertical scroll-snap deck. No frameworks, no jQuery.
   ========================================================================= */

@font-face {
  font-family: "Komu";
  src: url("../assets/fonts/Komu-A-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
/* Open Sans vendored locally (latin subset) — keeps the site free of any
   third-party requests. The upright file is a variable font (300–800). */
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/opensans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/opensans-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy:        #182b49;
  --white:       #ffffff;
  --dot:         #a0cfeb;
  --dot-hover:   #96cbd7;
  --dot-active:  #ebc920;
  --headline-shadow: drop-shadow(4px 4px 20px rgba(0, 0, 0, 0.25));
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b1220;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
/* every <img> is wrapped in <picture> for WebP-with-fallback; make the
   wrapper layout-transparent so existing fl/grid/selector rules are unaffected */
picture { display: contents; }
a { color: inherit; }

/* ===== fixed background layers (cross-fade) ============================= */
#bg { position: fixed; inset: 0; z-index: 0; }
.bg-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  will-change: opacity;
}
.bg-layer.is-active { opacity: 1; }

/* ===== starfield — slowly rotates as a whole, each star twinkles ======== */
#stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.stars-rotor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  animation: star-rotate 260s linear infinite;
}
.star {
  position: absolute;
  background: #fff;
  /* 4-point sparkle */
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
  opacity: 0.5;
  animation: twinkle var(--tw, 4s) ease-in-out var(--td, 0s) infinite;
}
@keyframes star-rotate { to { transform: rotate(360deg); } }
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(35deg); }
}

/* ===== clouds — softly drifting translucent layers ====================== */
#clouds {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.cloud {
  position: absolute;
  height: auto;
  will-change: transform;
}
.cloud--1 {
  width: 46vw; top: 6vh; left: -10vw; opacity: 0.32;
  animation: cloud-drift-a 90s ease-in-out infinite;
}
.cloud--2 {
  width: 80vw; top: -4vh; left: 20vw; opacity: 0.22;
  animation: cloud-drift-b 140s ease-in-out infinite;
}
.cloud--3 {
  width: 60vw; top: 24vh; right: -16vw; opacity: 0.26;
  animation: cloud-drift-c 110s ease-in-out infinite;
}
@keyframes cloud-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(14vw, 2vh); }
}
@keyframes cloud-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-12vw, -1.5vh); }
}
@keyframes cloud-drift-c {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-16vw, 2.5vh); }
}

/* ===== tree (fixed, bottom-right, behind panel content) ================= */
#tree {
  position: fixed;
  right: -14vh;
  bottom: 0;
  height: 80vh;
  aspect-ratio: 710 / 1080;
  z-index: 3;
  pointer-events: none;
}
.tree-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* trunk holds still; the canopy waves in the breeze around its base */
.tree-leaves {
  transform-origin: 98% 63%;
  animation: tree-sway 7s ease-in-out infinite;
}
@keyframes tree-sway {
  0%   { transform: rotate(-1.4deg) skewX(0.4deg); }
  28%  { transform: rotate(0.7deg)  skewX(-0.2deg); }
  52%  { transform: rotate(1.5deg)  skewX(-0.5deg); }
  78%  { transform: rotate(-0.5deg) skewX(0.15deg); }
  100% { transform: rotate(-1.4deg) skewX(0.4deg); }
}

/* ===== sticky moon logo ================================================= */
#sticky-logo {
  position: fixed;
  top: 2.5vh;
  left: 2vw;
  width: 17vh;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
}
body.logo-visible #sticky-logo { opacity: 1; pointer-events: auto; }
#sticky-logo img { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35)); }

/* ===== right-side dot navigation ======================================== */
#dot-nav {
  position: fixed;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#dot-nav button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dot);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
#dot-nav button:hover { background: var(--dot-hover); }
#dot-nav button.active {
  background: var(--dot-active);
  transform: scale(1.35);
}

/* ===== the scroll-snap deck ============================================= */
#deck {
  position: relative;
  z-index: 4;          /* above bg(0) / stars(1) / clouds(2) / tree(3) */
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
#deck::-webkit-scrollbar { display: none; }

.panel {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.panel__inner {
  width: min(1600px, 92vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4vw;
}
.panel__inner--center {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.panel__text  { flex: 1 1 50%; min-width: 0; padding-left: 2vw; }
.panel__media {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ===== type ============================================================= */
.headline {
  margin: 0;
  font-family: "Komu", Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
  -webkit-text-stroke: 1px var(--white);
  letter-spacing: 0.3vh;
  line-height: 0.88;
  font-size: clamp(3.4rem, 13.5vh, 15rem);
  filter: var(--headline-shadow);
}
.headline--center { text-align: center; }
/* the opening "7 Months of Summer" panel runs the largest */
#Where_Summer_Last_7_Months .headline { font-size: clamp(3.8rem, 16vh, 18rem); }

.eyebrow {
  margin: 0 0 1.2vh;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--navy);
  font-size: clamp(0.9rem, 2vh, 1.5rem);
}
.eyebrow--center { text-align: center; }

.sub {
  margin: 1.6vh 0 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--navy);
  font-size: clamp(1rem, 2.3vh, 1.7rem);
}

.body {
  margin: 2.4vh 0 0;
  max-width: 36ch;
  color: var(--navy);
  font-size: clamp(1.05rem, 2.4vh, 1.5rem);
  line-height: 1.55;
}

/* ===== product imagery ================================================== */
.panel__media .product,
.panel__media .bag,
.panel__media .drone {
  max-height: 72vh;
  width: auto;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.28));
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
.float-slow   { animation: float 6s ease-in-out infinite; }
.float-slower { animation: float 8.5s ease-in-out infinite; }

/* West Coast — faint map outline behind the fruit */
.panel__media .map-outline {
  position: absolute;
  height: 78vh;
  width: auto;
  max-height: none;
  opacity: 0.5;
  filter: none;
  pointer-events: none;
}

/* Central California — three overlapping bags */
.bag-cluster {
  position: relative;
  width: min(48vw, 640px);
  height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bag-cluster .bag { position: absolute; max-height: 52vh; }
.bag-cluster .bag--left  { transform: translate(-42%, 6%)  scale(0.82); z-index: 1; }
.bag-cluster .bag--right { transform: translate(42%, 10%)  scale(0.78); z-index: 1; }
.bag-cluster .bag--front { transform: translate(0, -4%)    scale(1);    z-index: 2; }
.bag-cluster .bag--left.float-slow  { animation-delay: -1.5s; }
.bag-cluster .bag--right.float-slow { animation-delay: -3s; }

/* keep the per-bag offsets while floating */
.bag-cluster .bag--left  { animation-name: float-left; }
.bag-cluster .bag--right { animation-name: float-right; }
.bag-cluster .bag--front { animation-name: float-front; }
@keyframes float-left  { 0%,100%{transform:translate(-42%,6%)  scale(.82)} 50%{transform:translate(-42%,calc(6% - 16px))  scale(.82)} }
@keyframes float-right { 0%,100%{transform:translate(42%,10%)  scale(.78)} 50%{transform:translate(42%,calc(10% - 16px)) scale(.78)} }
@keyframes float-front { 0%,100%{transform:translate(0,-4%)    scale(1)}   50%{transform:translate(0,calc(-4% - 16px))   scale(1)} }

/* Powered By Innovation — drone cluster, each at its own offset.
   Positioned with top/left so each drone keeps its place; the float keyframe
   only animates transform, so there's no conflict (unlike translate-based
   offsets, which the animation would overwrite and stack all three). */
.panel__media--drones {
  position: relative;
  width: 100%;
  height: 80vh;
}
.panel__media--drones .drone {
  position: absolute;
  max-height: none;
  animation: float 7s ease-in-out infinite;
}
.panel__media--drones .drone--1 { width: 32vh; top: 2%;  left: 46%; animation-delay: -1s;   animation-duration: 6.5s; }
.panel__media--drones .drone--2 { width: 44vh; top: 22%; left: 6%;  animation-delay: -3.5s; animation-duration: 8s; }
.panel__media--drones .drone--3 { width: 26vh; top: 56%; left: 30%; animation-delay: -5s;   animation-duration: 7.5s; }

/* ===== splash panels (intro + careers) ================================== */
.splash-logo {
  width: min(680px, 62vw);
  height: auto;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.4));
}
.splash-logo--sm { width: min(440px, 52vw); }

/* "Rock On" tagline — yellow, anchored near the bottom above the scroll cue */
.splash-tagline {
  position: absolute;
  bottom: 9vh;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--dot-active);
  font-size: clamp(1rem, 1.7vh, 1.35rem);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.scroll-cue {
  position: absolute;
  bottom: 4vh;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-right: 3px solid var(--dot-active);
  border-bottom: 3px solid var(--dot-active);
  transform: rotate(45deg);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: rotate(45deg) translate(0, 0);   opacity: 0.4; }
  50%      { transform: rotate(45deg) translate(6px, 6px); opacity: 1; }
}

.outro-headline {
  margin: 3.5vh 0 0;
  max-width: 16ch;
  font-family: "Komu", Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
  line-height: 0.95;
  font-size: clamp(2rem, 6vh, 4.5rem);
  filter: var(--headline-shadow);
}
.outro-body {
  margin: 2.4vh 0 0;
  max-width: 30ch;
  color: var(--white);
  font-size: clamp(1rem, 2.1vh, 1.35rem);
  line-height: 1.5;
}

.btn {
  display: inline-block;
  margin-top: 3.4vh;
  padding: 0.95em 2.4em;
  border-radius: 999px;
  background: var(--dot-active);
  color: var(--navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38); }

/* ===== contact ========================================================== */
.contact-list {
  list-style: none;
  margin: 4vh 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.4vh;
  text-align: center;
}
.contact-list a {
  color: var(--white);
  text-decoration: none;
  font-size: clamp(1.2rem, 3vh, 2.2rem);
  font-weight: 600;
  line-height: 1.3;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  transition: color 0.2s var(--ease);
}
.contact-list a:hover { color: var(--dot-active); }

.contact-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 3.4vh;
  padding: 0.8em 1.8em;
  border: 2px solid var(--dot-active);
  border-radius: 999px;
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: clamp(0.82rem, 1.6vh, 1.05rem);
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.contact-map-link:hover { background: var(--dot-active); color: var(--navy); }
.contact-map-link__pin {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

/* ===== Our Lineup carousel ============================================= */
.panel--lineup .panel__inner--center { gap: 1vh; }

.carousel {
  position: relative;
  width: min(1100px, 94vw);
  margin-top: 2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
}
.carousel__stage {
  position: relative;
  width: 100%;
  height: 54vh;
  transform-style: preserve-3d;
}
.carousel__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(230px, 24vw, 360px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), filter 0.6s var(--ease);
  will-change: transform, opacity;
}
.carousel__item img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
}
.carousel__caption {
  display: block;
  margin-top: 1.4vh;
  font-family: "Komu", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  font-size: clamp(1.1rem, 2.6vh, 2rem);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  filter: var(--headline-shadow);
}

/* carousel positions (set as classes by JS) — base is centred via -50% */
.carousel__item            { opacity: 0; pointer-events: none; }
.carousel__item.pos-0      { transform: translate(-50%, -50%) translateX(0)       scale(1)    rotateY(0);      z-index: 6; opacity: 1;    pointer-events: auto; }
.carousel__item.pos-1      { transform: translate(-50%, -50%) translateX(108%)    scale(0.68) rotateY(-30deg); z-index: 5; opacity: 0.62; pointer-events: auto; }
.carousel__item.pos-2      { transform: translate(-50%, -50%) translateX(195%)    scale(0.46) rotateY(-36deg); z-index: 4; opacity: 0.32; pointer-events: auto; }
.carousel__item.pos--1     { transform: translate(-50%, -50%) translateX(-108%)   scale(0.68) rotateY(30deg);  z-index: 5; opacity: 0.62; pointer-events: auto; }
.carousel__item.pos--2     { transform: translate(-50%, -50%) translateX(-195%)   scale(0.46) rotateY(36deg);  z-index: 4; opacity: 0.32; pointer-events: auto; }
.carousel__item.pos-0 .carousel__caption { opacity: 1; }
.carousel__item.pos-0:hover { transform: translate(-50%, -50%) scale(1.04); }

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px;
  height: 70px;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease);
}
.carousel__arrow:hover { opacity: 1; }
.carousel__arrow svg { width: 100%; height: 100%; }
.carousel__arrow polyline {
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carousel__arrow--prev { left: -1vw; }
.carousel__arrow--next { right: -1vw; }

/* ===== modals =========================================================== */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw;
}
.modal-root.is-open { display: flex; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 35, 0.72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.modal-root.is-open .modal-overlay { opacity: 1; }

.modal {
  position: relative;
  display: flex;
  width: min(780px, 100%);
  max-height: 86vh;
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.modal-root.is-open .modal:not([hidden]) { opacity: 1; transform: scale(1); }
.modal[hidden] { display: none; }

.modal__media {
  flex: 0 0 42%;
  background: linear-gradient(160deg, #eaf3fb, #cfe5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal__media img { max-height: 100%; width: auto; }
.modal__body {
  flex: 1 1 58%;
  padding: clamp(24px, 4vw, 44px);
  overflow-y: auto;
}
.modal__body h3 {
  margin: 0 0 0.6em;
  font-family: "Komu", Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--navy);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 0.95;
}
.modal__body p { margin: 0; color: var(--navy); line-height: 1.6; }
.modal__varieties {
  margin: 1.4em 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.modal__varieties li {
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: #eef4fa;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
}
.modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(24, 43, 73, 0.08);
  color: var(--navy);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.modal__close:hover { background: rgba(24, 43, 73, 0.18); }

/* ===== responsive ======================================================= */
@media (max-width: 980px) {
  /* clouds + stars still run (lightweight CSS); the big tree is dropped */
  #tree { display: none; }
  .cloud--2 { width: 130vw; }
  .cloud--1, .cloud--3 { width: 80vw; }

  .panel__inner {
    flex-direction: column;
    gap: 2vh;
    justify-content: center;
    text-align: center;
  }
  /* stack to content height — the desktop "flex: 1 1 50%" makes both columns
     fight for 50% of the column's height on mobile, which collapses the
     fixed-height drone block and overlaps the text */
  .panel__text  { padding-left: 0; order: 2; flex: 0 0 auto; width: 100%; }
  .panel__media { order: 1; flex: 0 0 auto; width: 100%; }
  .body, .sub { margin-left: auto; margin-right: auto; }
  .headline,
  #Where_Summer_Last_7_Months .headline { font-size: clamp(2.6rem, 9vw, 5rem); }
  .panel__media .product,
  .panel__media .bag,
  .panel__media .drone { max-height: 38vh; }
  /* shorter on mobile so the long body copy below still fits the viewport */
  .panel__media--drones { height: 32vh; }
  .panel__media--drones .drone--1 { width: 26vw; top: 0%;  left: 42%; }
  .panel__media--drones .drone--2 { width: 36vw; top: 22%; left: 2%; }
  .panel__media--drones .drone--3 { width: 24vw; top: 52%; left: 34%; }
  .bag-cluster { width: 86vw; height: 40vh; }
  .bag-cluster .bag { max-height: 30vh; }
  .panel__media .map-outline { height: 42vh; }

  #sticky-logo { width: 11vh; }
  .carousel__item { width: clamp(150px, 44vw, 240px); }
  .carousel__stage { height: 38vh; }

  .modal { flex-direction: column; max-height: 88vh; }
  .modal__media { flex-basis: auto; max-height: 36vh; }
}

@media (max-width: 600px) {
  .carousel__item.pos-2, .carousel__item.pos--2 { opacity: 0; pointer-events: none; }
  .carousel__item.pos-1  { transform: translate(-50%, -50%) translateX(86%)  scale(0.5) rotateY(-26deg); }
  .carousel__item.pos--1 { transform: translate(-50%, -50%) translateX(-86%) scale(0.5) rotateY(26deg); }
}

/* landscape phones — the deck needs the height */
@media (max-height: 520px) {
  .headline { font-size: clamp(2rem, 11vh, 4rem); }
  .body { font-size: clamp(0.8rem, 3.4vh, 1rem); margin-top: 1.4vh; }
  .panel__media .product, .panel__media .bag { max-height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #deck { scroll-behavior: auto; }
}