/* Prop Shadow Apron — Tropic Airpower
   Late-sun concrete · rotary bay prop · Archivo Black + Literata/Source Serif */

:root {
  --concrete: #8a7a68;
  --concrete-mid: #7a6b5a;
  --concrete-dark: #5c5248;
  --concrete-warm: #9a8874;
  --ink: #0e0d0b;
  --paper: #f2ebe0;
  --cone: #e85d04;
  --cone-deep: #c44a00;
  --sky: #f0a878;
  --sky-deep: #c46a3a;
  --sky-hot: #ffd4a8;
  --shadow: rgba(8, 6, 4, 0.72);
  --safe: max(0.75rem, env(safe-area-inset-bottom));
  --bay-rot: -18deg;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--concrete-dark);
  color: var(--paper);
  font-family: Literata, "Source Serif 4", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.5;
  -webkit-user-select: none;
  user-select: none;
}
body a, body button, body input, .bay-panel {
  -webkit-user-select: text;
  user-select: text;
}

.skip {
  position: absolute;
  left: -999px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: .5rem 1rem;
}
.skip:focus { left: 0; }

/* ========== LATE-AFTERNOON SKY SLIT ========== */
.sky-slit {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 8px;
  z-index: 50;
  background: linear-gradient(
    90deg,
    var(--sky-deep),
    var(--sky) 25%,
    var(--sky-hot) 50%,
    var(--sky) 75%,
    var(--sky-deep)
  );
  box-shadow:
    0 6px 28px rgba(240, 168, 120, 0.35),
    0 2px 8px rgba(232, 93, 4, 0.2);
}

/* ========== HEAT SHIMMER ========== */
.heat-shimmer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      105deg,
      transparent 0,
      transparent 18px,
      rgba(255, 200, 140, 0.03) 18px,
      rgba(255, 200, 140, 0.03) 20px
    );
  mix-blend-mode: soft-light;
  opacity: .55;
  animation: shimmer-drift 7s ease-in-out infinite alternate;
}
@keyframes shimmer-drift {
  0% { transform: translateX(0) skewX(0deg); opacity: .4; }
  50% { transform: translateX(8px) skewX(.4deg); opacity: .65; }
  100% { transform: translateX(-6px) skewX(-.3deg); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .heat-shimmer { display: none; }
}

/* ========== APRON ========== */
.apron {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.concrete {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 15%, rgba(255, 180, 100, .22), transparent 42%),
    radial-gradient(ellipse at 20% 85%, rgba(40, 25, 10, .35), transparent 50%),
    radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.12), transparent 55%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,.035) 3px,
      rgba(0,0,0,.035) 4px
    ),
    linear-gradient(
      155deg,
      #a09078 0%,
      var(--concrete-warm) 28%,
      var(--concrete) 55%,
      var(--concrete-mid) 78%,
      #5a4e42 100%
    );
}

.sun-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, rgba(255, 160, 80, .18) 0%, transparent 40%),
    linear-gradient(200deg, transparent 50%, rgba(80, 40, 10, .25) 100%);
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .7;
}

.joint-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 24.5%, rgba(0,0,0,.28) 24.5%, rgba(0,0,0,.28) 25%, transparent 25%),
    linear-gradient(90deg, transparent 74.5%, rgba(0,0,0,.22) 74.5%, rgba(0,0,0,.22) 75%, transparent 75%),
    linear-gradient(0deg, transparent 48%, rgba(0,0,0,.2) 48%, rgba(0,0,0,.2) 48.45%, transparent 48.45%),
    linear-gradient(0deg, transparent 82%, rgba(0,0,0,.15) 82%, rgba(0,0,0,.15) 82.4%, transparent 82.4%);
  opacity: .85;
}

.prop-rig {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(170vw, 1500px);
  height: min(170vw, 1500px);
  transform: translate(-50%, -50%);
  overflow: visible;
  transition: opacity .4s;
}

#shadowGroup, #longGroup {
  transform-origin: 0 0;
  will-change: transform;
}

