/* ============================================================
   촛불1978 · Coming Soon · IG-style vertical reel
   ============================================================ */

:root{
  --bg:        #0a0603;
  --bg-2:      #14090a;
  --ivory:     #f2e6cf;
  --ivory-dim: rgba(242,230,207,0.62);
  --gold:      #c9a04a;
  --gold-warm: #f0b455;
  --flame:     #ffd88a;
  --wine:      #6a1b17;

  --serif: 'Cormorant Garamond', 'Nanum Myeongjo', 'Times New Roman', serif;
  --kor:   'Nanum Myeongjo', 'Cormorant Garamond', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{
  margin: 0; padding: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body{
  background:
    radial-gradient(ellipse at 20% 20%, rgba(106,27,23,0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(201,160,74,0.10) 0%, transparent 55%),
    var(--bg);
}
img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
::selection{ background: var(--gold); color: var(--bg); }

/* =========== AMBIENT BG =========== */
.ambient{
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.ambient img{
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 55%;
  filter: brightness(0.28) saturate(0.6) blur(24px);
  transform: scale(1.15);
  animation: slowZoom 40s ease-in-out infinite alternate;
}
.ambient-veil{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(6,3,1,0.55) 55%, rgba(6,3,1,0.9) 100%),
    linear-gradient(to bottom, rgba(6,3,1,0.55), rgba(6,3,1,0.85));
}
@keyframes slowZoom{
  from{ transform: scale(1.12); }
  to  { transform: scale(1.22); }
}

.grain{
  position: fixed; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.9  0 0 0 0 0.75  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-2%)} 60%{transform:translate(-1%,2%)}
  80%{transform:translate(2%,1%)} 100%{transform:translate(0,0)}
}

/* warm aura behind reel */
.aura{
  position: fixed;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,180,90,0.18) 0%, rgba(255,140,50,0.06) 32%, transparent 62%);
  pointer-events: none;
  z-index: 2;
  filter: blur(4px);
  animation: aura 5s ease-in-out infinite alternate;
}
@keyframes aura{
  0%,100%{ opacity: 0.75; transform: translate(-50%,-50%) scale(1);}
  50%    { opacity: 1;    transform: translate(-50%,-51%) scale(1.05);}
}

/* =========== STAGE =========== */
.stage{
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 4vh, 48px) clamp(28px, 4vw, 64px) clamp(60px, 6vh, 80px);
}

/* =========== COLUMNS =========== */
.col{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 220px;
  animation: fadeIn 1.6s .3s cubic-bezier(.2,.7,.2,1) both;
}
.col-left{ align-items: flex-start; justify-content: center; }
.col-right{ align-items: flex-end; text-align: right; }

/* left top: legacy candle + brand (not rendered in current markup) */
.brand{
  display: flex; align-items: center; gap: 16px;
}
.brand-text{
  display: flex; flex-direction: column; gap: 6px;
  border-left: 1px solid rgba(201,160,74,0.25);
  padding-left: 14px;
}
.brand-est, .brand-loc{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ivory-dim);
  line-height: 1.55;
  text-transform: uppercase;
}
.brand-loc{ color: var(--gold); }

