/* Custom Styles for Kristoff Estefano Landing Page */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --color-accent: #E11227;
  --color-secondary: #000000;
  --color-text-muted: #7A7A7A;
}

html {
  scroll-behavior: smooth;
  background-color: #000000;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  position: relative;
  font-variant-numeric: lining-nums;
  background-color: #000000;
}

main {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* Starfield Canvas Background */
#starfield-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Autohide Transition for Header with Safe Area Inset Support */
#keheader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}

@media (min-width: 768px) {
  #keheader {
    padding-left: max(3rem, env(safe-area-inset-left));
    padding-right: max(3rem, env(safe-area-inset-right));
  }
}

/* Custom Red Line for headings */
.redline {
  display: inline-block;
  width: 2.5rem;
  height: 2px;
  background-color: var(--color-accent);
  vertical-align: middle;
  margin-right: 0.75rem;
}

/* Swiper Pagination Styling (Touch-Accessible per Apple HIG) */
.cases-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 36px !important;
  position: relative !important;
  bottom: auto !important;
}

.custom-bullet {
  position: relative !important;
  width: 44px !important;
  height: 1px !important;
  border-radius: 0 !important;
  background-color: #7A7A7A !important;
  opacity: 0.5 !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  display: inline-block;
}

.custom-bullet::before {
  content: '';
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -4px;
  right: -4px;
  cursor: pointer;
}

.custom-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-accent) !important;
  width: 44px !important;
  opacity: 1 !important;
}

/* Designer Slider Navigation Arrows */
.cases-nav-prev,
.cases-nav-next {
  user-select: none;
  -webkit-user-select: none;
}

.cases-nav-prev.swiper-button-disabled,
.cases-nav-next.swiper-button-disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cases-nav-prev svg,
.cases-nav-next svg {
  will-change: transform;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #E11227;
}

/* Smooth selection */
::selection {
  background: #E11227;
  color: #ffffff;
}

/* Luxury Motion Easing for SAL */
[data-sal] {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Cinematic Character-by-Character Text Reveal */
.text-reveal-container {
  perspective: 1000px;
}

.char-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotateX(-20deg);
  filter: blur(8px);
  will-change: transform, opacity, filter;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.char-reveal.revealed {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
  filter: blur(0px);
}

.word-wrap {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 640px) {
  #manifest-heading {
    letter-spacing: 1.5px !important;
  }
}

/* First line spacer for manifest heading (desktop/tablet only) */
.first-line-indent {
  display: none;
  width: 11%;
  height: 1px;
  vertical-align: baseline;
}

@media (min-width: 640px) {
  .first-line-indent {
    display: inline-block;
  }
}

/* Dual-Buffer Cross-Fading Background for Artists Section */
.artists-bg-layer {
  will-change: opacity, transform;
  transform: scale(1);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.artists-bg-layer.active {
  opacity: 1 !important;
  transform: scale(1.04);
}

/* 1. Theatrical Overture Preloader */
#overture-preloader {
  transition: clip-path 0.95s cubic-bezier(0.85, 0, 0.15, 1),
              opacity 0.6s ease;
  clip-path: inset(0 0 0 0);
  will-change: clip-path, opacity;
}

#overture-preloader.loaded {
  clip-path: inset(0 0 100% 0);
  pointer-events: none !important;
}

/* 2. Magnetic Theatrical Cursor System */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor input,
  body.has-custom-cursor [role="button"] {
    cursor: none !important;
  }
}

#lux-cursor {
  will-change: transform;
}

#cursor-dot {
  will-change: transform, opacity;
  transition: opacity 0.2s ease;
}

#cursor-ring {
  will-change: transform, width, height, border-color, background-color;
  transition: transform 0.08s ease-out,
              width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              background-color 0.3s ease,
              border-radius 0.3s ease;
}

/* Cursor State: Swiper Drag */
#cursor-ring.is-swiper-hover {
  width: 90px !important;
  height: 90px !important;
  background-color: rgba(0, 0, 0, 0.85);
  border-color: #E11227;
  backdrop-filter: blur(8px);
}

/* Cursor State: Artist Collab Reveal */
#cursor-ring.is-collab-hover {
  width: 120px !important;
  height: 38px !important;
  border-radius: 20px !important;
  background-color: #E11227;
  border-color: #E11227;
}

/* Cursor State: Interactive Link / Button Hover */
#cursor-ring.is-link-hover {
  width: 54px !important;
  height: 54px !important;
  border-color: #E11227;
  background-color: rgba(225, 18, 39, 0.1);
}

/* Cursor Text Visibility */
#cursor-ring.is-swiper-hover #cursor-text,
#cursor-ring.is-collab-hover #cursor-text {
  opacity: 1 !important;
}

/* 3. 35mm Theatrical Film Grain Texture */
.theatrical-grain-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  animation: grain-shimmer 0.4s steps(3) infinite;
}

@keyframes grain-shimmer {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2px, 1px); }
  66% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

/* 4. Monumental Architectural Ticker */
.monumental-ticker-wrap {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  contain: paint;
}

.text-stroke-white {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
  color: transparent;
  transition: -webkit-text-stroke-color 0.3s ease;
}

.ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: ticker-slide 32s linear infinite;
}

.monumental-ticker-wrap:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Prevent SAL slide transforms from causing viewport horizontal overflow */
[data-sal|=slide] {
  max-width: 100%;
}

/* 5. Fullscreen Theatrical Showreel Modal */
#showreel-modal.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 6. Off-Canvas Drawer Safe Areas & Touch Insets */
#off-canvas-drawer {
  padding-top: max(1.5rem, env(safe-area-inset-top));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* 7. Artist Collaboration Item Active State for Touch Screens */
.artist-item.is-active {
  background-color: rgba(255, 255, 255, 0.08);
}

.artist-item.is-active svg path {
  fill: var(--color-accent) !important;
  transition: fill 0.3s ease;
}