/* ═══════════════════════════════════════════════════════════════
   chapter3.css  —  "Pokate" 3D Wooden Frame Layout
   Depends on: chapter3.js, chapters34.css (for .chapter-page base)
   ═══════════════════════════════════════════════════════════════ */

/* ─── KEYFRAMES ──────────────────────────────────────────────── */

/* Heart + chain pendulum swing */
@keyframes ch3-swing {
  0%   { transform: rotate(-3deg); }
  50%  { transform: rotate( 3deg); }
  100% { transform: rotate(-3deg); }
}

/* Diya flicker — simulates real flame light */
@keyframes ch3-flicker {
  0%,100% { opacity: 0.68; }
  15%      { opacity: 0.85; }
  30%      { opacity: 0.60; }
  45%      { opacity: 0.90; }
  60%      { opacity: 0.72; }
  75%      { opacity: 0.95; }
  90%      { opacity: 0.65; }
}

/* Diya emoji bob */
@keyframes ch3-diya-bob {
  0%,100% { transform: translateX(-50%) translateY(0px);   }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* Shake for wrong answer */
@keyframes ch3-shake-kf {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX( 6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX( 4px); }
}

/* Photo crossfade */
@keyframes ch3-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── PAGE BACKGROUND ────────────────────────────────────────── */

/* Force the page itself to be extremely dark */
#chapter-3 {
  background: #030303 !important;
  --accent: #d97706;
}

#chapter-3 .page-bg,
#chapter-3 .page-bg-overlay {
  display: none !important;
}

/* ─── ROOT WRAPPER ───────────────────────────────────────────── */

.ch3-root {
  width:           100%;
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2.5rem;
  padding:         3rem 1.5rem 5rem;
  box-sizing:      border-box;
  position:        relative;
  z-index:         1;
}

/* ─── FRAME ROW ──────────────────────────────────────────────── */

.ch3-frame-row {
  display:         flex;
  flex-direction:  column;      /* stack on mobile */
  align-items:     center;
  gap:             2.5rem;
  width:           100%;
  max-width:       1100px;
}

@media (min-width: 900px) {
  .ch3-frame-row {
    flex-direction: row;
    align-items:    stretch;
    justify-content: center;
  }
}

/* ─── OUTER WOODEN FRAME ─────────────────────────────────────── */

.ch3-outer-frame {
  position:      relative;
  border:        12px solid #3e2723;
  border-radius: 4px;
  background:    transparent;
  box-shadow:
    0 0  0   1px #5d4037,                        /* bright rim highlight  */
    0 8px 40px rgba(0,0,0,0.85),                 /* deep drop shadow      */
    inset 0 0 20px rgba(0,0,0,0.6);              /* inner depth           */

  /* Faint wood-grain texture using repeating gradient */
  background-image: repeating-linear-gradient(
    92deg,
    transparent 0px,
    transparent 18px,
    rgba(255,255,255,0.018) 19px,
    rgba(255,255,255,0.018) 20px
  );

  flex: 1;
  min-width: 560px;
  max-width: 880px;
}

/* Slight dark outer edge (double border trick) */
.ch3-outer-frame::before {
  content:       '';
  position:      absolute;
  inset:         -16px;
  border:        2px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  pointer-events: none;
}

/* ─── INNER LAYOUT: 30 / 70 split ───────────────────────────── */

.ch3-inner-layout {
  position:        relative;
  display:         flex;
  flex-direction:  row;
  width:           100%;
  height:          100%;
  min-height:      720px;
  overflow:        hidden;
}

/* ─── HEART COLUMN (30%) ─────────────────────────────────────── */

.ch3-heart-col {
  flex:          0 0 30%;
  display:       flex;
  align-items:   flex-start;
  justify-content: center;
  padding-top:   0;
  position:      relative;
  z-index:       3;
}

/* ─── CHAIN + HEART WRAP ─────────────────────────────────────── */

.ch3-chain-wrap {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  transform-origin: top center;
  animation:        ch3-swing 4s ease-in-out infinite;
  margin-top:       -6px;     /* kiss the top border */
}

/* ─── CHAIN LINKS ────────────────────────────────────────────── */