/* CSS candle: glass votive model */
.candle{
  position: relative;
  width: 78px;
  height: 86px;
  flex-shrink: 0;
  filter: drop-shadow(0 10px 28px rgba(255,125,30,0.20));
}
.candle::before{
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 70px; height: 52px;
  transform: translateX(-50%);
  border: 2px solid rgba(255,154,58,0.46);
  border-top-color: rgba(255,205,138,0.70);
  border-bottom-color: rgba(145,63,18,0.72);
  border-radius: 50% 50% 18% 18% / 22% 22% 10% 10%;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.22), transparent 15%, rgba(255,126,25,0.18) 50%, transparent 82%, rgba(255,235,190,0.25)),
    linear-gradient(to bottom, rgba(95,38,10,0.55), rgba(194,83,18,0.34) 42%, rgba(46,18,6,0.82));
  box-shadow:
    inset 0 4px 9px rgba(255,214,148,0.32),
    inset 0 -8px 10px rgba(18,5,0,0.70),
    0 12px 22px rgba(0,0,0,0.38);
}
.candle::after{
  content: '';
  position: absolute;
  left: 50%; bottom: 44px;
  width: 70px; height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px solid rgba(255,201,125,0.70);
  background: radial-gradient(ellipse at 50% 46%, rgba(255,238,170,0.95), rgba(244,167,55,0.72) 48%, rgba(72,22,4,0.28) 72%);
  box-shadow: inset 0 -2px 5px rgba(95,36,3,0.45), 0 0 12px rgba(255,142,35,0.32);
}
.candle .wax{
  position: absolute;
  left: 50%; bottom: 10px;
  width: 56px; height: 38px;
  transform: translateX(-50%);
  border-radius: 48% 48% 12% 12% / 18% 18% 10% 10%;
  background: linear-gradient(to bottom, #ffd57f 0%, #de7b22 58%, #6e2608 100%);
  box-shadow: inset 0 5px 10px rgba(255,238,176,0.42), inset 0 -10px 12px rgba(41,10,0,0.54);
}
.candle .wick{
  position: absolute;
  bottom: 47px; left: 50%;
  width: 4px; height: 18px;
  transform: translateX(-50%) rotate(-4deg);
  background: linear-gradient(to bottom, #120905, #5c2810 70%, #1b0c05);
  border-radius: 4px;
  z-index: 5;
}
.candle .flame{
  position: absolute;
  bottom: 58px; left: 50%;
  width: 25px; height: 45px;
  transform: translateX(-50%);
  animation: flicker 1.55s ease-in-out infinite;
  transform-origin: 50% 94%;
  z-index: 6;
}
.candle .flame::before{
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 70%, #fffdf3 0%, #fff6b8 26%, #ffd15c 48%, #ff7b21 70%, rgba(255,85,20,0) 82%);
  border-radius: 52% 48% 48% 52% / 65% 65% 35% 35%;
  filter: blur(0.35px);
  box-shadow: 0 0 18px rgba(255,140,37,0.78), 0 0 36px rgba(255,92,22,0.40);
}
.candle .flame-inner{
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 18px;
  background: radial-gradient(ellipse at 50% 65%, rgba(150,190,255,0.80) 0%, rgba(82,93,185,0.45) 48%, transparent 72%);
  border-radius: 50%; opacity: 0.82; filter: blur(0.45px);
}
.candle .glow{
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  width: 122px; height: 122px;
  background: radial-gradient(circle, rgba(255,224,145,0.42) 0%, rgba(255,137,45,0.26) 28%, rgba(190,61,18,0.12) 48%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 1.8s ease-in-out infinite alternate;
  filter: blur(6px);
  z-index: 1;
}
@keyframes flicker{
  0%,100%{ transform: translateX(-50%) rotate(-2deg) scale(1,1); opacity: 1;}
  18%{ transform: translateX(-53%) rotate(3.5deg) scale(0.95,1.08); opacity: .93;}
  38%{ transform: translateX(-47%) rotate(-4deg) scale(1.05,0.96); opacity: 1;}
  62%{ transform: translateX(-51%) rotate(2deg) scale(0.98,1.12); opacity: .95;}
  82%{ transform: translateX(-48%) rotate(-1deg) scale(1.07,0.98); opacity: 1;}
}
@keyframes glowPulse{
  0%{opacity:.58; transform: translateX(-52%) scale(0.92)}
  45%{opacity:1; transform: translateX(-48%) scale(1.08)}
  100%{opacity:.72; transform: translateX(-50%) scale(1)}
}

/* left bottom */
.left-bottom{ display: flex; flex-direction: column; gap: 10px; }
.title-scene{
  position: relative;
  width: min(420px, 34vw);
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  isolation: isolate;
}
.title-scene::before{
  content: '';
  position: absolute;
  inset: 18% -14% 6%;
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(255,180,72,0.18), transparent 42%),
    radial-gradient(ellipse at 18% 80%, rgba(255,110,28,0.18), transparent 30%),
    radial-gradient(ellipse at 88% 72%, rgba(255,138,38,0.16), transparent 32%);
  filter: blur(14px);
  animation: titleAura 4.8s ease-in-out infinite alternate;
}
.title-flame{
  position: absolute;
  z-index: -1;
  width: 22px;
  height: 72px;
  bottom: 18px;
  transform-origin: 50% 96%;
  opacity: 0;
  filter: blur(.15px) drop-shadow(0 0 18px rgba(255,133,38,.72));
  animation: flameRise 5.6s ease-in-out infinite, flameSway 1.9s ease-in-out infinite alternate;
}
.title-flame::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 72%, #fff7d6 0%, #ffd36b 32%, #ff8a2a 58%, rgba(255,84,18,0.10) 76%, transparent 86%);
  border-radius: 54% 46% 47% 53% / 68% 66% 34% 32%;
}
.title-flame::after{
  content: '';
  position: absolute;
  left: 50%; bottom: 6px;
  width: 8px; height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 72%, rgba(255,255,245,.95), rgba(255,240,154,.52) 55%, transparent 76%);
  border-radius: 50%;
}
.f-left-lg{ left: 3%; height: 94px; width: 30px; animation-delay: .2s, .1s; }
.f-left-sm{ left: 18%; height: 48px; width: 16px; bottom: 126px; animation-delay: 1.1s, .6s; opacity: .72; }
.f-right-sm{ right: 12%; height: 62px; width: 20px; bottom: 54px; animation-delay: .7s, .3s; }
.f-right-lg{ right: -1%; height: 86px; width: 27px; bottom: 24px; animation-delay: 1.6s, .8s; }
@keyframes flameRise{
  0%{ opacity:0; transform: translate3d(0,28px,0) scale(.72); filter: blur(2px) drop-shadow(0 0 4px rgba(255,133,38,.2)); }
  22%{ opacity:.92; }
  54%{ opacity:1; transform: translate3d(0,-6px,0) scale(1); filter: blur(.2px) drop-shadow(0 0 22px rgba(255,133,38,.78)); }
  82%{ opacity:.86; }
  100%{ opacity:.28; transform: translate3d(0,-20px,0) scale(.94); filter: blur(1.6px) drop-shadow(0 0 14px rgba(255,133,38,.46)); }
}
@keyframes flameSway{
  0%{ margin-left:-5px; rotate:-4deg; }
  45%{ margin-left:3px; rotate:3deg; }
  100%{ margin-left:-1px; rotate:-2deg; }
}
@keyframes titleAura{
  from{ opacity:.55; transform: scale(.96); }
  to{ opacity:1; transform: scale(1.08); }
}
.chapter{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.42em;
  color: rgba(201,160,74,0.75);
  text-transform: uppercase;
  padding-left: 0.42em;
}
.chapter .hair{
  width: 32px; height: 1px;
  background: linear-gradient(to right, rgba(201,160,74,0.55), transparent);
}

