/* 
 * Immersive Full-Bleed & Borderless Fine Art Gallery Design System
 * Center-Top B&W Logo, Smaller 3-Dot Dropdown Menu, Pure Image Hero & Swipe Track
 * Agency: byCondensation — Climbing Gym Architecture
 */

/* ================= LOCAL DIN FONT FAMILY ================= */
@font-face {
  font-family: 'DIN';
  src: url('../assets/fonts/DIN-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN';
  src: url('../assets/fonts/DIN-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN';
  src: url('../assets/fonts/DIN-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN';
  src: url('../assets/fonts/DIN-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN';
  src: url('../assets/fonts/DIN-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN Condensed';
  src: url('../assets/fonts/DIN 1451 Std Engschrift.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN Condensed';
  src: url('../assets/fonts/DIN Condensed Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-dark: #050505;
  --bg-surface: #0a0a0a;
  --text-main: #f4f4f0;
  --text-muted: #888888;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Base resets & mobile viewport bounds lock */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
}

.font-din-condensed {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ================= KOGAA-STYLE SMALL 3-DOT TRIGGER, DROPDOWN & DYNAMIC ISLAND ================= */
#dynamic-island {
  transition:
    width 0.45s var(--ease-spring),
    height 0.45s var(--ease-spring),
    padding 0.45s var(--ease-spring),
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s var(--ease-spring);
  will-change: width, height, transform, background-color;
}

/* Idle mode: pure 3 small dots, zero background, zero shadow */
#dynamic-island.island-idle-mode {
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Exit mode: sleek dark glassmorphic capsule */
#dynamic-island.island-expanded-mode {
  background-color: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

#dynamic-island:active {
  transform: scale(0.94);
}

/* Smaller, delicate 3 dots (3px) */
.island-dot {
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background-color: #f4f4f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  transition:
    transform 0.3s var(--ease-spring),
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    opacity 0.3s ease;
}

/* Turn 3 dots black when inside the vertical white rectangle dropdown */
#header-menu-panel.dropdown-open .island-dot {
  background-color: #050505;
  box-shadow: none;
}

#dynamic-island:hover .island-dot:nth-child(1) {
  transform: translateX(-2px);
}
#dynamic-island:hover .island-dot:nth-child(3) {
  transform: translateX(2px);
}

/* Vertical White Rectangle Menu Container & Background */
#header-menu-bg {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  border-radius: 0px;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.48s var(--ease-out-expo),
    opacity 0.32s var(--ease-out-expo);
  z-index: 0;
}

#header-menu-panel.dropdown-open #header-menu-bg {
  transform: scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

/* 3-Dot Dropdown Options inside Vertical White Rectangle */
#island-dropdown {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    max-height 0.48s var(--ease-out-expo),
    opacity 0.34s var(--ease-out-expo),
    transform 0.38s var(--ease-out-expo);
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

#island-dropdown.dropdown-open {
  max-height: 240px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ================= PURE IMAGE HERO MODE vs TOUCH/SCROLL UI AWAKENING ================= */
/* Hidden initially after logo transition; reveals when user touches or scrolls */
.awaken-on-interact {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo);
}

body.ui-awakened .awaken-on-interact {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hide top-center logo when inside an active modal so the Exit Island has full focus */
body.modal-active #header-logo-link {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ================= LAUNCH INTRO SEQUENCE ================= */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: var(--bg-dark);
  transition: opacity 0.85s var(--ease-out-expo), visibility 0.85s;
}

#intro-overlay.intro-fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#intro-logo-img {
  will-change: transform, opacity;
  transform-origin: center center;
  animation: logoEmerge 0.75s var(--ease-out-expo) forwards;
}

@keyframes logoEmerge {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* ================= SOFT DUAL-BUFFER HERO CROSSFADE ================= */
#hero-billboard {
  height: 100vh;
  height: 100svh;
}

