/* ================================================================
   TAKET — UPGRADE.CSS
   Improvements: sticky nav · desktop grid · scroll reveals · footer
   Load AFTER index.css
   ================================================================ */

/* ───────────────────────────────────────────────
   1. STICKY SCROLL NAV
   ─────────────────────────────────────────────── */
.taket-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 8000;
  padding: 0 44px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0);
  transition: background 0.45s ease, opacity 0.45s ease;
  opacity: 0;
  pointer-events: none;
}
.taket-nav.is-visible {
  opacity: 1;
  pointer-events: all;
  background: rgba(0, 0, 0, 0.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.taket-nav__logo {
  height: 22px;
  width: auto;
  display: block;
  opacity: 0.95;
}
.taket-nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0; padding: 0;
}
.taket-nav__links a {
  font-family: "FieldGothicTEST-No.75", Arial, sans-serif !important;
  color: white;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.06em;
  opacity: 0.55;
  padding: 5px 16px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.taket-nav__links a:hover {
  opacity: 1;
  border-color: rgba(255,255,255,0.3);
}
@media (max-width: 767px) {
  .taket-nav {
    display: flex !important;
    padding: 0 20px;
    height: 52px;
  }
  .taket-nav__logo { height: 18px; }
  .taket-nav__links { gap: 0; }
  .taket-nav__links a {
    font-size: 0.85rem;
    padding: 4px 12px;
  }
}

/* Hide Nicepage hero pill buttons on mobile — replaced by taket-nav */
@media (max-width: 767px) {
  .u-section-1 .u-shape-1,
  .u-section-1 .u-shape-2,
  .u-section-1 .u-text-1,
  .u-section-1 .u-text-2 {
    display: none !important;
    visibility: hidden !important;
  }
}


/* ───────────────────────────────────────────────
   2. HIDE OLD NICEPAGE COLLAGE ON DESKTOP
      and free the section from hardcoded height
   ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .u-section-2 .u-image-2,  .u-section-2 .u-image-3,
  .u-section-2 .u-image-4,  .u-section-2 .u-image-5,
  .u-section-2 .u-image-6,  .u-section-2 .u-image-7,
  .u-section-2 .u-image-8,  .u-section-2 .u-image-9,
  .u-section-2 .u-image-10, .u-section-2 .u-image-11,
  .u-section-2 .u-image-12, .u-section-2 .u-image-13,
  .u-section-2 .u-image-14, .u-section-2 .u-image-15,
  .u-section-2 .u-image-16, .u-section-2 .u-image-17,
  .u-section-2 .u-image-18, .u-section-2 .u-image-19,
  .u-section-2 .u-image-20, .u-section-2 .u-image-21,
  .u-section-2 .project-hit,
  .u-section-2 .u-text-1,  .u-section-2 .u-text-2,
  .u-section-2 .u-text-3,  .u-section-2 .u-text-4,
  .u-section-2 .u-text-5,  .u-section-2 .u-text-6,
  .u-section-2 .u-text-8,  .u-section-2 .u-text-9,
  .u-section-2 .u-text-10, .u-section-2 .u-text-11 {
    display: none !important;
  }

  .u-section-2 .u-sheet-1 {
    min-height: auto !important;
    overflow: visible !important;
    padding-bottom: 80px;
  }

  /* keep the taket logo header visible */
  .u-section-2 .u-image-1 {
    display: block !important;
  }
}


/* ───────────────────────────────────────────────
   3. DESKTOP PROJECT GRID
   ─────────────────────────────────────────────── */
.desk-projects {
  display: none;
}

@media (min-width: 768px) {
  .desk-projects {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    width: calc(100% - 80px);
    max-width: 1360px;
    margin: 52px auto 0;
  }

  /* Alternating wide/narrow layout — editorial rhythm */
  .desk-proj:nth-child(1)  { grid-column: span 7; }
  .desk-proj:nth-child(2)  { grid-column: span 5; }
  .desk-proj:nth-child(3)  { grid-column: span 5; }
  .desk-proj:nth-child(4)  { grid-column: span 7; }
  .desk-proj:nth-child(5)  { grid-column: span 6; }
  .desk-proj:nth-child(6)  { grid-column: span 6; }
  .desk-proj:nth-child(7)  { grid-column: span 7; }
  .desk-proj:nth-child(8)  { grid-column: span 5; }
  .desk-proj:nth-child(9)  { grid-column: span 5; }
  .desk-proj:nth-child(10) { grid-column: span 7; }
}

.desk-proj {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: #0d0d0d;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  /* scroll reveal start state */
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.desk-proj.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger delay per card */
.desk-proj:nth-child(1)  { transition-delay: 0.00s; }
.desk-proj:nth-child(2)  { transition-delay: 0.07s; }
.desk-proj:nth-child(3)  { transition-delay: 0.00s; }
.desk-proj:nth-child(4)  { transition-delay: 0.07s; }
.desk-proj:nth-child(5)  { transition-delay: 0.00s; }
.desk-proj:nth-child(6)  { transition-delay: 0.07s; }
.desk-proj:nth-child(7)  { transition-delay: 0.00s; }
.desk-proj:nth-child(8)  { transition-delay: 0.07s; }
.desk-proj:nth-child(9)  { transition-delay: 0.00s; }
.desk-proj:nth-child(10) { transition-delay: 0.07s; }

.desk-proj__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

@media (hover: hover) {
  .desk-proj:hover .desk-proj__img {
    transform: scale(1.045);
  }
}

.desk-proj__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 22px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0)    28%,
    rgba(0,0,0,0)    52%,
    rgba(0,0,0,0.68) 100%
  );
  pointer-events: none;
  transition: background 0.4s ease;
}