.wordmark{
  margin: 4px 0 0;
  font-family: var(--serif);
  display: flex; align-items: baseline; gap: 10px;
  line-height: 1.06;
  padding-bottom: 4px;
  position: relative;
  z-index: 2;
}
.wordmark .ko{
  font-family: var(--kor);
  font-weight: 800;
  font-size: clamp(44px, 4.5vw, 72px);
  letter-spacing: -0.02em;
  background: linear-gradient(to bottom, #fbf1d8 0%, #e7d3a9 55%, #c9a570 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 40px rgba(255,180,80,0.15);
}
.wordmark .year{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 400;
  color: var(--gold-warm);
  background: linear-gradient(to bottom, #f5c778, #c9a04a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateY(-8%);
}
.title-subtitle{
  margin: 0;
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-size: clamp(9px, .86vw, 12px);
  font-weight: 400;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(242,230,207,0.66);
  text-shadow: 0 2px 18px rgba(255,170,70,0.18);
  white-space: nowrap;
  padding-left: 0.46em;
}
.tag{
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--ivory-dim);
  margin-top: 4px;
}

/* right top */
.right-top{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}
.year-tag{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--gold-warm);
  letter-spacing: 0.14em;
  padding-right: 0.14em;
}
.year-tag .y-line{
  width: 40px; height: 1px;
  background: linear-gradient(to left, rgba(201,160,74,0.55), transparent);
}

/* right bottom */
.right-bottom{
  display: flex; flex-direction: column; gap: 24px;
  align-items: flex-end;
}
.lede p{
  margin: 0;
  font-family: var(--kor);
  font-size: 14px;
  line-height: 2;
  color: var(--ivory-dim);
  font-weight: 400;
  max-width: 280px;
}

