/**
 * ALI YILDIZ — HAIR & BEAUTY CARE
 * Experimental Cinematic Animations & Transitions
 */

/* ==========================================================================
   Page Transition Curtain (Section 25 — Unidirectional Downward)
   ========================================================================== */
.page-transition-curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-brown);
  z-index: 99999;
  pointer-events: none;
  transform: translateY(-100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* Static cover state before initial paint on new page */
html.is-page-transitioning .page-transition-curtain {
  transform: translateY(0) !important;
  transition: none !important;
}

/* Sliding down from top to cover screen */
.page-transition-curtain.slide-in {
  transform: translateY(0) !important;
  transition: transform 0.48s cubic-bezier(0.76, 0, 0.24, 1) !important;
}

/* Sliding down out of bottom to reveal new page */
.page-transition-curtain.slide-out {
  transform: translateY(100%) !important;
  transition: transform 0.52s cubic-bezier(0.76, 0, 0.24, 1) !important;
}

/* Centered Logo Inside the Transition Curtain */
.curtain-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.curtain-emblem {
  width: clamp(42px, 5.5vw, 64px);
  height: auto;
  object-fit: contain;
  margin-bottom: 14px;
}

.curtain-brand-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--color-cream);
  text-transform: uppercase;
  line-height: 1.0;
  margin: 0;
}

.curtain-brand-sub {
  font-family: var(--font-body);
  font-size: clamp(0.6rem, 1vw, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.44em;
  color: var(--color-cream);
  opacity: 0.88;
  text-transform: uppercase;
  margin-top: 8px;
  line-height: 1.0;
}

/* ==========================================================================
   Intro Experience & Camera Zoom-Into-Logo (Sections 05 & 06)
   ========================================================================== */
.intro-stage {
  position: relative;
  width: 100%;
  height: 250vh; /* Scroll runway for camera zoom-through */
  background-color: var(--bg-primary);
  z-index: 20;
}

.intro-sticky-viewport {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Luxury Brown Canvas */
.intro-orange-canvas {
  position: absolute;
  inset: 0;
  background-color: var(--color-brown);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  will-change: opacity, transform, clip-path;
}

/* Logo Reveal Container */
.intro-logo-wrap {
  width: min(88vw, 980px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 12;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Centered Emblem Above ALI YILDIZ */
.intro-emblem-wrap {
  width: clamp(55px, 7vw, 98px);
  height: auto;
  margin-bottom: clamp(1.2rem, 2.6vh, 2.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 25;
  transform-style: preserve-3d;
  transform-origin: center center;
}

.intro-emblem-svg,
.intro-emblem-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  user-select: none;
  overflow: visible;
}

/* Wordmark & Sub-brand */
.intro-wordmark-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 5;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  transform-origin: center center;
}

.intro-brand-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.2vw, 5.2rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--color-cream);
  line-height: 1.0;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.intro-brand-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin-top: 14px;
  margin-bottom: 12px;
}

.intro-brand-ornament .ornament-line {
  width: 44px;
  height: 1px;
  background-color: var(--color-cream);
  opacity: 0.4;
}

.intro-brand-ornament .ornament-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-cream);
  opacity: 0.6;
}

.intro-brand-sub {
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.3vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.44em;
  color: var(--color-cream);
  opacity: 0.9;
  text-transform: uppercase;
  line-height: 1.0;
  margin: 0;
}

.intro-logo-svg {
  width: 100%;
  max-height: 380px;
  height: auto;
  overflow: visible;
}

/* Elegant Stroke / Clip Reveal of the Logo (Fashion Film Frame) */
.intro-logo-wrap.revealing {
  animation: logoFilmReveal 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes logoFilmReveal {
  0% {
    opacity: 0;
    filter: blur(14px);
  }
  40% {
    opacity: 0.7;
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Minimal Scroll Cue */
.intro-scroll-prompt {
  position: absolute;
  bottom: clamp(2rem, 5vh, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 15;
  opacity: 0;
  animation: promptFadeIn 1.2s 1.8s forwards ease;
  pointer-events: none;
}

.intro-scroll-prompt span {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-editorial);
  text-transform: uppercase;
  color: var(--color-cream-90);
}

.scroll-line-indicator {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--color-cream), transparent);
  animation: scrollPulse 2.2s infinite ease-in-out;
}

@keyframes promptFadeIn {
  to { opacity: 0.85; }
}

@keyframes scrollPulse {
  0% { transform: scaleY(0.2); transform-origin: top; opacity: 0.2; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0.2); transform-origin: bottom; opacity: 0.2; }
}

/* Revealed Hero Backdrop (100% Full-Bleed Edge-to-Edge) */
.intro-revealed-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 5;
  background-color: var(--color-brown);
  opacity: 0;
  transform: scale(1.06);
  will-change: transform, opacity;
  pointer-events: none;
}

.intro-hero-img {
  position: absolute;
  /* Start below the fixed header so the storefront sign stays readable; crop from the bottom */
  top: var(--header-height-scrolled);
  left: 0;
  width: 100%;
  height: calc(100% - var(--header-height-scrolled));
  object-fit: cover;
  object-position: center top;
  display: block;
}

.intro-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(99, 49, 32, 0.12) 0%,
    rgba(99, 49, 32, 0) 25%,
    rgba(99, 49, 32, 0.12) 60%,
    rgba(99, 49, 32, 0.55) 80%,
    rgba(99, 49, 32, 0.92) 93%,
    rgb(99, 49, 32) 100%    /* fully opaque so the photo melts into the next section (no visible edge) */
  );
  pointer-events: none;
}

.intro-hero-continue {
  position: absolute;
  bottom: clamp(2rem, 5vh, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 4;
}

.intro-hero-continue .continue-line {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, var(--color-cream), transparent);
  animation: scrollPulse 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* ==========================================================================
   Scroll-Linked Text & Image Reveals
   ========================================================================== */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.22s; }
.stagger-3 { transition-delay: 0.35s; }
.stagger-4 { transition-delay: 0.48s; }

/* Image Clip Reveal */
.clip-reveal {
  clip-path: inset(10% 0 10% 0);
  opacity: 0.4;
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1);
}

.clip-reveal.in-view {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* ==========================================================================
   Services Gateway Floating Image Reveal (Section 12)
   ========================================================================== */
.services-stage {
  position: relative;
}

.floating-service-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  height: 480px;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
  border: 1px solid var(--border-medium);
  background-color: var(--color-brown);
  overflow: hidden;
}

.floating-service-preview.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ==========================================================================
   Accessibility: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .intro-stage {
    height: auto;
  }
  
  .intro-sticky-viewport {
    position: relative;
    height: auto;
  }
  
  .intro-orange-canvas {
    display: none;
  }
  
  .intro-revealed-hero {
    opacity: 1;
    position: relative;
    transform: none;
  }
}

/* The intro can also be opened with a click/tap (js/intro-transition.js) */
.intro-stage {
  cursor: pointer;
}

.intro-stage:focus-visible {
  outline: 1px solid var(--color-orange);
  outline-offset: -6px;
}