/* ============================================================
   MAIN.CSS — Global Design System
   İpek Ellinci · Fashion Portfolio Gallery
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  /* Palette */
  --bg-primary:     #FAF7F2;
  --bg-secondary:   #F3ECE0;
  --bg-dark:        #070A13;
  --royal-blue:     #0B25C9;
  --warm-yellow:    #DCA434;
  --text-primary:   #191B1F;
  --text-secondary: #565A63;

  /* Typography */
  --font-serif:        'Cormorant Garamond', serif;
  --font-sans:         'Plus Jakarta Sans', sans-serif;
  --font-handwriting:  'Caveat', cursive;

  /* Transitions */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.76, 0, 0.24, 1);
  --transition-base: 0.4s var(--ease-out-expo);
  --transition-slow: 0.8s var(--ease-out-expo);
  --transition-fast: 0.25s ease;

  /* Spacing */
  --section-pad-x:  6vw;
  --section-pad-y:  120px;

  /* Borders */
  --border-subtle: 1px solid rgba(11, 37, 201, 0.08);
}


/* ── Universal Reset ───────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style: none;
}

button {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}



::selection {
  background: var(--royal-blue);
  color: var(--bg-primary);
}


/* ── Typography Helpers ────────────────────────────────────── */
.font-serif {
  font-family: var(--font-serif);
  font-weight: 400;
}

.font-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}


/* ── Noise Overlay ─────────────────────────────────────────── */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}


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

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

::-webkit-scrollbar-thumb {
  background: rgba(11, 37, 201, 0.2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(11, 37, 201, 0.4);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 37, 201, 0.2) var(--bg-primary);
}


/* ── Section Header System ─────────────────────────────────── */
.section-header {
  text-align: center;
  padding: 100px var(--section-pad-x) 80px;
  position: relative;
}

.section-subtitle {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.section-subtitle::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm-yellow);
  flex-shrink: 0;
}
.section-title, .about-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--royal-blue);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  overflow: hidden;
}