.ch3-chain {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
}

.ch3-chain-link {
  width:            10px;
  height:           16px;
  border:           2px solid #9e9e9e;
  border-radius:    50%;
  background:       transparent;
  box-shadow:       0 1px 3px rgba(0,0,0,0.6);
}

/* Alternate link orientation for realism */
.ch3-chain-link:nth-child(even) {
  transform: rotate(90deg);
}

/* ─── HEART (CSS clip-path) ──────────────────────────────────── */

.ch3-heart {
  width:           100px;
  height:          95px;
  background:      linear-gradient(145deg, #d4a96a, #a0714f);
  clip-path:       path('M50 88 C50 88 5 55 5 30 A22 22 0 0 1 50 18 A22 22 0 0 1 95 30 C95 55 50 88 50 88 Z');
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.5),
    inset 0 1px 3px rgba(255,255,255,0.2);
  margin-top:      2px;
}

/* Wood grain lines on heart */
.ch3-heart::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    88deg,
    transparent 0px,
    transparent 7px,
    rgba(0,0,0,0.08) 8px
  );
  clip-path: inherit;
  pointer-events: none;
}

.ch3-heart-text {
  font-size:   0.52rem;
  font-style:  italic;
  color:       #4e2e0e;
  text-align:  center;
  line-height: 1.35;
  padding:     0 8px;
  padding-top: 14px;   /* push down from top curve */
  font-family: var(--font-display, 'Georgia', serif);
  position:    relative;
  z-index:     1;
  max-width:   86px;
}

/* ─── PHOTO COLUMN (70%) ─────────────────────────────────────── */

.ch3-photo-col {
  flex:     0 0 70%;
  padding:  10px 10px 10px 6px;
  display:  flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index:  3;
}

/* ─── CINEMATIC BLUR FRAME ───────────────────────────────────── */

.ch3-cinema-wrap {
  position:      relative;
  width:         100%;
  aspect-ratio:  3/4;
  border:        5px solid #5d4037;
  border-radius: 2px;
  overflow:      hidden;
  box-shadow:
    0 2px 12px rgba(0,0,0,0.6),
    inset 0 0 8px rgba(0,0,0,0.5);
  background:    #0a0a0a;
  transition:    opacity 0.4s ease;
}

/* Blurred background fill */
.ch3-cinema-bg {
  position: absolute;
  inset:    0;
  overflow: hidden;
}

.ch3-cinema-bg-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     blur(18px) brightness(0.55) saturate(1.1);
  transform:  scale(1.08);   /* covers blur edge artifacts */
}

/* Foreground — object-contain so portrait photos aren't cropped */
.ch3-cinema-fg-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: contain;
  z-index:    2;
}

/* Photo crossfade state */
.ch3-cinema-fade .ch3-cinema-bg-img,
.ch3-cinema-fade .ch3-cinema-fg-img {
  opacity:    0;
  transition: opacity 0.4s ease;
}

/* ─── DIYA OVERLAY (LIGHT EFFECT) ────────────────────────────── */

.ch3-diya-overlay {
  position:         absolute;
  inset:            0;
  pointer-events:   none;
  z-index:          4;
  background:       radial-gradient(
    ellipse 90% 80% at 50% 110%,
    rgba(217,119,6,0.62)   0%,
    rgba(251,146,60,0.30)  25%,
    rgba(234,179,8,0.10)   50%,
    transparent            75%
  );
  mix-blend-mode:   color-dodge;
  animation:        ch3-flicker 3.2s ease-in-out infinite;
  border-radius:    inherit;
}

/* Second overlay pass — overlay blend for warmth */
.ch3-diya-overlay::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(
    ellipse 60% 50% at 50% 115%,
    rgba(180,83,9,0.45)  0%,
    transparent          60%
  );
  mix-blend-mode: overlay;
  animation:      ch3-flicker 4.1s ease-in-out infinite reverse;
}

/* ─── DIYA EMOJI ─────────────────────────────────────────────── */

