/* ==========================================================================
   IKURA ISTANBUL — Art Direction Layer
   Editorial, cinematic & tactile refinements (film grain, gold cursor,
   scroll reveals, manifesto typography, lookbook, marquee, chapters)
   ========================================================================== */

/* ---------- 1. Analog Film Grain (whole page) ---------- */
.film-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 60;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.9 0 0 0 0 0.75 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.2s steps(6) infinite;
}
html[data-theme="ivory"] .film-grain { opacity: 0.045; mix-blend-mode: multiply; }

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- 2. Gold Atelier Cursor (desktop only) ---------- */
.lux-cursor-dot,
.lux-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 70;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lux-cursor-dot {
  width: 6px;
  height: 6px;
  background: #C59B32;
}
.lux-cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(197, 155, 50, 0.65);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.45s ease, opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  letter-spacing: 0.25em;
  color: #110D0A;
  text-transform: uppercase;
}
.lux-cursor-ring.is-hover {
  width: 74px;
  height: 74px;
  background: rgba(197, 155, 50, 0.92);
  border-color: transparent;
}
body.cursor-ready .lux-cursor-dot,
body.cursor-ready .lux-cursor-ring { opacity: 1; }

@media (hover: none), (max-width: 1024px) {
  .lux-cursor-dot, .lux-cursor-ring { display: none; }
}