.cone-marks {
  position: absolute;
  left: 3vw;
  bottom: 14vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cone-marks span {
  display: block;
  width: 56px;
  height: 9px;
  background: var(--cone);
  transform: skewX(-22deg);
  box-shadow: 3px 3px 0 rgba(0,0,0,.3);
}
.cone-marks span:nth-child(2) { width: 40px; opacity: .85; margin-left: 8px; }
.cone-marks span:nth-child(3) { width: 28px; opacity: .65; margin-left: 16px; }

@media (prefers-reduced-motion: reduce) {
  #shadowGroup {
    transform: translate(500px, 500px) rotate(-22deg) scale(1.08) !important;
  }
  #longGroup {
    transform: translate(540px, 580px) rotate(-18deg) scale(1.05) !important;
  }
  .prop-rig { top: 44%; opacity: .92; }
}

/* ========== MEGA TYPE (blades clip via mix-blend) ========== */
.mega-type {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.mega {
  position: absolute;
  font-family: "Archivo Black", Impact, sans-serif;
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.06em;
  color: rgba(242, 235, 224, 0.14);
  mix-blend-mode: soft-light;
  white-space: nowrap;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(14, 13, 11, 0.15);
}
.mega-year {
  top: 8%;
  left: -4%;
  font-size: clamp(8rem, 32vw, 22rem);
  transform: rotate(-6deg);
}
.mega-crs {
  bottom: 6%;
  right: -8%;
  font-size: clamp(3.5rem, 14vw, 9rem);
  letter-spacing: .04em;
  transform: rotate(4deg);
  color: rgba(232, 93, 4, 0.18);
  mix-blend-mode: multiply;
}

/* ========== HEADER ========== */
.top {
  position: fixed;
  top: 8px;
  left: 0; right: 0;
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  padding: .65rem clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(14,13,11,.5), transparent);
  font-family: "Archivo Black", Impact, sans-serif;
}
.brand {
  color: var(--paper);
  text-decoration: none;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.crs {
  margin: 0;
  font-family: Literata, serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}
.top-cta {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  font-family: Literata, serif;
  font-size: .85rem;
}
.top-cta a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 2px solid var(--cone);
  padding-bottom: 1px;
}
.top-cta a.muted {
  border-color: rgba(242,235,224,.35);
  opacity: .7;
}
.top-cta a:hover { color: #fff; }

/* ========== BAY DIAL ========== */
.bay-dial {
  position: fixed;
  right: clamp(.75rem, 2.5vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  align-items: flex-end;
}
.bay-tick {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: transparent;
  border: none;
  color: rgba(242,235,224,.45);
  cursor: pointer;
  padding: .35rem .15rem;
  font-family: "Archivo Black", sans-serif;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .25s, transform .25s;
}
.bay-tick .tick-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(242,235,224,.35);
  background: transparent;
  transition: background .2s, border-color .2s, box-shadow .3s, transform .25s;
  order: 2;
}
.bay-tick .tick-label { order: 1; }
.bay-tick:hover { color: rgba(242,235,224,.85); }
.bay-tick.is-active {
  color: var(--cone);
}
.bay-tick.is-active .tick-dot {
  background: var(--cone);
  border-color: var(--cone);
  box-shadow: 0 0 0 4px rgba(232, 93, 4, .25);
  transform: scale(1.15);
}
.bay-tick:focus-visible {
  outline: 2px solid var(--cone);
  outline-offset: 3px;
}

/* ========== GESTURE HINT ========== */
.gesture-hint {
  position: fixed;
  bottom: calc(1rem + var(--safe));
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242,235,224,.5);
  text-align: center;
  pointer-events: none;
  transition: opacity .6s;
  max-width: 90vw;
}
.gesture-hint.is-gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .gesture-hint { display: none; }
}