.ch3-diya-emoji {
  position:          absolute;
  bottom:            -22px;
  left:              50%;
  transform:         translateX(-50%);
  font-size:         2.2rem;
  line-height:       1;
  z-index:           10;
  filter:            drop-shadow(0 0 12px rgba(217,119,6,0.9))
                     drop-shadow(0 0 24px rgba(251,146,60,0.6));
  animation:         ch3-diya-bob 2.8s ease-in-out infinite;
  user-select:       none;
}

/* ─── MIDDLE PANEL ───────────────────────────────────────────── */

.ch3-middle-panel {
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  flex:            0 0 auto;
  width:           100%;
  max-width:       340px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1.5rem;
  padding:         2rem 1.5rem;
  text-align:      center;
}

@media (min-width: 900px) {
  .ch3-middle-panel {
    width:    220px;
    flex:     0 0 220px;
    padding:  1rem;
  }
}

.ch3-note {
  font-size:   0.92rem;
  line-height: 1.75;
  color:       rgba(255,255,255,0.65);
  font-style:  italic;
  font-family: var(--font-display, 'Georgia', serif);
  white-space: pre-wrap;
}

.ch3-quote {
  border:       none;
  margin:       0;
  padding:      0;
  position:     relative;
}

.ch3-quote-mark {
  font-size:    3rem;
  line-height:  0.5;
  color:        #d97706;
  font-family:  Georgia, serif;
  display:      block;
  margin-bottom: 0.5rem;
  opacity:      0.8;
}

.ch3-quote-text {
  font-size:    0.88rem;
  line-height:  1.7;
  color:        rgba(255,220,160,0.85);
  font-style:   italic;
  font-family:  var(--font-display, 'Georgia', serif);
  max-width:    none;
}

.ch3-quote-author {
  font-size:    0.75rem;
  color:        rgba(255,200,100,0.55);
  font-style:   normal;
  display:      block;
  margin-top:   0.6rem;
  letter-spacing: 0.04em;
}

/* ─── UNLOCK SECTION ─────────────────────────────────────────── */

.ch3-unlock {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.75rem;
  padding-top:    2.5rem;
  width:          100%;
  max-width:      480px;
}

.ch3-unlock-label {
  font-size:      0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(255,200,100,0.45);
}

.ch3-unlock-row {
  display:     flex;
  gap:         0.5rem;
  width:       100%;
}

.ch3-unlock-input {
  flex:             1;
  padding:          0.65rem 1rem;
  background:       rgba(255,255,255,0.05);
  border:           1px solid rgba(217,119,6,0.35);
  border-radius:    6px;
  color:            rgba(255,240,210,0.9);
  font-size:        0.95rem;
  outline:          none;
  transition:       border-color 0.25s, box-shadow 0.25s;
  caret-color:      #d97706;
}

.ch3-unlock-input:focus {
  border-color: #d97706;
  box-shadow:   0 0 0 3px rgba(217,119,6,0.18);
}

.ch3-unlock-btn {
  padding:       0.65rem 1.4rem;
  background:    linear-gradient(135deg, #b45309, #d97706);
  border:        none;
  border-radius: 6px;
  color:         #fff;
  font-size:     0.95rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    filter 0.2s, transform 0.15s;
}

.ch3-unlock-btn:hover:not(:disabled) {
  filter:    brightness(1.15);
  transform: translateY(-1px);
}

.ch3-unlock-btn:disabled {
  opacity: 0.5;
  cursor:  default;
}

.ch3-unlock-feedback {
  font-size:   0.85rem;
  min-height:  1.2em;
  transition:  color 0.3s;
}

.ch3-fb-success { color: #6ee7b7; }
.ch3-fb-fail    { color: #f87171; }

.ch3-shake {
  animation: ch3-shake-kf 0.5s ease forwards;
}

/* ─── RESPONSIVE TWEAKS ──────────────────────────────────────── */

@media (max-width: 500px) {
  .ch3-outer-frame { max-width: 100%; border-width: 8px; }
  .ch3-heart { width: 80px; height: 76px; }
  .ch3-heart-text { font-size: 0.46rem; max-width: 70px; }
  .ch3-diya-emoji { font-size: 1.7rem; bottom: -18px; }
  .ch3-chain-link { width: 8px; height: 12px; }
}


/* Hide diya emoji */
.ch3-diya-emoji { display: none !important; }