.channels{ display: flex; flex-direction: column; gap: 8px; width: 260px; }
.channels-label{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.36em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-left: 0.36em;
  text-align: right;
}
.ch{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(201,160,74,0.2);
  background: rgba(10,6,3,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .4s cubic-bezier(.2,.7,.2,1);
  text-align: left;
}
.ch svg:first-child{ flex-shrink: 0; color: var(--ivory); }
.ch-text{ display: flex; flex-direction: column; flex: 1; gap: 2px; }
.ch-name{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  font-weight: 500;
}
.ch-handle{
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ivory-dim);
}
.ch-arrow{ color: var(--ivory-dim); transition: all .4s; }
.ch:hover{
  border-color: var(--gold-warm);
  background: rgba(201,160,74,0.08);
  transform: translateX(-4px);
}
.ch:hover svg:first-child,
.ch:hover .ch-name,
.ch:hover .ch-arrow{ color: var(--gold-warm); }
.ch:hover .ch-arrow{ transform: translate(2px,-2px); }

/* =========== REEL (center) =========== */
.reel-wrap{
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  align-self: center;
  animation: reelIn 1.4s .1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes reelIn{
  from{ opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(8px); }
  to  { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0);   }
}

.reel{
  position: relative;
  width: clamp(280px, 32vw, 420px);
  aspect-ratio: 9/16;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(201,160,74,0.28),
    0 40px 100px -20px rgba(0,0,0,0.85),
    0 20px 50px -20px rgba(255,150,60,0.15),
    inset 0 0 0 1px rgba(255,255,255,0.03);
  background: #0a0603;
}

.reel-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
  z-index: 2;
}
.reel-video.ready{ opacity: 1; }

/* Cinemagraph fallback: four images cross-fade */
.reel-fallback{
  position: absolute; inset: 0;
  z-index: 1;
  transition: opacity .6s;
}
.reel-fallback.hidden{ opacity: 0; pointer-events: none; }
.reel-fallback img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.85) saturate(0.9) contrast(1.05);
  animation: fbCycle 20s infinite;
  transform: scale(1.05);
}
.reel-fallback .fb-a{ animation-delay: 0s; }
.reel-fallback .fb-b{ animation-delay: 5s; }
.reel-fallback .fb-c{ animation-delay: 10s; }
.reel-fallback .fb-d{ animation-delay: 15s; }
@keyframes fbCycle{
  0%    { opacity: 0; transform: scale(1.05); }
  5%    { opacity: 1; }
  25%   { opacity: 1; transform: scale(1.12); }
  30%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* IG-style overlays */
.reel-top{
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 5;
  padding: 16px 16px 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent);
}
.ig-user{ display: flex; align-items: center; gap: 10px; }
.ig-avatar{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5c778 0%, #c9a04a 50%, #6a1b17 100%);
  padding: 2px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ivory);
}
.ig-avatar-inner{
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #0a0603;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.mini-candle{
  position: relative;
  width: 6px; height: 20px;
}
.mini-flame{
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 9px;
  background: radial-gradient(ellipse at 50% 65%, #fff2c0, var(--flame) 40%, #ff9d3a 75%, transparent);
  border-radius: 50% 50% 42% 42%;
  animation: flicker 2.6s ease-in-out infinite;
  transform-origin: bottom center;
}
.mini-wax{
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 4px; height: 10px;
  background: linear-gradient(to bottom, #f0e2c2, #b89865);
  border-radius: 1px;
}
.ig-meta{ display: flex; flex-direction: column; gap: 0; }
.ig-handle{
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ivory);
  letter-spacing: 0.02em;
}
.ig-sub{
  font-family: var(--sans);
  font-size: 10px;
  color: rgba(242,230,207,0.55);
  letter-spacing: 0.04em;
}
.ig-follow{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ivory);
  padding: 5px 12px;
  border: 1px solid rgba(242,230,207,0.7);
  border-radius: 4px;
  transition: all .3s;
}
.ig-follow:hover{
  background: var(--ivory);
  color: var(--bg);
}

/* Reel bottom */
.reel-bottom{
  position: absolute; bottom: 0; left: 0; right: 60px;
  z-index: 5;
  padding: 40px 16px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}
.reel-caption p{
  margin: 0 0 14px;
  font-family: var(--kor);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ivory);
  font-weight: 400;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.coming{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(240,180,85,0.55);
  background: rgba(10,6,3,0.5);
  backdrop-filter: blur(6px);
  border-radius: 3px;
}
.coming .dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-warm);
  box-shadow: 0 0 10px rgba(240,180,85,0.9);
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{ 0%,100%{opacity:.4;transform:scale(.7)} 50%{opacity:1;transform:scale(1)} }
.coming-text{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-warm);
  font-weight: 500;
  padding-left: 0.32em;
}

