/* REFRACT — STYLES, TYPOGRAPHY & CHOREOGRAPHY ENGINE */

@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background-color: #030303;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
    touch-action: pan-y;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Poppins Typography Classes */
.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* Minimalist Dark Scrollbar */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: #030303;
}
::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 9999px;
}

/* Fixed Fullscreen Viewport */
#video-viewport {
  height: 100vh;
  height: 100dvh;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* -------------------------------------------------------------
   DESKTOP VIDEO FRAMING (16:9 Landscape)
   - object-position center 6% keeps the sky above the gate completely
     intact and prevents the top of the Torii gate from touching the
     browser tabs or toolbar.
------------------------------------------------------------- */
#video-desktop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 6%;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* -------------------------------------------------------------
   MOBILE VIDEO FRAMING (9:16 Portrait Cropping)
   - Automatically eliminates the side black pillarboxes on 0001-0250_fdvzi2.mp4
   - The central 9:16 scene (608px out of 1920px) expands to occupy
     100% of the mobile phone screen edge-to-edge.
------------------------------------------------------------- */
#video-mobile-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#video-mobile {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 1920 / 607.5 = 3.1605x expansion removes side black padding */
  width: max(calc(100dvh * 1.7778), calc(100vw * 3.161));
  height: max(100dvh, calc(100vw * 1.7778));
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
  will-change: transform, opacity;
}

/* -------------------------------------------------------------
   ABOUT US SECTION OVERLAY (Directly over water, zero background)
------------------------------------------------------------- */
#about-section {
  will-change: opacity;
  pointer-events: none;
  background: transparent !important;
}

#about-card {
  will-change: transform;
  background: transparent !important;
}

/* -------------------------------------------------------------
   PORTFOLIO STACK SECTION (Alternating swipe left/right cards)
------------------------------------------------------------- */
#portfolio-section {
  will-change: opacity;
  pointer-events: none;
  background: transparent !important;
}

#portfolio-container {
  will-change: transform;
}

.portfolio-card {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
}

/* -------------------------------------------------------------
   CREDITS SECTION (Below the raft on the water)
------------------------------------------------------------- */
#credits-section {
  will-change: opacity;
  pointer-events: none;
  background: transparent !important;
}

#credits-wrap {
  will-change: transform;
}

#credits-with,
#credits-names,
#credits-instagram {
  will-change: transform, opacity;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#scroll-hint {
  will-change: opacity;
}

/* Brand Logo Smooth Hover */
#brand-logo {
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.95));
  transition: transform 0.25s ease, opacity 0.25s ease;
}
#brand-logo:hover {
  transform: scale(1.03);
}