/* ========== LOCK PULSE (tactile, no audio) ========== */
.lock-pulse {
  position: fixed;
  left: 50%;
  top: 48%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  z-index: 4;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(232, 93, 4, 0);
  opacity: 0;
}
.lock-pulse.is-firing {
  animation: lock-thud .55s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes lock-thud {
  0% {
    transform: scale(.4);
    opacity: .9;
    border-color: rgba(232, 93, 4, .85);
    box-shadow: 0 0 0 0 rgba(232, 93, 4, .4);
  }
  40% {
    transform: scale(1.15);
    opacity: .55;
    border-color: rgba(232, 93, 4, .5);
    box-shadow: 0 0 40px 12px rgba(232, 93, 4, .2);
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
    border-color: rgba(232, 93, 4, 0);
    box-shadow: 0 0 0 0 rgba(232, 93, 4, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lock-pulse { display: none; }
}

/* Soft body thud when bay locks */
body.is-locking {
  animation: body-thud .28s ease-out;
}
@keyframes body-thud {
  0% { filter: brightness(1.08); }
  100% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-locking { animation: none; }
}

/* ========== BAY STAGE (single viewport) ========== */
.bay-stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  outline: none;
  pointer-events: none;
}
.bay-stage a, .bay-stage button {
  pointer-events: auto;
}

.bay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding: 5.5rem clamp(1.1rem, 4vw, 3rem) 5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(4%) rotate(.4deg);
  transition:
    opacity .55s cubic-bezier(.2, .7, .2, 1),
    transform .55s cubic-bezier(.2, .7, .2, 1),
    visibility 0s linear .55s;
  pointer-events: none;
}
.bay.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) rotate(0);
  transition:
    opacity .55s cubic-bezier(.2, .7, .2, 1),
    transform .55s cubic-bezier(.2, .7, .2, 1),
    visibility 0s linear 0s;
  pointer-events: auto;
}
.bay.is-leaving-left {
  transform: translateX(-5%) rotate(-.5deg);
}
.bay.is-leaving-right {
  transform: translateX(5%) rotate(.5deg);
}
.bay.is-active .bay-panel,
.bay.is-active .photo-well {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .bay {
    transition: opacity .2s, visibility 0s linear .2s;
    transform: none !important;
  }
  .bay.is-active { transition: opacity .2s, visibility 0s; }
}

.bay-panel {
  position: relative;
  z-index: 2;
  max-width: min(520px, 92vw);
  background: linear-gradient(
    135deg,
    rgba(14, 13, 11, 0.88) 0%,
    rgba(14, 13, 11, 0.62) 55%,
    rgba(20, 14, 8, 0.78) 100%
  );
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
  padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.2rem, 3vw, 2.2rem);
  box-shadow:
    0 24px 60px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,200,140,.08);
  backdrop-filter: blur(3px);
  margin-left: clamp(0px, 4vw, 3rem);
}
.bay-panel.wide { max-width: min(580px, 92vw); }
.bay-panel.contact-panel { max-width: min(480px, 92vw); }

.eyebrow {
  font-family: "Archivo Black", sans-serif;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cone);
  margin: 0 0 1rem;
}

h1, .bay h2 {
  margin: 0 0 1.1rem;
}
.title-stack,
.bay h2 {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.75rem, 5vw, 3.1rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  display: block;
}
.title-stack em,
.bay h2 em {
  font-style: normal;
  color: var(--cone);
}

.lede {
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: .9;
  margin: 0 0 1.35rem;
}
.lede.tight { margin-bottom: 1.15rem; }
.lede strong { color: #fff; font-weight: 600; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
}

.cone-btn {
  display: inline-block;
  font-family: "Archivo Black", sans-serif;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--cone);
  padding: .85rem 1.35rem;
  transform: skewX(-12deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  transition: background .15s, transform .15s;
}
.cone-btn:hover { background: #ff6a0d; }
.cone-btn:active {
  transform: skewX(-12deg) translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0,0,0,.35);
}

.ghost {
  font-family: Literata, serif;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 2px solid rgba(242,235,224,.45);
  padding-bottom: 2px;
}
.ghost:hover { border-color: var(--cone); }

.slash-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.slash-list li {
  position: relative;
  padding: .4rem 0 .4rem 1.4rem;
  font-size: .98rem;
  border-bottom: 1px solid rgba(242,235,224,.12);
}
.slash-list li::before {
  content: "/";
  position: absolute;
  left: 0;
  color: var(--cone);
  font-family: "Archivo Black", sans-serif;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin: .25rem 0 .75rem;
}
.stat-row div {
  font-size: .85rem;
  opacity: .8;
}
.stat-row span {
  display: block;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.35rem;
  color: var(--cone);
  letter-spacing: -.01em;
  opacity: 1;
}
.fine {
  font-size: .75rem;
  opacity: .55;
  margin: 0 0 .75rem;
}
.crs-foot { margin-top: 1.5rem; }