/* Reel right rail (IG actions) */
.reel-actions{
  position: absolute;
  right: 12px; bottom: 20px;
  z-index: 5;
  display: flex; flex-direction: column; gap: 18px;
  color: var(--ivory);
}
.rx{
  color: rgba(242,230,207,0.9);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  transition: transform .3s, color .3s;
}
.rx:hover{ color: var(--gold-warm); transform: scale(1.1); }

/* Corner accents */
.corner{
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(201,160,74,0.6);
  border-style: solid;
  border-width: 0;
  z-index: 4;
  pointer-events: none;
}
.c-tl{ top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.c-tr{ top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; }
.c-bl{ bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; }
.c-br{ bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }

/* Reel dots */
.reel-dots{
  display: flex; gap: 6px;
  padding-top: 4px;
}
.reel-dots .d{
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(242,230,207,0.25);
  transition: all .4s;
}
.reel-dots .d.active{
  background: var(--gold-warm);
  width: 20px; border-radius: 2px;
  box-shadow: 0 0 8px rgba(240,180,85,0.5);
}

/* =========== COPY (bottom center) =========== */
.copy{
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 6;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.36em;
  color: rgba(242,230,207,0.35);
  text-transform: uppercase;
  padding-left: 0.36em;
  white-space: nowrap;
}

/* =========== INTRO =========== */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* =========== RESPONSIVE =========== */
@media (max-width: 1024px){
  .stage{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 32px;
    padding: 28px 24px 80px;
  }
  .col-left, .col-right{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
  }
  .col-right{ align-items: flex-end; }
  .right-bottom{ align-items: flex-end; }
  .channels{ width: 220px; }
  .brand-est, .brand-loc{ font-size: 9.5px; }
  .lede{ display: none; }
}

@media (max-width: 640px){
  .stage{ padding: 8px 20px 100px; gap: 8px; }
  .col-left, .col-right{
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  .col-right{ text-align: center; }
  .right-top{
    position: fixed;
    top: 20px;
    right: 14px;
    z-index: 20;
    gap: 8px;
    align-items: flex-end;
  }
  .right-top .year-tag{ display: none; }
  .right-bottom{ align-items: center; width: 100%; }
  .channels{
    width: auto;
    max-width: none;
    flex-direction: row;
    gap: 8px;
  }
  .channels-label{ display: none; }
  .ch{
    min-width: 44px;
    min-height: 44px;
    padding: 11px;
    border-radius: 999px;
    gap: 0;
    background: rgba(10,6,3,0.58);
  }
  .ch .ch-text,
  .ch .ch-arrow{ display: none; }
  .ch svg:first-child{ width: 18px; height: 18px; }
  .year-tag{ font-size: 18px; }
  .brand{ flex-direction: column; text-align: center; }
  .brand-text{
    flex-direction: row; gap: 16px;
    border-left: 0;
    border-top: 1px solid rgba(201,160,74,0.25);
    padding: 8px 0 0 0;
  }
  .left-bottom{ align-items: center; width: 100%; max-width: 340px; }
  .title-scene{ width: 100%; min-height: 150px; margin-top: 30px; }
  .title-scene::before{ inset: 8% -4% 0; }
  .f-left-lg{ left: 0%; height: 78px; width: 25px; bottom: 14px; }
  .f-left-sm{ left: 16%; height: 42px; width: 14px; bottom: 112px; }
  .f-right-sm{ right: 14%; height: 52px; width: 17px; bottom: 42px; }
  .f-right-lg{ right: 0%; height: 74px; width: 24px; bottom: 18px; }
  .chapter{ font-size: 9px; letter-spacing: 0.34em; padding-left: 0.34em; }
  .chapter .hair{ width: 26px; }
  .wordmark{
    justify-content: center;
    width: 100%;
    gap: 8px;
    overflow: visible;
  }
  .wordmark .ko{ font-size: clamp(48px, 13vw, 54px); line-height: 1.12; }
  .wordmark .year{ font-size: clamp(21px, 6.5vw, 28px); transform: translateY(-6%); }
  .title-subtitle{
    font-size: 8.5px;
    letter-spacing: 0.32em;
    padding-left: 0.32em;
  }
  .tag{ max-width: 100%; font-size: 12px; letter-spacing: 0.12em; white-space: nowrap; }
  .reel{ width: min(88vw, 340px); }
  .reel-wrap{ gap: 8px; }
  .copy{
    font-size: 8.5px;
    letter-spacing: 0.24em;
    padding-left: 0.24em;
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}