/* ==========================================================================
   PART 1: PARALLAX DECK CORE SYSTEM
   ========================================================================== */

#hero {
  position: -webkit-sticky;
  position: sticky !important;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 10 !important;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: default !important;
  background-color: #000000;
}

/* THE WORKING PORTFOLIO CHASSIS:
   Must be relative to scale dynamically when the interior drawer rolls open.
   We strip out the 100vh restriction completely so the contents never overlap. */

#work {
  position: relative;
  width: 100% !important;
  min-height: 100vh;
  background-color: #000000;
  z-index: 20 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* THE CREDITS PANEL RESUME RESIDENCE:
   Switched to relative positioning on the main wrapper body flow. This guarantees
   it sits cleanly below the expanded portfolio matrix without shifting early. */

#credits {
  position: relative;
  width: 100%;
  min-height: 100vh;
  z-index: 30 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
}

/* ==========================================================================
   PART 2: HERO INTERIOR & BRANDING LAYERS
   ========================================================================== */

.parallax-deck-layer {
  position: -webkit-sticky;
  position: sticky !important;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

#hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 120%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: .65;
  pointer-events: none !important;
}

#hero-container {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#herobrandstack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0px !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  z-index: 99 !important;
  opacity: .65;
}

#heroheading {
  font-size: clamp(2rem, 5.5vw, 4.5rem) !important;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  margin: 0px;
  padding: 0 !important;
  line-height: 0.85 !important;
  color: #ffffff;
}

#hero-logo {
  display: block !important;
  width: clamp(95px, 14vw, 150px) !important;
  max-width: 133px;
  min-width: 40px !important;
  height: min-content;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   PART 3: HORIZON SCROLLER LEDGER DIVIDERS
   ========================================================================== */

#scroller {
  position: fixed !important;
  top: 75%;
  z-index: 9999 !important;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
}

.scrolling-divider-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ffffff;
  background-color: transparent;
}

.scrolling-divider-row span, .scrolling-divider-row p {
  color: #ffffff;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
}

/* ==========================================================================
   PART 4: DUAL-IMAGE ACCORDION CLIPPING MECHANICS
   ========================================================================== */

#work .container-fluid, #work .work-accordion-item {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden;
}

.work-trigger {
  position: relative;
  width: 100% !important;
  height: 50vh !important;
  cursor: pointer;
  overflow: hidden !important;
  background-color: #000000 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.work-trigger img {
  position: absolute;
  left: 50% !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  z-index: 1;
}

.trigger-top img {
  top: 0 !important;
}

.trigger-bottom img {
  bottom: 0 !important;
}

.trigger-top {
  border-bottom: 1px solid #111111;
}

.trigger-bottom {
  border-top: 1px solid #111111;
}

.trigger-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 5;
  display: flex !important;
}

.trigger-top .trigger-overlay {
  justify-content: flex-start;
  align-items: flex-end;
  padding: 30px 40px;
}

.trigger-bottom .trigger-overlay {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 30px 40px;
}

.trigger-overlay h2 {
  font-size: calc(1.5rem + 1.5vw);
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  letter-spacing: -1px;
}

.trigger-overlay p {
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #cccccc;
  margin: 0;
  letter-spacing: 1.5px;
}

/* ==========================================================================
   PART 5: INTERIOR DRAWER & THUMBNAIL TILE MATRIX
   ========================================================================== */

.drawer-content {
  background-color: #050505;
  transition: cubic-bezier(0.25, 1, 0.5, 1) 0.7s !important;
}

.drawer-content .row {
  padding: 60px 40px;
  --bs-gutter-x: 40px;
  --bs-gutter-y: 40px;
}

.project-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #111111;
}

.project-card img, .project-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   PART 6: PARALLAX BACKGROUND LAYER DEFAULTS
   ==========================================================================

#work-bg,
#credits-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: translate3d(0, 0, 0);
} */

css #work {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  background-color: #000000;
  z-index: 20 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* THE COLLAPSIBLE DRAWER OVERLAY */

.drawer-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #050505 !important;
  z-index: 10 !important;
  overflow-y: auto !important;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
  transform: scaleY(0);
  transform-origin: center;
  opacity: 0;
}

/* Bootstrap framework class synchronization hook */

.drawer-content.show {
  transform: scaleY(1);
  opacity: 1;
}

.drawer-content .row {
  padding: 80px 40px;
  --bs-gutter-x: 40px;
  --bs-gutter-y: 40px;
}

/* ==========================================================================
 *   RESTORE ORIGINAL WORKING PARALLAX PHYSICS FOR SURROUNDING DECKS
 *   ========================================================================== */

#hero, .parallax-deck-layer {
  position: -webkit-sticky;
  position: sticky !important;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

#credits {
  position: relative;
  top: 0;
  height: 100vh;
  z-index: 30 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
}