.section-title span, .about-title span {
  display: block;
  transform: translateY(100%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-title.active span, .about-title.active span {
  transform: translateY(0);
}


.heart-pulse {
  display: inline-block;
  color: #d95368;
  animation: heartBeat 3s ease-in-out infinite;
  transform-origin: center;
  margin: 0 4px;
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  10% { transform: scale(1.05); }
  18% { transform: scale(1); }
  26% { transform: scale(1.03); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}

.section-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}


/* ── Scroll Reveal ─────────────────────────────────────────── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out-expo),
              transform 0.9s var(--ease-out-expo);
  will-change: opacity, transform;
}

.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children reveal elements */
.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal-item.active {
  opacity: 1;
  transform: translateY(0) !important;
}

/* Stagger children */
.scroll-reveal.active:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal.active:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal.active:nth-child(4) { transition-delay: 0.3s; }


/* ── Botanical Line-Art Decorations ────────────────────────── */

/*
 * .botanical-divider
 * A centered, delicate hand-drawn floral sprig.
 * Uses a thin-stroke SVG inline as a data URI.
 */
.botanical-divider {
  display: block;
  width: 70px;
  height: 90px;
  margin: 0 auto;
  opacity: 0.65;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90' fill='none' stroke='%230B25C9' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 88 L30 20'/%3E%3Cpath d='M30 65 Q20 55 14 42' /%3E%3Cpath d='M14 42 Q10 34 15 28 Q20 22 26 30 Q30 38 30 50'/%3E%3Cpath d='M30 55 Q40 45 46 32' /%3E%3Cpath d='M46 32 Q50 24 45 18 Q40 12 34 20 Q30 28 30 40'/%3E%3Cpath d='M30 38 Q24 28 22 18' /%3E%3Cpath d='M22 18 Q20 10 25 6 Q30 2 33 10 Q35 16 30 24'/%3E%3Ccircle cx='14' cy='40' r='2.5' fill='none'/%3E%3Ccircle cx='46' cy='30' r='2.5' fill='none'/%3E%3Ccircle cx='22' cy='16' r='2' fill='none'/%3E%3Cpath d='M30 75 Q22 70 18 60' /%3E%3Cpath d='M30 75 Q38 70 42 60' /%3E%3C/svg%3E");
}

.botanical-divider--yellow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90' fill='none' stroke='%23DCA434' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 88 L30 20'/%3E%3Cpath d='M30 65 Q20 55 14 42' /%3E%3Cpath d='M14 42 Q10 34 15 28 Q20 22 26 30 Q30 38 30 50'/%3E%3Cpath d='M30 55 Q40 45 46 32' /%3E%3Cpath d='M46 32 Q50 24 45 18 Q40 12 34 20 Q30 28 30 40'/%3E%3Cpath d='M30 38 Q24 28 22 18' /%3E%3Cpath d='M22 18 Q20 10 25 6 Q30 2 33 10 Q35 16 30 24'/%3E%3Ccircle cx='14' cy='40' r='2.5' fill='none'/%3E%3Ccircle cx='46' cy='30' r='2.5' fill='none'/%3E%3Ccircle cx='22' cy='16' r='2' fill='none'/%3E%3Cpath d='M30 75 Q22 70 18 60' /%3E%3Cpath d='M30 75 Q38 70 42 60' /%3E%3C/svg%3E");
}

/*
 * .floral-accent
 * Applied to containers whose ::before / ::after should show
 * a tiny botanical sprig as a decorative corner ornament.
 */
.floral-accent {
  position: relative;
}

.floral-accent::before {
  content: '';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 50px;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50' fill='none' stroke='%230B25C9' stroke-width='0.7' stroke-linecap='round'%3E%3Cpath d='M20 48 L20 15'/%3E%3Cpath d='M20 35 Q12 28 10 20 Q9 14 14 12 Q19 10 20 18 Q20 24 20 30'/%3E%3Cpath d='M20 28 Q28 22 30 14 Q31 8 26 6 Q22 8 22 14 Q22 20 20 24'/%3E%3Ccircle cx='10' cy='18' r='2' fill='none'/%3E%3Ccircle cx='30' cy='12' r='2' fill='none'/%3E%3Cpath d='M20 18 Q17 10 18 4' /%3E%3Ccircle cx='18' cy='4' r='1.5' fill='none'/%3E%3C/svg%3E");
}

/* Horizontal botanical line divider */
.botanical-line {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(11, 37, 201, 0.15) 20%,
    rgba(11, 37, 201, 0.15) 80%,
    transparent 100%
  );
  position: relative;
}

.botanical-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B25C9' stroke-width='0.6'%3E%3Cpath d='M12 20 L12 6'/%3E%3Cpath d='M12 14 Q8 10 7 7 Q9 6 10 9 Q11 11 12 13'/%3E%3Cpath d='M12 11 Q16 8 17 5 Q15 4 14 7 Q13 9 12 11'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3Ccircle cx='17' cy='5' r='1.5'/%3E%3C/svg%3E");
}


/* ── Global Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-pad-x: 7vw;
    --section-pad-y: 80px;
  }

  body {
    cursor: auto;
  }

  a, button {
    cursor: auto;
  }

  .section-header {
    padding: 70px var(--section-pad-x) 50px;
  }

  .section-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* ── Background Outlined Typography (Depth) ──────────────── */
.home-bg-typography,
.atelier-bg-typography,
.photography-bg-typography,
.documentaries-bg-typography,
.about-bg-typography {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-size: clamp(8rem, 20vw, 24rem);
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(11, 37, 201, 0.035);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  letter-spacing: 0.1em;
  user-select: none;
  will-change: transform;
}

.atelier-bg-typography {
  top: 15%;
}

.photography-bg-typography {
  top: 15%;
}

.documentaries-bg-typography {
  top: 15%;
}

.about-bg-typography {
  top: 15%;
}

/* ── Motion & Animation Accessibility Overrides ─────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }

  .scroll-reveal,
  .reveal-item,
  .section-title span,
  .about-title span,
  .title-line span {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    clip-path: none !important;
  }
}