/* Gallery Wall CSS */

/* ── Intro Overlay ───────────────────────────────────────────────────────────
   Layout: figure centred, eyebrow arcs above the head area, text below.
   Sequence:
     0.0s  figure fades + rises in
     0.6s  top text fades in
     1.2s  eyebrows shoot up (raise)
     1.9s  eyebrows drop back down
     2.4s  bottom text (LIVE!) pops in
     3.2s  whole overlay fades out
*/
#intro-overlay {
  position: fixed; inset: 0; z-index: 9000;
  /* Same parchment as the hero header — the figure (transparent PNG) pops naturally */
  background: var(--parchment);
  display: flex; flex-direction: row;
  align-items: center; justify-content: center;
  gap: 3rem;
  pointer-events: none;
}

/* ── Figure ── */
.intro-figure-wrap {
  position: relative;
  width: min(240px, 38vw);
  flex-shrink: 0;
  /* headroom above so raised eyebrows clear the top of the image */
  padding-top: 20px;
  overflow: visible;
}
.intro-figure {
  width: 100%; display: block;
  opacity: 0;
  transform: translateY(28px);
  animation: introFigureIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
  /* transparent PNG — no blend mode needed */
  position: relative;
  z-index: 1;
}

/* ── Eyebrows — pixel-measured from logo_blank_transparent.png (1080×1352) ──
   At rows 19-20% the full forehead is visible:
     face left ≈ 39%, face right ≈ 66%, face width ≈ 27%, face centre ≈ 53%
   Left brow centre  = face_left + 35% of face_w = 39 + 9.5 = 48.5% → left: 45.5%
   Right brow centre = face_left + 65% of face_w = 39 + 17.6 = 56.6% → right: 37%
   Each brow width   = 22% of face width = 6% of image width.
   top: 19% of image + 20px padding-top offset.
   clip-path cuts the bottom half of each brow div so no bottom edge bleeds through.
*/
.intro-brow {
  position: absolute;
  top: calc(19% + 20px);
  width: 6%;
  height: 8px;
  border-top: 2.5px solid var(--deep-walnut);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  /* clip bottom edge so only the top arc is visible — no baseline bleed */
  clip-path: inset(0 0 50% 0);
  opacity: 0;
  z-index: 2;
  animation:
    browAppear  0.3s ease          0.9s  forwards,
    browRaise   0.35s ease-out     1.2s  forwards,
    browLower   0.4s ease-in-out   1.9s  forwards;
}
.intro-brow-left  { left:  38.5%; transform-origin: right center; }
.intro-brow-right { right: 45.5%; transform-origin: left  center; }

@keyframes browAppear {
  to { opacity: 1; }
}
@keyframes browRaise {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px) scaleY(1.2); }
}
@keyframes browLower {
  0%   { transform: translateY(-10px) scaleY(1.2); }
  100% { transform: translateY(0)     scaleY(1);   }
}

/* ── Text block — sits to the right of the figure ── */
.intro-text-wrap {
  display: flex; flex-direction: column; gap: 0.9rem;
  text-align: left;
}
.intro-line {
  display: block;
  /* Matches "Where Desi Meets DaVinci" slogan: Cormorant Garamond 600 italic */
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.04em;
  opacity: 0;
}
.intro-line-top {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--deep-walnut);
  max-width: 22ch;
  animation: introTextIn 0.7s ease 0.65s forwards;
}
.intro-line-bottom {
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  color: var(--deep-walnut);
  animation: introTextIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.45s forwards;
}
.intro-line-bottom em {
  /* LIVE! breaks out of the slogan style — Raleway 800, italic, red */
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-weight: 800;
  color: #c0392b;
}

@keyframes introFigureIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes introTextIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gallery Wall Section */
.gallery-section {
  padding: 3rem 2rem 4rem;
  min-height: 100vh;
}

.gallery-header {
  text-align: center;
  margin-bottom: 3rem;
}
.gallery-header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  letter-spacing: 0.06em;
  line-height: 1.0;
  margin-bottom: 0.4rem;
  color: var(--deep-walnut);
}
.gallery-header .gallery-slogan {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 600;
  font-style: italic;
  color: var(--deep-walnut);
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.gallery-header .tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1.15rem;
  color: var(--gold-dark); letter-spacing: 0.05em;
}

/* Gallery Wall Background */
.gallery-wall {
  position: relative;
  max-width: 1300px; margin: 0 auto;
  padding: 3rem 2rem 4rem;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 59px,
      rgba(201,168,76,0.06) 59px,
      rgba(201,168,76,0.06) 60px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 59px,
      rgba(201,168,76,0.06) 59px,
      rgba(201,168,76,0.06) 60px
    ),
    linear-gradient(160deg, #f0e8d8 0%, #ede0cc 50%, #e8d8c0 100%);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 2px;
  box-shadow:
    inset 0 0 80px rgba(59,42,26,0.08),
    0 4px 40px rgba(59,42,26,0.12);
}

