/* ==========================================================================
   Dr. Fábio Vieira - Personal Portfolio Design System & Custom Animations
   ========================================================================== */

/* Import premium typography from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* CSS Variables for design tokens */
:root {
  --color-bg-light: #faf9f6; /* Warm off-white / Alabaster */
  --color-bg-pure: #ffffff;
  --color-primary: #0b192c;  /* Deep Professional Navy */
  --color-secondary: #1e293b; /* Slate Dark */
  --color-accent: #dc2626;    /* Crimson Red (tie matching) */
  --color-accent-hover: #b91c1c;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', Inter, sans-serif;
  
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* Offsets scroll position for fixed header */
}

/* Custom Scrollbar for a premium look */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-light);
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--color-muted);
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-light);
  color: var(--color-secondary);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Typography Overrides */
.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

/* ==========================================================================
   SCROLL-DRIVEN BLUR-TO-TEXT EFFECT
   ========================================================================== */

.blur-text {
  opacity: 1; /* Main wrapper stays visible */
}

.blur-word {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(12px) translateZ(0);
  transition: filter 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: filter, opacity, transform;
}

.blur-text.revealed .blur-word {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0) translateZ(0);
}

/* ==========================================================================
   3D BOOK COMPONENT (ACERVO BIBLIOGRÁFICO)
   ========================================================================== */

.book-card {
  perspective: 1200px;
}

.book-3d {
  width: 150px;
  height: 220px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-22deg) rotateX(10deg) rotateZ(-1.5deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 12px 12px 25px rgba(0, 0, 0, 0.28), 
              -2px 2px 6px rgba(255, 255, 255, 0.15) inset;
}

.book-card:hover .book-3d {
  transform: rotateY(-5deg) rotateX(3deg) rotateZ(0deg);
  box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.35);
}

/* Spine effect for 3D realism */
.book-3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  transform: rotateY(-90deg);
  transform-origin: left;
  transform-style: preserve-3d;
  border-radius: 2px 0 0 2px;
}

/* Glossy highlight on book cover */
.book-3d::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
              rgba(255, 255, 255, 0.15) 0%, 
              rgba(255, 255, 255, 0) 8%, 
              rgba(0, 0, 0, 0.05) 90%, 
              rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
  border-radius: 0 4px 4px 0;
}

/* Pages thickness effect when rotated */
.book-pages-layer {
  position: absolute;
  top: 3px;
  right: -5px;
  width: 6px;
  height: calc(100% - 6px);
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-left: none;
  transform: rotateY(90deg);
  transform-origin: left;
  transform-style: preserve-3d;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* ==========================================================================
   UI GLASSMORPHISM & BLENDS
   ========================================================================== */

.glass-nav {
  background-color: rgba(250, 249, 246, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

/* Fade effects */
.mask-gradient-left {
  mask-image: linear-gradient(to right, transparent, black 15%);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%);
}

.mask-gradient-bottom {
  mask-image: linear-gradient(to bottom, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent);
}

/* Micro-animations */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Active navigation link */
.active-nav-link {
  color: var(--color-accent) !important;
}

.active-nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(1) !important;
}

/* Form controls focus */
.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Sticky Image Styling for blend-in */
.image-blend-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 50%, rgba(250, 249, 246, 0) 0%, rgba(250, 249, 246, 0.4) 70%, rgba(250, 249, 246, 1) 100%);
  pointer-events: none;
}

/* Image style for the 3D book cover face */
.book-cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   MINIMALIST FORMAL PAGE ENTRANCE ANIMATIONS
   ========================================================================== */

/* Header Fade In */
#main-header.entrance-header {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
#main-header.entrance-header.active {
  opacity: 1;
}

/* Portrait Gentle Fade In (opacity only, no zoom, no blur) */
.entrance-portrait {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.entrance-portrait.active {
  opacity: 1;
}

/* Decorative Background Logo Fade In */
#hero-logo-bg {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
#hero-logo-bg.active {
  opacity: 1;
}

/* Editorial slide down & fade-in (for label tag) */
.entrance-fade-down {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.entrance-fade-down.active {
  opacity: 1;
  transform: translateY(0);
}

/* Editorial slide up & fade-in (for name, credentials, and CTAs) */
.entrance-slide-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.entrance-slide-up.active {
  opacity: 1;
  transform: translateY(0);
}





/* Scroll lock when loader is active */
body.loader-active {
  overflow: hidden !important;
  height: 100vh !important;
}

/* ==========================================================================
   COMPONENTIZED LOGO SYSTEM
   ========================================================================== */
.logo-container {
  display: flex;
  align-items: center;
  --logo-height: 2rem; /* Default header height (32px) */
  height: var(--logo-height);
  position: relative;
  text-decoration: none;
}

@media (min-width: 640px) {
  .logo-container {
    --logo-height: 2.25rem; /* sm:h-9 (36px) */
  }
}

.logo-monogram {
  position: relative;
  height: 100%;
  width: calc(var(--logo-height) * 189 / 218);
  flex-shrink: 0;
}

.logo-shape {
  position: absolute;
  object-fit: contain;
  display: block;
}

.logo-f {
  top: 0;
  left: 0;
  width: 93.65%;
  height: 69.72%;
}

.logo-v {
  top: 43.12%;
  left: 15.34%;
  width: 84.66%;
  height: 56.88%;
}

.logo-text {
  height: 74.77%;
  margin-left: calc(var(--logo-height) * 0.252);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* ==========================================================================
   INTRO LOADER STYLE & SEQUENCE
   ========================================================================== */
#intro-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-bg-light); /* Warm off-white #faf9f6 */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.6s ease-in-out, background-color 1.4s ease-in-out;
}

#intro-loader.fade-bg {
  background-color: rgba(250, 249, 246, 0) !important;
}

#loader-logo-container {
  display: flex;
  align-items: center;
  --logo-height: 4rem; /* Initial loader monogram size for mobile (64px) */
  height: var(--logo-height);
  position: relative;
}

@media (min-width: 640px) {
  #loader-logo-container {
    --logo-height: 5.5rem; /* Initial loader monogram size for desktop (88px) */
  }
}

#loader-logo-f {
  opacity: 0;
  transform: translate(-30px, -30px);
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1);
}

#loader-logo-f.active {
  opacity: 1;
  transform: translate(0, 0);
}

#loader-logo-v {
  opacity: 0;
  transform: translate(30px, 30px);
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1);
}

#loader-logo-v.active {
  opacity: 1;
  transform: translate(0, 0);
}

#loader-text {
  opacity: 0;
  transform: translateX(15px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

#loader-text.active {
  opacity: 1;
  transform: translateX(0);
}

#loader-streak {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
  filter: brightness(0) invert(1) opacity(0.8); /* Converts duplicates to semi-transparent white silhouettes */
  /* Diagonal band clip-path starting fully to the left */
  clip-path: polygon(-45% 0%, -15% 0%, -35% 100%, -65% 100%);
}

#loader-streak.animate {
  animation: streak-anim 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes streak-anim {
  0% {
    clip-path: polygon(-45% 0%, -15% 0%, -35% 100%, -65% 100%);
  }
  100% {
    clip-path: polygon(125% 0%, 155% 0%, 135% 100%, 105% 100%);
  }
}

/* Scroll to Explore Indicator */
#scroll-indicator {
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes scroll-line-anim {
  0% {
    transform: translateY(-100%);
  }
  60% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.scroll-line-fill {
  animation: scroll-line-anim 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}