@media (hover: hover) {
  .desk-proj:hover .desk-proj__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.38) 0%,
      rgba(0,0,0,0.04) 28%,
      rgba(0,0,0,0.04) 52%,
      rgba(0,0,0,0.76) 100%
    );
  }
}

.desk-proj__type {
  font-family: "FieldGothicTEST-No.82", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.82);
  text-transform: uppercase;
  align-self: flex-start;
}

.desk-proj__logo {
  display: block;
  width: auto;
  max-width: min(260px, 55%);
  max-height: 64px;
  height: auto;
  align-self: flex-start;
  filter: drop-shadow(0 2px 16px rgba(0,0,0,0.85));
  object-fit: contain;
  object-position: left bottom;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .desk-proj:hover .desk-proj__logo {
    transform: translateY(-3px);
  }
}

/* ───────────────────────────────────────────────
   4. DESCRIPTION TEXT — desktop show again
   (was hidden by the old desktop CSS in index.css)
   ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .u-section-2 .u-text-7 {
    display: block !important;
    width: calc(100% - 80px);
    max-width: 680px;
    margin: 48px auto 0 !important;
    font-size: 1rem !important;
    line-height: 1.65;
    text-align: center;
    color: rgba(255,255,255,0.55);
    /* scroll reveal */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease 0.15s, transform 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s;
  }
  .u-section-2 .u-text-7.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ───────────────────────────────────────────────
   5. FOOTER TAGLINE
   ─────────────────────────────────────────────── */