/* ---------- 3. Scroll Progress Hairline ---------- */
.scroll-hairline {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 65;
  background: linear-gradient(90deg, #8A6421, #F3E5AB, #C59B32);
  box-shadow: 0 0 12px rgba(197, 155, 50, 0.6);
}

/* ---------- 4. Scroll Reveal System ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="zoom"] { transform: scale(0.94); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Curtain image reveal (a leather "unveil") */
.curtain-reveal { position: relative; overflow: hidden; }
.curtain-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1A1511;
  transform-origin: top;
  transition: transform 1.6s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: 2;
}
.curtain-reveal.is-revealed::after { transform: scaleY(0); }
.curtain-reveal img {
  transform: scale(1.18);
  transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.curtain-reveal.is-revealed img { transform: scale(1); }

/* Split headline (word by word rise) */
.split-line { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.split-word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-revealed .split-word { transform: translateY(0); }

/* ---------- 5. Hero Art Direction ---------- */
.hero-ken-burns { animation: kenBurns 22s ease-in-out infinite alternate; }
@keyframes kenBurns {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}

.hero-outline-word {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(7rem, 22vw, 22rem);
  line-height: 0.8;
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(197, 155, 50, 0.22);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.vertical-caption {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}

.scroll-cue-line {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, rgba(197,155,50,0), #C59B32);
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -30%;
  width: 1px;
  height: 30%;
  background: #F3E5AB;
  animation: cueDrop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cueDrop { to { top: 110%; } }

/* ---------- 6. Chapter Numerals ---------- */
.chapter-mark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #C59B32;
}
.chapter-mark .roman {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.05em;
  text-transform: none;
}
.chapter-mark .rule {
  width: 54px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* ---------- 7. Manifesto ---------- */
.manifesto-text {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 4.4rem);
  line-height: 1.16;
  letter-spacing: 0.005em;
}
.manifesto-text em {
  font-style: italic;
  background: linear-gradient(135deg, #C59B32 0%, #F3E5AB 50%, #A66F48 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.manifesto-word {
  opacity: 0.14;
  transition: opacity 0.6s ease;
}
.manifesto-word.lit { opacity: 1; }

.drop-cap::first-letter {
  float: left;
  font-family: 'Cormorant Garamond', serif;
  font-size: 4.6em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: #C59B32;
}

/* ---------- 8. Infinite Marquee ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  gap: 3.5rem;
  animation: marqueeMove 48s linear infinite;
  padding-right: 3.5rem;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 223, 210, 0.45);
  transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease;
}
.marquee-item:hover { color: #C59B32; -webkit-text-stroke-color: #C59B32; }
.marquee-star { color: #C59B32; font-size: 1.4rem; align-self: center; }
@keyframes marqueeMove { to { transform: translateX(-50%); } }

/* ---------- 9. Horizontal Lookbook ---------- */
.lookbook-rail {
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 max(1rem, calc((100vw - 80rem) / 2 + 2.5rem)) 2rem;
  scrollbar-width: none;
  cursor: grab;
}
.lookbook-rail::-webkit-scrollbar { display: none; }
.lookbook-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.lookbook-rail.is-dragging * { pointer-events: none; }

.lookbook-frame {
  flex: 0 0 auto;
  scroll-snap-align: start;
  position: relative;
}
.lookbook-frame.tall  { width: clamp(260px, 28vw, 400px); }
.lookbook-frame.wide  { width: clamp(340px, 42vw, 620px); }
.lookbook-frame.small { width: clamp(220px, 22vw, 320px); margin-top: 6rem; }

.lookbook-frame .img-wrap {
  overflow: hidden;
  position: relative;
  background: #16120E;
}
.lookbook-frame.tall .img-wrap  { aspect-ratio: 3 / 4.3; }
.lookbook-frame.wide .img-wrap  { aspect-ratio: 4 / 3; }
.lookbook-frame.small .img-wrap { aspect-ratio: 4 / 5; }

.lookbook-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1), filter 1s ease;
}
.lookbook-frame:hover img { transform: scale(1.06); filter: saturate(1) contrast(1.06); }

.lookbook-index {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: #C59B32;
}

/* ---------- 10. Editorial Quote ---------- */
.editorial-quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11rem;
  line-height: 0.6;
  color: rgba(197, 155, 50, 0.25);
}

/* ---------- 11. Material Triptych ---------- */
.material-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  isolation: isolate;
}
.material-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), filter 1s ease;
  filter: brightness(0.55) saturate(0.85);
}
.material-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(13,10,8,0.95) 10%, rgba(13,10,8,0.15) 70%);
}
.material-card:hover img { transform: scale(1.08); filter: brightness(0.72) saturate(1); }
.material-card .material-body {
  transform: translateY(46px);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.material-card:hover .material-body { transform: translateY(0); }
.material-card .material-more {
  opacity: 0;
  transition: opacity 0.7s ease 0.1s;
}
.material-card:hover .material-more { opacity: 1; }

/* ---------- 12. Magnetic buttons & refined links ---------- */
.magnetic { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }

.link-underline {
  position: relative;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: #C59B32;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* Product card: gentle 3D tilt surface */
.product-card { transform-style: preserve-3d; will-change: transform; }

/* ==========================================================================
   13. QUIET LUXURY IVORY MODE — Complete Editorial Light Theme Adaptation
   ========================================================================== */
html[data-theme="ivory"] {
  background-color: #F7F5F0;
  color: #27221E;
}

/* Convert hardcoded dark section/container surfaces to warm Ivory & Sand,
   EXCEPT inside .photo-stage (where text sits over dark photography) */
html[data-theme="ivory"] header.sticky {
  background-color: rgba(247, 245, 240, 0.92) !important;
  border-color: rgba(166, 111, 72, 0.22) !important;
  color: #27221E !important;
}

html[data-theme="ivory"] .top-utility-bar {
  background-color: #E8DFD2 !important;
  color: #27221E !important;
  border-color: rgba(166, 111, 72, 0.25) !important;
}

html[data-theme="ivory"] .top-utility-bar .text-\[\#F3E5AB\] {
  color: #8A6421 !important;
}

html[data-theme="ivory"] section:not(#hero-stage),
html[data-theme="ivory"] footer {
  background-color: #F7F5F0 !important;
  color: #27221E !important;
  border-color: rgba(166, 111, 72, 0.2) !important;
}

/* Hero Stage in Ivory Mode: Warm Parchment Editorial Gradient & Deep Espresso Typography */
html[data-theme="ivory"] #hero-stage {
  background-color: #F7F5F0 !important;
  color: #27221E !important;
  border-color: rgba(166, 111, 72, 0.25) !important;
}
html[data-theme="ivory"] #hero-stage .bg-gradient-to-r {
  background-image: linear-gradient(to right, #F7F5F0 0%, rgba(247, 245, 240, 0.82) 55%, rgba(247, 245, 240, 0.18) 100%) !important;
}
html[data-theme="ivory"] #hero-stage .bg-gradient-to-t {
  background-image: linear-gradient(to top, #F7F5F0 0%, rgba(247, 245, 240, 0.25) 45%, rgba(247, 245, 240, 0.35) 100%) !important;
}
html[data-theme="ivory"] #hero-stage h2,
html[data-theme="ivory"] #hero-stage .text-\[\#F7F5F0\] {
  color: #27221E !important;
}
html[data-theme="ivory"] #hero-stage .text-\[\#E8DFD2\]\/80,
html[data-theme="ivory"] #hero-stage .text-\[\#E8DFD2\]\/55,
html[data-theme="ivory"] #hero-stage .text-\[\#E8DFD2\]\/50 {
  color: rgba(39, 34, 30, 0.78) !important;
}
html[data-theme="ivory"] #hero-stage .bg-\[\#0D0A08\]\/70 {
  background-color: rgba(247, 245, 240, 0.88) !important;
  border-color: rgba(166, 111, 72, 0.35) !important;
  box-shadow: 0 20px 50px rgba(39, 34, 30, 0.12);
}
html[data-theme="ivory"] .hero-outline-word {
  -webkit-text-stroke: 1px rgba(166, 111, 72, 0.28);
}

