/* =========================================================
   Natanel Kaliner — Portfolio Stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Anton';
  src: url('../1/fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  background: #fff;
  color: #000;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---- Selection ---- */
::selection { background: #000; color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #000; }

/* =========================================================
   KEYFRAME ANIMATIONS
   ========================================================= */

/* Hero scroll-line pulse */
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  30%  { transform: scaleY(1); transform-origin: top; opacity: 0.6; }
  70%  { transform: scaleY(1); transform-origin: bottom; opacity: 0.6; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* Marquee horizontal scroll */
@keyframes mqScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Marquee reverse (right-to-left reversed) */
@keyframes mqScrollRev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Marquee star spin */
@keyframes mqSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Marquee star float — gentle Y drift */
@keyframes mqFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* Footer status dot pulse */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.14); }
  50%       { box-shadow: 0 0 0 8px rgba(255,255,255,0.04); }
}

/* Hero mouse scroll indicator */
@keyframes scrollMouse {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(10px); opacity: 0; }
  61%  { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   CASE STUDY — TICKER
   ========================================================= */
.mq-track {
  display: inline-flex;
  gap: 56px;
  animation: mqScroll 40s linear infinite;
}

/* =========================================================
   CASE STUDY — NAV
   ========================================================= */
.cs-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #E8E8E8;
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* position: sticky creates a new containing block — dropdown absolute children position relative to it */
}

/* =========================================================
   MOBILE RESPONSIVE — GLOBAL OVERRIDES
   ========================================================= */

@media (max-width: 768px) {
  html { overflow-x: hidden; }

  /* Override 40px side padding on case study sections */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Case study nav compact padding */
  .cs-nav {
    padding: 0 16px !important;
  }

  /* Hero image aspect ratio — don't force ultra-wide on mobile */
  img[style*="21/9"] {
    aspect-ratio: 16/9 !important;
  }

  /* Flex-wrap all flex rows that could overflow */
  .flex-row { flex-wrap: wrap !important; }
}

@media (max-width: 640px) {
  /* Tighten case study nav even more on small phones */
  .cs-nav { padding: 0 12px !important; height: 56px !important; }
}

/* =========================================================
   IPHONE SAFE AREA — viewport-fit=cover support
   ========================================================= */
html {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Prevent text from being unreadably small on mobile */
@media (max-width: 430px) {
  p, li, span { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Ensure tap targets are at least 44px */
  button, a { min-height: 44px; }

  /* Videos / iframes never overflow */
  iframe, video { max-width: 100% !important; }
}

/* =========================================================
   SCROLLBAR — hide on mobile for cleaner look
   ========================================================= */
@media (max-width: 768px) {
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}

/* Stage cards horizontal scroll — hide scrollbar across all browsers */
.stage-scroll::-webkit-scrollbar { display: none; }