.partner-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .85rem;
  margin-top: .5rem;
}
.partner-strip a {
  font-family: "Archivo Black", sans-serif;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 2px solid var(--cone);
  padding-bottom: 1px;
  opacity: .85;
}
.partner-strip a:hover { opacity: 1; color: #fff; }
.partner-strip.dense { gap: .45rem .7rem; }
.partner-strip.dense a { font-size: .58rem; }

.stations {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .2rem;
}
@media (min-width: 520px) {
  .stations { grid-template-columns: 1fr 1fr; gap: .2rem 1.5rem; }
}
.stations li {
  font-family: Literata, serif;
  font-size: .98rem;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(242,235,224,.15);
  display: flex;
  gap: .65rem;
  align-items: baseline;
}
.stations b {
  font-family: "Archivo Black", sans-serif;
  color: var(--cone);
  font-size: .85rem;
  letter-spacing: .04em;
  min-width: 1.75rem;
}

.map-link { margin-top: 1.1rem; }
.map-link a {
  font-family: "Archivo Black", sans-serif;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 2px solid var(--cone);
}

/* ========== DIAGONAL PHOTO WELLS ========== */
.photo-well {
  position: absolute;
  margin: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    10px 14px 0 rgba(0,0,0,.28),
    0 20px 50px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(12px) rotate(var(--well-rot, -4deg));
  transition: opacity .6s .12s, transform .6s .12s;
}
.bay.is-active .photo-well {
  opacity: .92;
  transform: translateY(0) rotate(var(--well-rot, -4deg));
}
.photo-well img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) saturate(.8) sepia(.12) brightness(.92);
}
.well-a {
  --well-rot: -7deg;
  clip-path: polygon(6% 0, 100% 4%, 94% 100%, 0 96%);
  width: min(280px, 38vw);
  height: min(210px, 28vw);
  right: clamp(4%, 8vw, 12%);
  top: 18%;
}
.well-a.tall {
  width: min(260px, 36vw);
  height: min(300px, 42vw);
  clip-path: polygon(8% 0, 100% 2%, 92% 100%, 0 98%);
}
.well-b {
  --well-rot: 5deg;
  clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
  width: min(240px, 32vw);
  height: min(180px, 24vw);
  right: clamp(2%, 5vw, 8%);
  bottom: 16%;
}
.well-b.wide-well {
  width: min(320px, 42vw);
  height: min(160px, 22vw);
}
.well-c {
  --well-rot: -3deg;
  clip-path: polygon(0 0, 96% 6%, 100% 100%, 4% 94%);
  width: min(200px, 28vw);
  height: min(150px, 20vw);
  left: auto;
  right: clamp(28%, 32vw, 40%);
  bottom: 12%;
}

@media (max-width: 900px) {
  .well-c { display: none; }
  .well-b { bottom: 12%; right: 4%; }
}
@media (max-width: 700px) {
  .photo-well {
    width: min(160px, 42vw) !important;
    height: min(120px, 28vw) !important;
  }
  .well-a { top: auto; bottom: 22%; right: 3%; opacity: .7; }
  .bay.is-active .well-a { opacity: .75; }
  .well-b { display: none; }
  .bay-panel { margin-left: 0; max-width: 100%; }
}

/* Drag capture zone — center of apron for prop feel */
.drag-zone {
  position: fixed;
  left: 50%;
  top: 48%;
  width: min(70vw, 520px);
  height: min(70vw, 520px);
  transform: translate(-50%, -50%);
  z-index: 15;
  cursor: grab;
  border-radius: 50%;
  touch-action: none;
}
.drag-zone:active, body.is-dragging .drag-zone {
  cursor: grabbing;
}
body.is-dragging { cursor: grabbing; }

/* Keep links above drag zone when panel overlaps */
.bay-panel { z-index: 20; }
.bay-dial { z-index: 40; }
.top { z-index: 45; }

@media (max-width: 600px) {
  .top { gap: .35rem .75rem; }
  .crs { width: 100%; order: 3; }
  .cone-marks { display: none; }
  .bay-dial {
    flex-direction: row;
    top: auto;
    bottom: calc(3.2rem + var(--safe));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    gap: .35rem;
    background: rgba(14,13,11,.45);
    padding: .4rem .55rem;
    clip-path: polygon(2% 0, 100% 8%, 98% 100%, 0 92%);
  }
  .bay-tick .tick-label { display: none; }
  .bay-tick .tick-dot { order: 0; width: 12px; height: 12px; }
  .gesture-hint { bottom: calc(5.5rem + var(--safe)); font-size: .58rem; }
  .mega-crs { font-size: clamp(2.5rem, 12vw, 5rem); bottom: 18%; }
  .drag-zone {
    width: min(90vw, 400px);
    height: min(50vh, 360px);
    top: 42%;
  }
}