html[data-theme="ivory"] section#manifesto,
html[data-theme="ivory"] section#lookbook,
html[data-theme="ivory"] section#silk-atelier {
  background-color: #EFEAE1 !important;
}

/* Cards, boxes, inputs, and modals in Ivory Mode */
html[data-theme="ivory"] section:not(#hero-stage) .bg-\[\#110D0A\],
html[data-theme="ivory"] section:not(#hero-stage) .bg-\[\#110D0A\]\/60,
html[data-theme="ivory"] section:not(#hero-stage) .bg-\[\#1A1511\],
html[data-theme="ivory"] section:not(#hero-stage) .bg-\[\#1A1511\]\/90,
html[data-theme="ivory"] section:not(#hero-stage) .bg-\[\#16120E\],
html[data-theme="ivory"] #pdp-modal > div,
html[data-theme="ivory"] #cart-drawer > div:last-child,
html[data-theme="ivory"] #design-system-modal > div,
html[data-theme="ivory"] #atelier-video-modal > div {
  background-color: #FFFFFF !important;
  color: #27221E !important;
  border-color: rgba(166, 111, 72, 0.28) !important;
  box-shadow: 0 16px 40px rgba(39, 34, 30, 0.06);
}

html[data-theme="ivory"] #cart-drawer-items > div {
  background-color: #F7F5F0 !important;
  color: #27221E !important;
}

/* Text colors inside non-photo sections in Ivory Mode */
html[data-theme="ivory"] section:not(#hero-stage) .text-\[\#F7F5F0\],
html[data-theme="ivory"] #pdp-modal .text-\[\#F7F5F0\],
html[data-theme="ivory"] #cart-drawer .text-\[\#F7F5F0\],
html[data-theme="ivory"] #design-system-modal .text-\[\#F7F5F0\] {
  color: #27221E !important;
}

html[data-theme="ivory"] section:not(#hero-stage) .text-\[\#F3E5AB\],
html[data-theme="ivory"] #pdp-modal .text-\[\#F3E5AB\],
html[data-theme="ivory"] #cart-drawer .text-\[\#F3E5AB\] {
  color: #8A6421 !important;
}

html[data-theme="ivory"] section:not(#hero-stage) .text-\[\#E8DFD2\]\/85,
html[data-theme="ivory"] section:not(#hero-stage) .text-\[\#E8DFD2\]\/80,
html[data-theme="ivory"] section:not(#hero-stage) .text-\[\#E8DFD2\]\/75,
html[data-theme="ivory"] section:not(#hero-stage) .text-\[\#E8DFD2\]\/70,
html[data-theme="ivory"] section:not(#hero-stage) .text-\[\#E8DFD2\]\/60,
html[data-theme="ivory"] section:not(#hero-stage) .text-\[\#E8DFD2\]\/55,
html[data-theme="ivory"] section:not(#hero-stage) .text-\[\#E8DFD2\]\/50,
html[data-theme="ivory"] section:not(#hero-stage) .text-\[\#E8DFD2\]\/45,
html[data-theme="ivory"] footer {
  color: rgba(39, 34, 30, 0.72) !important;
}

/* Preserve light text inside photo overlay cards (Bento Grid, Material Triptych, Video Stage, Image Badges) */
html[data-theme="ivory"] #featured-bento-grid h3,
html[data-theme="ivory"] .material-card h3 {
  color: #F7F5F0 !important;
}
html[data-theme="ivory"] #featured-bento-grid p,
html[data-theme="ivory"] .material-card p {
  color: rgba(247, 245, 240, 0.85) !important;
}
html[data-theme="ivory"] .product-img-wrapper span,
html[data-theme="ivory"] .product-quick-bar button:first-child,
html[data-theme="ivory"] #inline-youtube-cinema-stage span {
  color: #F7F5F0 !important;
}
html[data-theme="ivory"] .product-img-wrapper .bg-\[\#110D0A\]\/85,
html[data-theme="ivory"] .product-quick-bar {
  background-color: rgba(25, 20, 16, 0.9) !important;
}

/* Marquee stroke & curtain reveal in Ivory Mode */
html[data-theme="ivory"] .marquee-item {
  -webkit-text-stroke: 1px rgba(39, 34, 30, 0.42);
}
html[data-theme="ivory"] .marquee-item:hover {
  color: #A66F48;
  -webkit-text-stroke-color: #A66F48;
}
html[data-theme="ivory"] .curtain-reveal::after {
  background: #E8DFD2;
}
html[data-theme="ivory"] .gold-foil-text {
  background: linear-gradient(135deg, #8A6421 0%, #C59B32 50%, #6E4726 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], .split-word, .curtain-reveal::after { opacity: 1 !important; transform: none !important; }
}