/**
 * www/lp/webdesign-3/css/style.css
 * Architectural & Refined Digital Craft Styling for webdesign-3
 */

/* Definer Font Family Declarations */
@font-face {
  font-family: 'Definer';
  font-weight: 300;
  font-style: normal;
  src: url('/definer/fonts/Definer-Light.woff2?v=2') format('woff2'),
       url('/definer/fonts/Definer-Light.ttf?v=2') format('truetype');
}
@font-face {
  font-family: 'Definer';
  font-weight: 400;
  font-style: normal;
  src: url('/definer/fonts/Definer-Regular.woff2?v=2') format('woff2'),
       url('/definer/fonts/Definer-Regular.ttf?v=2') format('truetype');
}
@font-face {
  font-family: 'Definer';
  font-weight: 700;
  font-style: normal;
  src: url('/definer/fonts/Definer-Bold.woff2?v=2') format('woff2'),
       url('/definer/fonts/Definer-Bold.ttf?v=2') format('truetype');
}

:root {
  --k-ink: #0F172A;
  --k-ink-subtle: #475569;
  --k-slate-light: #F8FAFC;
  --k-brass: #D97706;
  --k-brass-soft: rgba(217, 119, 6, 0.12);
  --k-border-subtle: rgba(226, 232, 240, 0.8);
}

body {
  font-family: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #F8FAFC;
  color: #0F172A;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Definer Typography */
.font-definer {
  font-family: 'Definer', sans-serif;
  letter-spacing: 0.04em;
}

/* Sleek Japanese Display & Headings */
.font-sleek-jp {
  font-family: 'Zen Kaku Gothic New', -apple-system, sans-serif;
  letter-spacing: -0.02em;
}

/* Clean Technical Mono */
.font-mono-hud {
  font-family: 'JetBrains Mono', 'Oxanium', monospace;
  letter-spacing: 0.04em;
}

/* Subtle Architectural Grid Background */
.y2k-grid {
  background-color: #F8FAFC;
  background-image: 
    radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(15, 23, 42, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.015) 1px, transparent 1px);
  background-size: 32px 32px, 64px 64px, 64px 64px;
}

/* Chrome Specular Text Gradient */
.text-chrome {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 35%, #CBD5E1 70%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.text-chrome-dark {
  background: linear-gradient(180deg, #0F172A 0%, #334155 50%, #1E293B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Refined Translucent Glass */
.cyber-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 
    0 15px 35px -10px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(226, 232, 240, 0.6);
}

.cyber-glass-dark {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Subtle Film / Scanline Overlay for Video */
.scanline-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(15, 23, 42, 0) 50%, 
    rgba(0, 0, 0, 0.2) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.25;
}

/* Interactive Video Container */
.hero-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05) brightness(0.95);
}

/* Refined Pill Badge */
.cyber-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.8);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1E293B;
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.04);
}

/* Blinking dot */
@keyframes y2k-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.y2k-blinker {
  animation: y2k-blink 1.5s infinite;
}

/* Card hover scaling */
.y2k-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.y2k-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.1);
}

/* ============================================================
   Monumental Animated Y2K Typography
   ============================================================ */
.hero-title-group {
  font-size: clamp(3.5rem, 13.5vw, 15.5rem);
  line-height: 0.84;
  letter-spacing: -0.035em;
  perspective: 1000px;
}

.hero-title-line {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
}

.y2k-char {
  display: inline-block;
  transform-origin: 50% 80%;
  animation: y2kEntrance 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0s);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease;
  will-change: transform, opacity;
  cursor: default;
}

.y2k-char:hover {
  transform: translateY(-10px) scale(1.08);
  filter: drop-shadow(0 15px 30px rgba(255, 255, 255, 0.5));
}

@keyframes y2kEntrance {
  0% {
    opacity: 0;
    transform: translateY(50px) rotateX(25deg) scale(0.92);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

.y2k-float-1 {
  animation: y2kAmbientFloat 7s ease-in-out infinite alternate;
}

.y2k-float-2 {
  animation: y2kAmbientFloat 7s ease-in-out 1.2s infinite alternate;
}

@keyframes y2kAmbientFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(4px);
  }
}

/* Aurora Color Gradient & Shimmer for Hero Title */
.text-aurora-animated,
.text-chrome-animated {
  background: linear-gradient(
    115deg, 
    #38BDF8 0%, 
    #2DD4BF 16%, 
    #34D399 32%, 
    #FEF08A 46%, 
    #FFFFFF 54%, 
    #F472B6 68%, 
    #C084FC 82%, 
    #38BDF8 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: auroraShimmer 8s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 24px rgba(56, 189, 248, 0.35)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

@keyframes auroraShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.y2k-char:hover {
  transform: translateY(-10px) scale(1.08);
  filter: drop-shadow(0 15px 35px rgba(56, 189, 248, 0.7)) drop-shadow(0 0 25px rgba(244, 114, 182, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  .y2k-char,
  .y2k-float-1,
  .y2k-float-2,
  .text-aurora-animated,
  .text-chrome-animated {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ========================================================================= */
/* Editorial & Vertical Typography Utilities                                  */
/* ========================================================================= */
.writing-vertical {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;
}

.writing-vertical-upright {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
}

.editorial-divider {
  width: 1px;
  background: linear-gradient(180deg, rgba(203, 213, 225, 0.8) 0%, rgba(203, 213, 225, 0.1) 100%);
}

/* ========================================================================= */
/* Editorial Breathing Margins & Layout Shifts (Calibrated Sweet Spot)        */
/* ========================================================================= */
.editorial-story {
  padding-top: clamp(4rem, 7vw, 7.5rem);
  padding-bottom: clamp(4rem, 7vw, 7.5rem);
}

.editorial-shift-block {
  margin-bottom: clamp(4.5rem, 8vw, 8rem);
}

.editorial-shift-block:last-child {
  margin-bottom: 0;
}

.experiments-section {
  padding-top: clamp(4rem, 7vw, 7.5rem);
  padding-bottom: clamp(4rem, 7vw, 7.5rem);
}

.cta-section {
  padding-top: clamp(5rem, 9vw, 9.5rem);
  padding-bottom: clamp(5rem, 9vw, 9.5rem);
}

/* ========================================================================= */
/* Hero Sticky Curtain Reveal & Overlap Layer                                */
/* ========================================================================= */
.hero-curtain {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  z-index: 1;
  overflow: hidden;
}

.main-curtain {
  position: relative;
  z-index: 10;
  background-color: #F8FAFC;
  border-top-left-radius: clamp(2rem, 4vw, 3.5rem);
  border-top-right-radius: clamp(2rem, 4vw, 3.5rem);
  box-shadow: none;
  transition: box-shadow 0.25s ease-out;
}

.main-curtain.has-shadow {
  box-shadow: 
    0 -25px 50px -12px rgba(15, 23, 42, 0.45),
    0 -1px 0 rgba(255, 255, 255, 0.8) inset;
}