/* ═══════════════════════════════════════════════════════════════
   ENHANCE  |  rezaabdoli.com
   Depth · Atmosphere · Polish — extends cinematic layer
   ═══════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   1. LUXURY PRELOADER  — session-once, gold letter reveal
   ──────────────────────────────────────────────────────────────── */
#lux-loader {
  position: fixed; inset: 0; z-index: 99998;
  background: #080808;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
  animation: lux-loader-out 0.75s cubic-bezier(.76,0,.24,1) 2.1s both;
}
@keyframes lux-loader-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-12px); }
}
.lux-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(18px, 2.8vw, 30px);
  font-weight: 300; letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(181,137,42,0);
  opacity: 0; transform: translateY(20px);
  animation: lux-rise .95s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: .1s;
}
.lux-line {
  width: 0; height: 1px; margin-top: 22px;
  background: linear-gradient(to right,
    transparent,
    rgba(181,137,42,.5) 30%,
    rgba(221,185,90,.75) 50%,
    rgba(181,137,42,.5) 70%,
    transparent);
  animation: lux-line .72s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: .52s;
}
.lux-sub {
  font-size: 8px; letter-spacing: .52em;
  text-transform: uppercase; font-family: 'Jost', sans-serif;
  font-weight: 400; margin-top: 16px;
  color: rgba(181,137,42,0); opacity: 0;
  animation: lux-rise .7s ease forwards;
  animation-delay: .78s;
}
@keyframes lux-rise {
  from { opacity: 0; transform: translateY(20px); color: rgba(181,137,42,0); }
  to   { opacity: 1; transform: translateY(0);    color: rgba(181,137,42,.62); }
}
@keyframes lux-line {
  from { width: 0; }
  to   { width: clamp(110px, 18vw, 240px); }
}


/* ────────────────────────────────────────────────────────────────
   2. ANIMATED FILM GRAIN on cin-scenes (extends hero grain)
   ──────────────────────────────────────────────────────────────── */
.cin-scene { overflow: hidden; }
.cin-scene::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 20; opacity: .028;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain-drift 9s steps(3, end) infinite;
}
@keyframes grain-drift {
  0%   { background-position:  0px   0px; }
  33%  { background-position: -14px  9px; }
  66%  { background-position:  8px -13px; }
  100% { background-position:  0px   0px; }
}


/* ────────────────────────────────────────────────────────────────
   3. TORCH SPOTLIGHT — cursor-tracked light in dark scenes
   ──────────────────────────────────────────────────────────────── */
.cin-scene-layer[data-layer="bg"]::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(
    circle 400px at var(--tx, 50%) var(--ty, 50%),
    rgba(255,248,220,.065) 0%,
    rgba(181,137,42,.025) 32%,
    transparent 68%
  );
  mix-blend-mode: screen;
  pointer-events: none; z-index: 1;
  opacity: 0;
  transition: opacity .55s ease;
}
.cin-scene-layer[data-layer="bg"].torch-on::after {
  opacity: 1;
}


/* ────────────────────────────────────────────────────────────────
   4. BLOG CARD — 3D depth + specular + top shimmer travel
   ──────────────────────────────────────────────────────────────── */
.blog-card { transform-style: preserve-3d; }

.blog-img { position: relative; overflow: hidden; }
.blog-img::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(
    circle 110px at var(--spec-x, 50%) var(--spec-y, 50%),
    rgba(255,255,255,.1), transparent 70%
  );
  pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .3s ease;
}
.blog-card:hover .blog-img::after { opacity: 1; }

/* Traveling shimmer line across top edge on hover */
.blog-card::before {
  content: ''; position: absolute;
  top: 0; left: -110%; width: 55%; height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(181,137,42,.55) 40%,
    rgba(221,185,90,.8) 50%,
    rgba(181,137,42,.55) 60%, transparent);
  transition: left .65s cubic-bezier(.16,1,.3,1);
  z-index: 6; pointer-events: none;
}
.blog-card:hover::before { left: 145%; }