.taket-tagline {
  text-align: center;
  padding: 80px 40px 52px;
  border-top: 1px solid rgba(255,255,255,0.07);
  /* scroll reveal */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.taket-tagline.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.taket-tagline__line1 {
  display: block;
  font-family: "FieldGothicTEST-No.75", Arial, sans-serif;
  font-size: clamp(3.5rem, 8.5vw, 8rem);
  color: white;
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0;
}
.taket-tagline__line2 {
  display: block;
  font-family: "FieldGothicTEST-No.75", Arial, sans-serif;
  font-size: clamp(3.5rem, 8.5vw, 8rem);
  color: rgba(255,255,255,0.22);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0 0 28px 0;
}
.taket-tagline__sep {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin: 0 auto 0;
}
@media (max-width: 575px) {
  .taket-tagline {
    padding: 60px 24px 36px;
  }
}

/* override section-3 min-height since we added content above */
.u-section-3 .u-sheet-1 {
  min-height: auto !important;
  padding-bottom: 40px;
}


/* ───────────────────────────────────────────────
   6. SCROLL REVEALS — mobile cards
   (already partially in index.css, this reinforces)
   ─────────────────────────────────────────────── */
.mproj {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease;
}
.mproj.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* keep scale on active tap */
.mproj:active {
  transform: scale(0.975) !important;
}


/* ═══════════════════════════════════════════════
   MOBILE POLISH FIXES
   ═══════════════════════════════════════════════ */

/* ── Prevent any horizontal overflow / rogue scrollbar ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Hero: remove the dead black space below the video ──
   The section has min-height:100vh but the video is only
   56vh, leaving a big empty gap. Pin the section height
   to the video so there's no wasted black space.         */
@media (max-width: 767px) {
  .u-section-1 {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 0 !important;
  }
  .u-section-1 .u-sheet-1 {
    min-height: auto !important;
    padding-bottom: 12px !important;
  }
}

/* ── Section-2 Taket logo header — editorial treatment ── */
@media (min-width: 768px) {
  .u-section-2 .u-image-1 {
    display: block !important;
    width: 160px !important;
    height: auto !important;
    margin: 64px 0 0 60px !important;
    object-fit: contain !important;
    opacity: 0.9;
  }
}

/* ── Section-2 Taket logo: ensure the PNG renders,
   not the alt-text fallback in big system bold      ── */
@media (max-width: 767px) {
  .u-section-2 .u-image-1 {
    display: block !important;
    width: 140px !important;
    height: auto !important;
    margin: 36px auto 0 auto !important;
    object-fit: contain !important;
  }
}

/* ── Tighten the gap between last project card
   and the footer tagline section                   ── */
@media (max-width: 767px) {
  .u-section-2 .u-sheet-1 {
    padding-bottom: 0 !important;
  }
  .mobile-projects {
    padding-bottom: 0 !important;
  }
  .mobile-description {
    margin-bottom: 0 !important;
  }
  .taket-tagline {
    padding-top: 44px !important;
  }
}

/* ── "FRA OSLO" — make it more readable ── */
.taket-tagline__line2 {
  color: rgba(255,255,255,0.42) !important;
}

/* ── Social icons: clean outline style ── */
.taket-social-icons {
  gap: 20px !important;
  margin-top: 32px !important;
}
.taket-social-icons a {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.22);
  background: transparent;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.taket-social-icons a:hover {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
}
.taket-social-icons svg {
  width: 22px !important;
  height: 22px !important;
}

/* ── Stagger mobile card reveal delays ── */
.mproj:nth-child(1)  { transition-delay: 0.00s; }
.mproj:nth-child(2)  { transition-delay: 0.05s; }
.mproj:nth-child(3)  { transition-delay: 0.10s; }
.mproj:nth-child(4)  { transition-delay: 0.00s; }
.mproj:nth-child(5)  { transition-delay: 0.05s; }
.mproj:nth-child(6)  { transition-delay: 0.00s; }
.mproj:nth-child(7)  { transition-delay: 0.05s; }
.mproj:nth-child(8)  { transition-delay: 0.00s; }
.mproj:nth-child(9)  { transition-delay: 0.05s; }
.mproj:nth-child(10) { transition-delay: 0.00s; }


/* ═══════════════════════════════════════════════
   MOBILE FEEL — PHASE 2
   ═══════════════════════════════════════════════ */

/* ── 1. FIX: floating category label
   Some cards (e.g. Første søndag i november) render
   their .mproj__type OUTSIDE the image because the
   overlay isn't stretching to cover. Force the card
   to always be position:relative and the overlay
   absolutely positioned over the full card.          ── */
@media (max-width: 767px) {
  .mproj {
    position: relative !important;
  }
  .mproj__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
  }
  /* Ensure the media fills the card */
  .mproj__media {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }
  .mproj__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ── 2. IMAGE LOADING SHIMMER
   Before the image loads, the card shows an animated
   gradient sweeping left-to-right. Disappears as soon
   as the browser paints the image.                   ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@media (max-width: 767px) {
  .mproj__media {
    background: linear-gradient(
      90deg,
      #111 25%,
      #1c1c1c 50%,
      #111 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease infinite;
  }
  /* Once the img loads and paints, stop the shimmer */
  .mproj__media img {
    /* img sits on top — shimmer only shows through before paint */
    position: relative;
    z-index: 1;
  }
  /* When image has loaded (img-loaded class set by JS),
     kill the animation to save battery                 */
  .mproj__media.img-loaded {
    animation: none !important;
    background: #111 !important;
  }
}

/* ── 3. TAP FEEDBACK — satisfying press/release ──
   Uses both scale AND a very subtle brightness drop
   so it feels physically responsive, not just geometric. */
@media (max-width: 767px) {
  .mproj {
    /* Widen the transition to cover the new properties  */
    transition:
      opacity 0.55s ease,
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.2s ease,
      box-shadow 0.28s ease !important;
    border-radius: 14px;
  }
  .mproj:active {
    transform: scale(0.965) !important;
    filter: brightness(0.82) !important;
    transition:
      transform 0.12s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.12s ease !important;
  }

  /* Also add a gentle ripple highlight on the overlay on press */
  .mproj:active .mproj__overlay {
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.04) 0%,
      rgba(0,0,0,0)          35%,
      rgba(0,0,0,0)          55%,
      rgba(0,0,0,0.72)       100%
    ) !important;
  }
}

/* ── 4. HERO VIDEO — subtle scroll parallax
   As the user scrolls down, the video pinches slightly
   upward creating a depth illusion. Pure CSS on mobile
   using a scale clip trick (no JS scroll listener needed). ── */
@media (max-width: 767px) {
  .u-section-1 {
    overflow: hidden !important;
  }
  .u-image-1.hero-video {
    /* Slightly oversized so the parallax crop doesn't
       reveal the edges. Transition smooths any reflow. */
    transform-origin: center top;
    will-change: transform;
  }
}

/* ── 5. FOOTER TAGLINE — left-aligned on mobile for
   a more editorial, confident feel                   ── */
@media (max-width: 767px) {
  .taket-tagline {
    text-align: left !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .taket-tagline__sep {
    margin: 0 0 0 0 !important; /* flush left */
  }
  /* Tighter line-height on small screens */
  .taket-tagline__line1,
  .taket-tagline__line2 {
    line-height: 0.88 !important;
    letter-spacing: -0.02em !important;
  }
}

/* ── 6. MOBILE-ONLY: subtle category pill style
   Upgrade the plain text label into a frosted-glass
   pill so it reads clearly over any image.           ── */
@media (max-width: 767px) {
  .mproj__type {
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px !important;
    letter-spacing: 0.1em;
  }
}

/* ── 7. SMOOTH OVERSCROLL FEEL ── */
@media (max-width: 767px) {
  html {
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
  }
  .mobile-projects {
    /* Slightly increase gap between cards for breathing room */
    gap: 16px !important;
  }
}