.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.07);
  transition:
    opacity 1.65s var(--ease-soft),
    transform 7.5s var(--ease-soft);
  will-change: opacity, transform;
}

body.launch-revealed .hero-bg-layer.is-active {
  opacity: 1;
  transform: scale(1);
}

#hero-content-wrap {
  /* Lowered by another line of type (~2rem / 32px) from 4rem to 2rem */
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  transition:
    opacity 0.65s var(--ease-out-expo),
    transform 0.65s var(--ease-out-expo),
    filter 0.65s var(--ease-out-expo);
  will-change: opacity, transform, filter;
}

@media (min-width: 640px) {
  #hero-content-wrap {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  }
}

#hero-content-wrap.is-crossfading {
  opacity: 0 !important;
  transform: translateY(10px) !important;
}

/* Smoothly hide hero text block when scrolling brings the top-center logo near it */
#hero-content-wrap.hero-scroll-hidden {
  opacity: 0 !important;
  transform: translateY(-22px) scale(0.98) !important;
  filter: blur(6px);
  pointer-events: none !important;
}

/* ================= FULL-BLEED IMMERSIVE HERO VIGNETTE ================= */
/* Pure transparent top so the true image brightness sits behind the header logo */
.hero-vignette {
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 5, 0.0) 0%,
    rgba(5, 5, 5, 0.0) 45%,
    rgba(5, 5, 5, 0.16) 65%,
    rgba(5, 5, 5, 0.82) 88%,
    #050505 100%
  );
}

/* ================= DELIBERATE GALLERY GRID TILE ENTRANCE ANIMATION ================= */
.grid-tile {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 1.35s var(--ease-soft),
    transform 1.35s var(--ease-soft);
  will-change: opacity, transform;
}

.grid-tile.tile-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Inner image scale-settle animation on reveal + hover */
.grid-tile .tile-img-wrap {
  clip-path: inset(6% 0 0 0);
  transition: clip-path 1.4s var(--ease-soft);
}

.grid-tile.tile-revealed .tile-img-wrap {
  clip-path: inset(0% 0 0 0);
}

.grid-tile .tile-img {
  transform: scale(1.08);
  transition: transform 1.6s var(--ease-soft), filter 0.6s ease;
}

.grid-tile.tile-revealed .tile-img {
  transform: scale(1);
}

@media (min-width: 768px) {
  .grid-tile:hover .tile-img {
    transform: scale(1.04);
  }
}

.grid-tile:active .tile-img {
  transform: scale(0.98);
}

/* ================= INTERACTIVE SWIPE TRACK CAROUSEL ================= */
#gallery-swipe-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

#gallery-swipe-track:active {
  cursor: grabbing;
}

#gallery-swipe-track.is-snapping {
  transition: transform 0.44s var(--ease-soft);
}

.gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* ================= MOBILE-BOUNDED PROJECT SHEET & MODALS ================= */
.bottom-sheet {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  transition: transform 0.55s var(--ease-spring), opacity 0.35s ease;
}

.bottom-sheet.closed {
  transform: translateY(102%);
  opacity: 0;
  pointer-events: none;
}

.bottom-sheet.open {
  transform: translateY(0%);
  opacity: 1;
  pointer-events: auto;
}

.sheet-backdrop {
  transition: opacity 0.4s var(--ease-out-expo);
}

.sheet-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

.sheet-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Safe Area Insets */
.safe-bottom {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.safe-top {
  padding-top: max(14px, env(safe-area-inset-top));
}

/* ================= COMPUTER GALLERY NAVIGATION BUTTONS ================= */
.gallery-nav-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(5, 5, 5, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}
.gallery-nav-btn:hover { background: rgba(255, 255, 255, 0.9); color: #000; }
.gallery-nav-btn.is-disabled { opacity: 0; pointer-events: none; }
html.device-desktop .gallery-nav-btn { display: flex; }
@media (hover: hover) and (pointer: fine) {
  .gallery-nav-btn { display: flex; }
}