/* ────────────────────────────────────────────────────────────────
   5. CLICK RIPPLE — expanding gold ring at cursor
   ──────────────────────────────────────────────────────────────── */
.lux-ripple {
  position: fixed; border-radius: 50%;
  border: 1.5px solid rgba(181,137,42,.52);
  transform: translate(-50%,-50%);
  pointer-events: none; z-index: 99999;
  animation: lux-ripple-out .72s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes lux-ripple-out {
  from { width: 4px;   height: 4px;   opacity: .65; }
  to   { width: 108px; height: 108px; opacity: 0;   }
}


/* ────────────────────────────────────────────────────────────────
   6. BTN-GOLD SHIMMER SWEEP — light pass on hover
   ──────────────────────────────────────────────────────────────── */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::before {
  content: ''; position: absolute;
  top: -10%; left: -80%; width: 55%; height: 120%;
  background: linear-gradient(
    115deg,
    transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%
  );
  transform: skewX(-18deg);
  transition: left .62s cubic-bezier(.16,1,.3,1);
  pointer-events: none; z-index: 1;
}
.btn-gold:hover::before { left: 130%; }


/* ────────────────────────────────────────────────────────────────
   7. NUMBERS SECTION — breathing glow (triggered by .enh-in)
   ──────────────────────────────────────────────────────────────── */
.numbers-sec.enh-in .num-val {
  animation: num-breathe 5.5s ease-in-out infinite;
}
.numbers-sec.enh-in .num-item:nth-child(2) .num-val { animation-delay: 1.1s; }
.numbers-sec.enh-in .num-item:nth-child(3) .num-val { animation-delay: 2.2s; }
.numbers-sec.enh-in .num-item:nth-child(4) .num-val { animation-delay: 3.3s; }
.numbers-sec.enh-in .num-item:nth-child(5) .num-val { animation-delay: 4.4s; }
@keyframes num-breathe {
  0%,100% { text-shadow: 0 0 50px rgba(181,137,42,.08); }
  50%      { text-shadow: 0 0 110px rgba(181,137,42,.28); }
}


/* ────────────────────────────────────────────────────────────────
   8. EDITORIAL DEPTH NUMBERS — large bg ordinals per section
   ──────────────────────────────────────────────────────────────── */
.enh-depth-num {
  position: absolute; right: 0; top: -.12em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(88px, 15vw, 200px);
  font-weight: 300; line-height: 1;
  color: rgba(0,0,0,.04);
  pointer-events: none; user-select: none;
  letter-spacing: -.04em; z-index: 0;
  opacity: 0; transform: translateX(18px);
  transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.16,1,.3,1);
}
.enh-depth-num.enh-vis { opacity: 1; transform: none; }


/* ────────────────────────────────────────────────────────────────
   9. NEWSLETTER GOLD RADIAL PULSE
   ──────────────────────────────────────────────────────────────── */
.nl-sec { position: relative; overflow: hidden; }
.nl-sec::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 58% 48% at 50% 50%,
    rgba(181,137,42,.045) 0%, transparent 70%
  );
  pointer-events: none; z-index: 0;
  animation: nl-breathe 7s ease-in-out infinite;
}
@keyframes nl-breathe {
  0%,100% { opacity: .5;  transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}


/* ────────────────────────────────────────────────────────────────
   10. ABOUT PHOTO — enhanced depth shadow on hover
   ──────────────────────────────────────────────────────────────── */
.about-photo { will-change: transform; }
.about-photo img {
  transition: box-shadow .6s ease !important;
}
.about-photo img:hover {
  box-shadow: 0 44px 110px rgba(0,0,0,.3) !important;
}


/* ────────────────────────────────────────────────────────────────
   REDUCED MOTION + MOBILE overrides
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #lux-loader,
  .enh-depth-num { display: none; }
  .cin-scene::before { display: none; }
  .cin-scene-layer[data-layer="bg"]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #lux-loader { display: none; }
  .cin-scene::before { animation: none !important; }
  .numbers-sec.enh-in .num-val { animation: none !important; }
  .nl-sec::after { animation: none !important; }
}