/* ─────────── HERO LAYOUT ─────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff8ec;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(232,180,184,.45), transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(212,197,232,.45), transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(201,169,97,.35), transparent 60%),
    linear-gradient(160deg, #4B1820 0%, #7A2E3A 35%, #C77B86 70%, #E8B4B8 100%);
  overflow:hidden;
  isolation:isolate;
  padding: 4vh 4vw;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%);
  pointer-events:none; z-index:1;
}

/* ─────────── HERO PHOTO PANEL ─────────── */
.hero-photo-frame{
  position:relative; z-index:5;
  flex: 0 0 auto;
  width: min(42vw, 460px);
  aspect-ratio: 4/5;
  border-radius: 14px;
  overflow:hidden;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.65),
    0 0 0 6px rgba(251,235,212,.85),
    0 0 0 7px rgba(201,169,97,.7),
    0 0 60px rgba(231,203,133,.35);
  transform: rotate(2deg);
  animation: photo-float 6s ease-in-out infinite alternate;
}
.hero-photo-frame .frame-corner{ width:64px; height:64px; z-index:3 }
.hero-photo{
  position:absolute; inset:0;
  background-image: url("../2024_Feb_02_02.jpg");
  background-size: cover;
  background-position: center 40%;
  filter: saturate(1.15) contrast(1.06) brightness(.96);
  animation: kenburns 22s ease-in-out infinite alternate;
  z-index:0;
  will-change: transform;
}
.hero-photo-frame::after{
  /* subtle inner sheen */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(160deg, rgba(255,255,255,.15) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.35), transparent 60%);
  pointer-events:none; z-index:2;
}

/* ─────────── HERO VFX LAYERS ─────────── */
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg,
    rgba(26,8,16,.35) 0%, transparent 45%, transparent 55%, rgba(26,8,16,.25) 100%);
  pointer-events:none;
}
.hero-wash{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(232,180,184,.18), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(212,197,232,.18), transparent 60%),
    radial-gradient(ellipse at 50% 90%, rgba(201,169,97,.25), transparent 65%);
  mix-blend-mode: screen;
  pointer-events:none;
}
.light-leak{
  position:absolute; inset:-50%; z-index:1;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(231,203,133,.0)  40deg,
      rgba(231,203,133,.18) 70deg,
      rgba(255,200,210,.15) 110deg,
      rgba(231,203,133,.0)  150deg,
      transparent 180deg,
      rgba(212,197,232,.12) 240deg,
      rgba(231,203,133,.0)  280deg,
      transparent 360deg);
  mix-blend-mode: screen;
  filter: blur(60px);
  opacity:.85;
  animation: leak-spin 40s linear infinite;
  pointer-events:none;
}
.bokeh{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden }
.bokeh-dot{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,230,180,.7), rgba(231,203,133,.25) 40%, transparent 70%);
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: bokeh-float linear infinite;
  will-change: transform;
}
.grain{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow: inset 0 0 200px 40px rgba(0,0,0,.65);
  animation: breathe 8s ease-in-out infinite alternate;
}

/* ─────────── HERO PARTICLES (stars + petals) ─────────── */
.stars{ position:absolute; inset:0; z-index:4; pointer-events:none }
.star{
  position:absolute; width:3px; height:3px;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
  border-radius:50%;
  animation: twinkle 3s ease-in-out infinite;
}

.petals{ position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden }
.petal{
  position:absolute; top:-8vh;
  width:18px; height:18px;
  background: radial-gradient(ellipse at 30% 30%, #fff 0%, #FBD3D7 35%, #E8B4B8 70%, #C77B86 100%);
  border-radius:80% 10% 80% 10%;
  opacity:.85;
  filter: drop-shadow(0 0 4px rgba(255,200,210,.4));
  animation: petal-fall linear infinite, petal-sway ease-in-out infinite;
  will-change: transform;
}

/* ─────────── HERO CONTENT BLOCK ─────────── */
.hero-inner{
  position:relative; z-index:5;
  padding: 2vh 0;
  max-width:540px;
  flex: 0 1 auto;
  text-align:left;
  animation: hero-rise 1.6s cubic-bezier(.22,.9,.3,1) both;
}
.hero-flourish-top,
.hero-flourish-bot{
  color:var(--gold-soft);
  margin:0 0 1.2rem;
  display:block;
}
.hero-flourish-bot{ margin: 1.2rem 0 0; transform: rotate(180deg) }

.label{
  font-family:var(--serif);
  letter-spacing:.6em;
  font-size:clamp(.8rem, 1.4vw, 1.1rem);
  color:var(--gold-soft);
  margin-bottom:1.5rem;
  text-indent:.6em;
}
.label .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold); margin:0 1em; vertical-align:middle;
}

