:root {
  --bg: #050505;
  --fg: #f5f5f5;
  --muted: #999999;
  --accent: #ffffff;
  --accent-soft: #1f1f1f;
  --border-subtle: #2b2b2b;
  --font-main: "Special Gothic Expanded One", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

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

html,
body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-main);
  overflow: hidden;
}
#loader-overlay {
  position: fixed;
  inset: 0;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.page-frame {
  width: 100%;
  height: 100%;
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.2rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;              /* ⬅️ allow vertical scroll here */
  -webkit-overflow-scrolling: touch;  /* ⬅️ smoother on iOS */
}

body {
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
}

#app {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.page-images {
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.page-images.is-dragging {
  cursor: grabbing;
}

.page-images img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; /* optional, but makes drag feel cleaner */
}

/* iOS / modern mobile: use dynamic viewport height */
@supports (height: 100dvh) {
  #app {
    height: 100dvh;
  }
}

.view {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  overflow-x: hidden;
}

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

/* ---------------- ROULETTE VIEW ---------------- */

.roulette-layout {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.roulette-bg-titles {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  /*padding-inline: clamp(1.5rem, 5vw, 3rem);*/
  pointer-events: none;
  transition: transform 0.25s ease-out;
}

.roulette-title-line {
  font-size: clamp(3rem, 6vw, 6.25rem);
  text-transform: uppercase;
  letter-spacing: 0;
  color: #222;
  white-space: nowrap;
  font-weight: 800;
  line-height: 0.9; /* nice tight stack */
}

.roulette-title-line {
  font-size: clamp(3rem, 6vw, 6.25rem);
  text-transform: uppercase;
  letter-spacing: 0em;
  color: #222;
  white-space: nowrap;
  font-weight: 800;
  line-height: 0.82;
}

.roulette-title-line.active {
  color: var(--fg);
}

.roulette-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.roulette-image-frame {
  width: min(900px, 80vw);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #111;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.roulette-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roulette-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.icon-btn {
  border: none;
  outline: none;
  cursor: pointer;
  width: 6rem;
  height: 6rem;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: transform 0.12s ease-out, background 0.12s ease-out,
    box-shadow 0.12s ease-out;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
  pointer-events: auto;
  z-index: 11;
}

.icon-btn:hover {
  transform: translateY(-1px) scale(1.03);
  background: #2c2c2c;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45);
}

.icon-btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

#openAboutBtn {
  position: absolute;
  left: clamp(0.8rem, 3vw, 1.5rem);
  bottom: clamp(0.8rem, 3vw, 1.5rem);
}

#openProjectBtn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1.8rem, 4vh, 2.8rem);
}


@media (max-width: 768px) {
  .icon-btn {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.1rem;
  }

  .page-snap {
    right: clamp(0.8rem, 3vw, 1.2rem);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem);
  }

   #openAboutBtn,
  .page-snap,
  #openProjectBtn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem);
  }

}

/* ---------------- PROJECT / ABOUT VIEWS ---------------- */

.page-frame {
  width: 100%;
  height: 100%;
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.2rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;            
  -webkit-overflow-scrolling: touch;
}

.page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.icon-btn img {
  display: block;
  width: clamp(44px, 8vw, 72px);  /* responsive size */
  height: auto;
}

.page-title-group h1 {
  font-size: clamp(2.8rem, 6vw, 6.25rem);
  letter-spacing: 0em;
  text-transform: uppercase;
  min-width: 0;
}

.page-main {
  flex: 0 0 auto;              /* content defines height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* stack normally */
  gap: 1.2rem;
  min-width: 0; 
}


.page-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 900px;
  min-width: 0; 
}

.page-paragraph {
  font-size: 1.25rem;
  line-height: 1.4;
}

.meta {
  color: var(--muted);
  font-size: 1rem;
}

.link-wrapper a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--fg);
}

.link-wrapper a:hover {
  opacity: 0.85;
}

.page-images-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.page-images {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.page-images::-webkit-scrollbar {
  display: none;
}

.page-images img {
  height: 400px;
  width: 400px;
  object-fit: cover;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .page-images img {
    height: 260px;
    width: 260px;
  }
}

.page-snap {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(1rem, 3vw, 1.5rem));
  z-index: 20; /* above content */
}

.about-expertise {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* ---------------- POPUP ---------------- */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.popup-overlay.hidden {
  display: none;
}

.popup-card {
  background: #121212;
  border-radius: 1.5rem;
  padding: 1.5rem 1.8rem;
  min-width: 260px;
  max-width: 90vw;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}

.popup-text {
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.popup-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.popup-btn {
  border-radius: 999px;
  border: none;
  padding: 0.4rem 1.1rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.popup-btn.primary {
  background: #ffffff;
  color: #000000;
}

.popup-btn.secondary {
  background: #262626;
  color: #f5f5f5;
}

.hidden {
  display: none !important;
}