/* Wainscoting line at bottom */
.gallery-wall::after {
  content: '';
  position: absolute; bottom: 60px; left: 3%; right: 3%;
  height: 1px; background: rgba(201,168,76,0.3);
}

/* Artwork Grid */
.artwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 3.5rem 2.5rem;
  align-items: end;
}

/* Frame Wrapper */
.frame-wrapper {
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  transform-origin: top center;
  animation: idleSwing 8s ease-in-out infinite;
  animation-delay: var(--swing-delay, 0s);
}
.frame-wrapper:hover {
  animation: none;
  transform: rotate(2deg) translateY(-4px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.frame-wrapper:nth-child(even) { animation-direction: alternate-reverse; }

@keyframes idleSwing {
  0%, 100% { transform: rotate(-0.8deg) translateY(0); }
  50%       { transform: rotate(0.8deg)  translateY(-2px); }
}

/* ── PNG Frame Card ─────────────────────────────────────────
   frame_vertical.png   699×1030px  (pixel-measured, transparent bg + transparent window)
   frame_square.png     547×665px   (pixel-measured, transparent bg + transparent window)

   The artwork <img> is positioned absolutely using pixel-exact % values
   computed by process_frames.py. The frame PNG overlay sits on top.
   No mix-blend-mode needed — the PNG is fully transparent everywhere
   except the physical gold frame material.
*/
.frame-png-card {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 14px 32px rgba(59,42,26,0.45)) drop-shadow(0 4px 8px rgba(201,168,76,0.2));
  transition: filter 0.3s;
}
.frame-wrapper:hover .frame-png-card {
  filter: drop-shadow(0 20px 44px rgba(59,42,26,0.55)) drop-shadow(0 6px 12px rgba(201,168,76,0.3));
}

/* Aspect ratios match exact frame image pixel dimensions */
.frame-portrait          { aspect-ratio: 699 / 1030; }  /* frame_vertical.png */
.frame-square-landscape  { aspect-ratio: 547 / 665; }   /* frame_square.png — square & landscape */

/* Frame PNG image — covers entire card, transparent outside the gold frame */
.frame-png-overlay {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  /* No mix-blend-mode — PNG background is already fully transparent */
}

/* Artwork image — positioned precisely at the inner window via inline style (set by JS).
   Fallback values match the pixel-measured window for frame_vertical.png 699×1030. */
.frame-artwork-img {
  position: absolute;
  display: block;
  /* Inline style from JS overrides these with exact measured values */
  top: 25.922%; left: 18.741%; width: 60.086%; height: 60.485%;
  object-fit: cover; object-position: center center;
}

/* Frame Label */
.frame-label {
  margin-top: 0.6rem;
  text-align: center;
}
.frame-label h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 0.88rem; font-weight: 800;
  color: var(--deep-walnut); letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.frame-label .price-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 0.88rem;
  color: var(--gold-dark);
}

/* Original Available badge */
.original-badge {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.15rem 0.55rem;
  background: var(--deep-walnut);
  color: var(--gold-light);
  font-family: 'Lato', sans-serif;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* Placeholder frames (empty) */
.frame-wrapper.placeholder { cursor: default; }
.frame-wrapper.placeholder .frame-artwork-img { display: none; }

/* Add Artwork prompt for admin */
.add-frame-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  cursor: pointer; opacity: 0.5; transition: opacity 0.2s;
  padding: 2rem;
  border: 2px dashed rgba(201,168,76,0.4);
  background: transparent;
  font-family: 'Lato', sans-serif; font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep-walnut);
}
.add-frame-btn:hover { opacity: 1; }
.add-frame-btn .plus { font-size: 2rem; color: var(--gold); line-height: 1; }

/* Responsive */
@media (max-width: 900px) {
  .artwork-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .gallery-wall { padding: 2rem 1rem 3rem; }
}
@media (max-width: 580px) {
  .artwork-grid { grid-template-columns: 1fr; gap: 2rem; }
  .gallery-section { padding: 90px 1rem 3rem; }
}

/* Intro overlay — stack vertically on small screens */
@media (max-width: 600px) {
  #intro-overlay {
    flex-direction: column;
    gap: 1.2rem;
    padding: 2rem 1.5rem;
  }
  .intro-figure-wrap { width: min(180px, 55vw); padding-top: 18px; }
  .intro-text-wrap { text-align: center; align-items: center; }
  .intro-line-top { font-size: 0.82rem; max-width: 24ch; }
  .intro-line-bottom { font-size: 1.3rem; }
}