/* shimmering couple names */
.names{
  font-family:var(--pen);
  font-size:clamp(3.4rem, 10vw, 7.6rem);
  line-height:1.1;
  margin:0 0 .5rem;
  position:relative;
  background: linear-gradient(100deg,
    #FFF8EC 0%,
    #FFE9C2 18%,
    #F3D58A 32%,
    #FFF6E9 48%,
    #F3D58A 64%,
    #FFE9C2 80%,
    #FFF8EC 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 4px 20px rgba(0,0,0,.55))
    drop-shadow(0 0 24px rgba(255,210,150,.35))
    drop-shadow(0 0 50px rgba(231,203,133,.25));
  animation: shimmer 6s linear infinite;
}
.names .amp{
  color: #FFD0D6;
  -webkit-text-fill-color: #FFD0D6;
  background: none;
  margin:0 .25em;
  display:inline-block;
  position:relative;
  text-shadow:
    0 0 12px rgba(255,150,170,.9),
    0 0 30px rgba(255,100,130,.6),
    0 0 60px rgba(231,203,133,.4);
  animation: heart-beat 1.4s ease-in-out infinite;
}
.names .amp::before,
.names .amp::after{
  content:""; position:absolute; inset:50% 50% 50% 50%;
  border-radius:50%;
  border: 2px solid rgba(255,200,210,.55);
  transform: translate(-50%,-50%);
  animation: heart-ring 1.8s ease-out infinite;
  pointer-events:none;
}
.names .amp::after{ animation-delay: .9s }

.tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1rem, 2vw, 1.4rem);
  color:#fbe9d6;
  margin-top:.5rem;
  opacity:.92;
}

.divider{
  margin:2rem 0;
  width:140px; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  position:relative;
}
.divider::before{
  content:"✦"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  color:var(--gold-soft);
  font-size:.85rem; padding:0 .5em;
  background: linear-gradient(160deg, #7A2E3A, #C77B86);
}

.wedding-date{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.5em;
  font-size:clamp(1.5rem, 3.4vw, 2.4rem);
  margin:0 0 .3rem;
  text-indent:.5em;
  position:relative;
  background: linear-gradient(90deg, #E7CB85, #FFF6E9 50%, #E7CB85);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip:text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 10px rgba(0,0,0,.4))
    drop-shadow(0 0 18px rgba(231,203,133,.45));
  animation: shimmer 7s linear infinite;
}
.wedding-date-kor{
  font-family:var(--kor);
  font-weight:700;
  letter-spacing:.3em;
  font-size:clamp(.95rem, 1.6vw, 1.15rem);
  color:#fff3e0;
  margin:0 0 1.2rem;
  text-indent:.3em;
  opacity:.95;
}
.date-line{
  font-family:var(--serif);
  letter-spacing:.3em;
  font-size:clamp(.85rem, 1.4vw, 1rem);
  color:#fff3e0;
  opacity:.75;
  font-style:italic;
}

.scroll-cue{
  position:absolute; bottom:3vh; left:50%; transform:translateX(-50%);
  z-index:3; color:#fff8ec;
  font-family:var(--serif); font-size:.85rem; letter-spacing:.3em;
  opacity:.8;
  animation: bounce 2s ease-in-out infinite;
}
.scroll-cue::after{
  content:""; display:block; width:1px; height:32px;
  margin:.5rem auto 0;
  background: linear-gradient(180deg, #fff8ec, transparent);
}

/* ─────────── HERO KEYFRAMES ─────────── */
@keyframes photo-float{
  0%  { transform: rotate(2deg)  translateY(0) }
  100%{ transform: rotate(-1deg) translateY(-12px) }
}
@keyframes kenburns{
  0%   { transform: scale(1.04) translate(0, 0) }
  100% { transform: scale(1.18) translate(-2%, -3%) }
}
@keyframes leak-spin{
  0%  { transform: rotate(0deg) }
  100%{ transform: rotate(360deg) }
}
@keyframes bokeh-float{
  0%  { transform: translate3d(0, 110vh, 0) scale(.7); opacity:0 }
  15% { opacity:.9 }
  85% { opacity:.7 }
  100%{ transform: translate3d(40px, -20vh, 0) scale(1.2); opacity:0 }
}
@keyframes breathe{
  0%  { box-shadow: inset 0 0 180px 30px rgba(0,0,0,.55) }
  100%{ box-shadow: inset 0 0 240px 60px rgba(0,0,0,.75) }
}
@keyframes hero-rise{
  0%  { opacity:0; transform: translateY(40px) scale(.98); filter: blur(6px) }
  100%{ opacity:1; transform: none; filter: blur(0) }
}
@keyframes shimmer{
  0%   { background-position: 200% 50% }
  100% { background-position:-200% 50% }
}
@keyframes heart-beat{
  0%,100%{ transform:scale(1) }
  25%   { transform:scale(1.18) }
  50%   { transform:scale(.94) }
}
@keyframes heart-ring{
  0%  { width:0;     height:0;     opacity:.9 }
  100%{ width:160px; height:160px; opacity:0  }
}
@keyframes petal-fall{
  0%   { transform: translate3d(0,-10vh,0) rotate(0deg) }
  100% { transform: translate3d(0,110vh,0) rotate(720deg) }
}
@keyframes petal-sway{
  0%,100%{ margin-left:0 }
  50%    { margin-left:60px }
}
@keyframes bounce{
  0%,100%{ transform: translate(-50%, 0)  }
  50%   { transform: translate(-50%, 8px) }
}

/* ─────────── HERO MOBILE ─────────── */
@media (max-width: 820px){
  .hero{
    flex-direction: column;
    text-align:center;
    padding: 6vh 6vw 4vh;
  }
  .hero-photo-frame{
    width: min(70vw, 320px);
    order:-1;
    margin-bottom:.5rem;
  }
  .hero-overlay{
    background: linear-gradient(180deg, rgba(26,8,16,.4), transparent 30%, transparent 70%, rgba(26,8,16,.4));
  }
  .hero-inner{ text-align:center; padding: 2vh 2vw }
  .hero-flourish-top,
  .hero-flourish-bot{ margin-left:auto; margin-right:auto }
  .hero-flourish-bot{ transform: rotate(180deg) }
  .divider{ margin: 2rem auto }
}