/* ══ Product showcase v2 — parchment hero + animated open premium book ══
   Light "manuscript" hero matching the book pages themselves: cream paper,
   gold filigree, faint zodiac ring, rising gold dust — and an open 3D book
   whose pages turn by themselves. */

/* ── parchment hero section ── */
.hz-paper-hero {
  position: relative; overflow: clip; isolation: isolate;
  background:
    /* dark cocoa vignette so the parchment reads lit from within */
    radial-gradient(130% 105% at 50% 30%, transparent 50%, rgba(74, 42, 12, 0.18) 76%, rgba(46, 24, 5, 0.5) 100%),
    radial-gradient(90% 70% at 50% 0%, rgba(255, 250, 235, 0.9), transparent 60%),
    radial-gradient(58% 42% at 18% 20%, rgba(176, 136, 66, 0.08), transparent 62%),
    radial-gradient(52% 40% at 86% 78%, rgba(150, 108, 48, 0.07), transparent 62%),
    linear-gradient(168deg, #f8f1de 0%, #f1e6c9 58%, #dcc99e 100%);
  padding: 34px 0 46px;
}
/* paper grain */
.hz-paper-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
/* thin ornamental frame just inside the section */
.hz-paper-hero::after {
  content: ''; position: absolute; inset: 14px; pointer-events: none; z-index: 0;
  border: 1px solid rgba(166, 119, 23, 0.28);
  outline: 1px solid rgba(166, 119, 23, 0.14); outline-offset: 4px;
}
.hz-paper-hero .hz-cosmos-content,
.hz-paper-hero .hz-container { position: relative; z-index: 2; }

/* light-theme typography inside the paper hero */
.hz-paper-hero .hz-eyebrow { color: var(--hz-gold-deep); }
.hz-paper-hero .hz-display {
  text-shadow: none;
  background: linear-gradient(105deg, #6d2620 0%, #6d2620 42%, #b0742a 50%, #6d2620 58%, #6d2620 100%);
  background-size: 230% 100%; background-position: 115% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hzTitleSheen 7s ease-in-out infinite;
}
@keyframes hzTitleSheen {
  0%, 20%  { background-position: 115% 0; }
  60%, 100%{ background-position: -15% 0; }
}
.hz-paper-hero .hz-lede { color: var(--hz-ink-soft, #5a452a); }
.hz-paper-hero .hz-lede strong { color: var(--hz-maroon); }
.hz-paper-hero .hz-stat {
  border-color: rgba(166, 119, 23, 0.4); background: rgba(255, 252, 243, 0.55);
  border-top: 3px solid rgba(123, 45, 38, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hz-paper-hero .hz-stat:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(90, 60, 15, 0.22); }
.hz-paper-hero .hz-stat b { color: var(--hz-maroon); }
.hz-paper-hero .hz-stat span { color: var(--hz-ink-faint, #8a6f45); }
.hz-paper-hero .hz-form-card {
  border: 1px solid rgba(166, 119, 23, 0.45);
  box-shadow: 0 26px 60px rgba(90, 60, 15, 0.3), 0 4px 14px rgba(90, 60, 15, 0.16);
}

/* gold zodiac ring behind content */
.hz-paper-hero .hz-zodiac-ring { opacity: 0.22; z-index: 1; }

/* rising gold dust */
.hz-dust { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hz-dust i {
  position: absolute; bottom: -8px; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9ae, #cf9433);
  box-shadow: 0 0 8px 2px rgba(227, 182, 79, 0.45);
  opacity: 0; animation: hzDustRise 11s linear infinite;
}
.hz-dust i:nth-child(1) { left: 8%;  animation-delay: 0s;    scale: 0.7; }
.hz-dust i:nth-child(2) { left: 22%; animation-delay: 2.6s;  scale: 1;   }
.hz-dust i:nth-child(3) { left: 34%; animation-delay: 5.4s;  scale: 0.55;}
.hz-dust i:nth-child(4) { left: 47%; animation-delay: 1.4s;  scale: 0.8; }
.hz-dust i:nth-child(5) { left: 58%; animation-delay: 7.2s;  scale: 0.6; }
.hz-dust i:nth-child(6) { left: 71%; animation-delay: 3.8s;  scale: 1;   }
.hz-dust i:nth-child(7) { left: 84%; animation-delay: 6.2s;  scale: 0.7; }
.hz-dust i:nth-child(8) { left: 93%; animation-delay: 8.8s;  scale: 0.5; }
@keyframes hzDustRise {
  0%   { transform: translateY(0);      opacity: 0; }
  12%  { opacity: 0.85; }
  60%  { opacity: 0.5; }
  100% { transform: translateY(-72vh) translateX(18px); opacity: 0; }
}

/* ── the open book ─────────────────────────────────────────────── */
.hz-openbook-wrap {
  perspective: 1500px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  margin: 26px 0 8px;
}
.hz-openbook-stage { position: relative; animation: hzBookFloat 7s ease-in-out infinite alternate; }
@keyframes hzBookFloat { from { transform: translateY(0); } to { transform: translateY(-11px); } }

/* breathing golden aura behind the book */
.hz-openbook-stage::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 135%; height: 125%; transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(50% 46% at 50% 50%,
    rgba(255, 214, 130, 0.5), rgba(227, 182, 79, 0.2) 52%, transparent 74%);
  filter: blur(8px);
  animation: hzAuraPulse 5.5s ease-in-out infinite alternate;
}
@keyframes hzAuraPulse {
  from { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
  to   { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

/* twinkling gold sparks around the book */
.hz-sparks { position: absolute; inset: -34px; z-index: 3; pointer-events: none; }
.hz-sparks i { position: absolute; font-style: normal; color: #d9a53f;
  text-shadow: 0 0 8px rgba(255, 214, 130, 0.85);
  animation: hzSparkTwinkle 3.4s ease-in-out infinite; }
.hz-sparks i::before { content: '✦'; }
.hz-sparks i:nth-child(1) { left: 4%;  top: 16%; font-size: 1rem;    animation-delay: 0s;   }
.hz-sparks i:nth-child(2) { left: 90%; top: 10%; font-size: 0.7rem;  animation-delay: 0.9s; }
.hz-sparks i:nth-child(3) { left: 97%; top: 55%; font-size: 1.15rem; animation-delay: 1.7s; }
.hz-sparks i:nth-child(4) { left: 8%;  top: 74%; font-size: 0.65rem; animation-delay: 2.4s; }
.hz-sparks i:nth-child(5) { left: 50%; top: -4%; font-size: 0.8rem;  animation-delay: 1.2s; }
.hz-sparks i:nth-child(6) { left: 78%; top: 88%; font-size: 0.9rem;  animation-delay: 2.9s; }
@keyframes hzSparkTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(24deg); }
}

/* photographic open-book render (transparent webp) */
.hz-openbook-img {
  display: block; width: min(560px, 92vw); height: auto;
  position: relative; z-index: 2;
  filter: drop-shadow(0 22px 30px rgba(70, 45, 10, 0.3));
}
.hz-openbook-img + .hz-openbook-shadow {
  bottom: -20px; width: 72%; left: 50%; transform: translateX(-50%) rotate(-3deg);
}

.hz-openbook {
  position: relative; width: 430px; height: 292px;
  transform: rotateX(46deg) rotateZ(-8deg);
  transform-style: preserve-3d;
}
/* stacked page-block base under the spread */
.hz-openbook .ob-base {
  position: absolute; inset: -3px -4px -10px -4px; border-radius: 8px;
  background: #e9dcba;
  box-shadow:
    0 3px 0 #e2d3ac, 0 6px 0 #d8c79c, 0 9px 0 #cbb88a,
    0 12px 0 #b9a374, 0 13px 2px rgba(70, 45, 10, 0.4);
}
.hz-openbook .ob-page {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    repeating-linear-gradient(105deg, transparent 0 11px, rgba(166,119,23,0.04) 11px 12px),
    linear-gradient(160deg, #faf4e3 0%, #f3e9cf 60%, #ecdfc0 100%);
  border: 1px solid rgba(166, 119, 23, 0.35);
  padding: 16px 15px 13px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hz-openbook .ob-left  { left: 0;  border-radius: 7px 2px 2px 7px; transform-origin: right center; transform: rotateY(7deg); }
.hz-openbook .ob-right { right: 0; border-radius: 2px 7px 7px 2px; transform-origin: left center;  transform: rotateY(-7deg); }
/* centre gutter shadow */
.hz-openbook .ob-gutter {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 56px; margin-left: -28px;
  z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(90, 60, 15, 0.24) 46%, rgba(90, 60, 15, 0.3) 50%, rgba(90, 60, 15, 0.24) 54%, transparent);
}
/* soft ground shadow */
.hz-openbook-shadow {
  position: absolute; left: 50%; bottom: -34px; width: 400px; height: 46px;
  transform: translateX(-50%) rotate(-6deg);
  background: radial-gradient(ellipse, rgba(70, 45, 10, 0.35), transparent 70%);
  filter: blur(9px);
}

/* ── self-turning leaf (right page that flips over) ── */
.hz-openbook .ob-leaf {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 50%;
  transform-origin: left center; transform-style: preserve-3d;
  animation: hzLeafTurn 9.5s ease-in-out infinite;
  z-index: 4; pointer-events: none;
}
.hz-openbook .ob-leaf > div {
  position: absolute; inset: 0; backface-visibility: hidden;
  border: 1px solid rgba(166, 119, 23, 0.3);
  background: linear-gradient(160deg, #faf4e3, #f0e5c8);
  border-radius: 2px 7px 7px 2px;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 8px;
}
.hz-openbook .ob-leaf .lf-back { transform: rotateY(180deg); border-radius: 7px 2px 2px 7px; }
@keyframes hzLeafTurn {
  0%, 14%  { transform: rotateY(0deg); opacity: 1; }
  46%      { transform: rotateY(-178deg); opacity: 1; }
  50%      { transform: rotateY(-178deg); opacity: 0; }
  54%      { transform: rotateY(0deg); opacity: 0; }
  64%, 100%{ transform: rotateY(0deg); opacity: 1; }
}
/* faint text lines used on leaf faces */
.ob-lines { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.ob-lines i { display: block; height: 4px; border-radius: 2px; background: rgba(107, 76, 28, 0.28); }
.ob-lines i:nth-child(2n) { width: 86%; }
.ob-lines i:nth-child(3n) { width: 68%; }

/* ── page content: left = table of contents ── */
.ob-toc-title {
  font-family: var(--hz-font-display); font-style: italic; font-size: 0.82rem;
  color: var(--hz-ink, #3a2a12); text-align: center; margin-bottom: 8px;
}
.ob-toc-sec {
  font-size: 0.5rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hz-gold-deep); margin: 6px 0 4px; display: flex; align-items: center; gap: 6px;
}
.ob-toc-sec::after { content: ''; flex: 1; height: 1px; background: rgba(166, 119, 23, 0.4); }
.ob-toc-row {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 0.54rem; color: #5a452a; line-height: 1.9;
}
.ob-toc-row::after { content: ''; flex: 1; border-bottom: 1px dotted rgba(166, 119, 23, 0.5); }
.ob-toc-row b { font-weight: 700; color: var(--hz-maroon); font-size: 0.5rem; }

/* ── page content: right = maroon chapter plate ── */
.ob-plate {
  flex: 1; border-radius: 7px; position: relative; overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 224, 150, 0.14), transparent 60%),
    linear-gradient(165deg, #7b3a2c 0%, #5e2418 62%, #47180f 100%);
  box-shadow: inset 0 0 0 1px rgba(227, 182, 79, 0.35), inset 0 0 26px rgba(0, 0, 0, 0.3);
  display: flex; flex-direction: column; align-items: center;
  padding: 15px 14px 12px; text-align: center;
}
.ob-plate .pl-title {
  font-family: var(--hz-font-display); font-style: italic; font-size: 0.86rem;
  color: #f0cf8e; letter-spacing: 0.06em;
}
.ob-plate .pl-orb {
  width: 40px; height: 40px; border-radius: 50%; margin: 12px 0 10px;
  background: radial-gradient(circle at 34% 30%, #ffe9ae, #e3a94f 55%, #9c6420 100%);
  box-shadow: 0 0 16px rgba(255, 214, 130, 0.55), 0 0 0 6px rgba(255, 214, 130, 0.12), 0 0 0 12px rgba(255, 214, 130, 0.06);
}
.ob-plate .pl-lines { width: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ob-plate .pl-lines i { display: block; height: 3.5px; border-radius: 2px; background: rgba(250, 235, 205, 0.4); width: 92%; }
.ob-plate .pl-lines i:nth-child(2n) { width: 80%; }
.ob-plate .pl-lines i:nth-child(3n) { width: 62%; }
.ob-plate .pl-score {
  font-family: var(--hz-font-display); font-size: 1.15rem; font-weight: 800;
  color: #ffe1a0; margin: 8px 0 8px;
}
.ob-plate .pl-score small { font-size: 0.62rem; color: #dcb877; }
.ob-plate .pl-arc { width: 92px; margin: 8px 0 2px; }
.ob-plate .pl-arc .track { fill: none; stroke: rgba(250, 235, 205, 0.22); stroke-width: 9; stroke-linecap: round; }
.ob-plate .pl-arc .val { fill: none; stroke: #e3b64f; stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 132; stroke-dashoffset: 132; animation: hzArcFill 4.5s ease-out infinite; }
@keyframes hzArcFill { 0% { stroke-dashoffset: 132; } 45%, 82% { stroke-dashoffset: 33; } 100% { stroke-dashoffset: 132; } }

/* caption + chips (light theme) */
.hz-openbook-cap { text-align: center; font-size: 0.86rem; font-style: italic; color: var(--hz-ink-faint, #8a6f45); }
.hz-showcase-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.hz-showcase-chips span {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  color: #5a452a; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(166, 119, 23, 0.5);
  background: rgba(255, 252, 243, 0.65);
}
.hz-showcase-chips span b { color: var(--hz-maroon); }

/* two-column showcase strip (Milan page) */
.hz-showcase-row {
  display: grid; grid-template-columns: auto minmax(0, 360px);
  gap: 52px; align-items: center; justify-content: center;
  margin: 30px 0 16px;
}
.hz-showcase-row .hz-openbook-wrap { margin: 0; }
.hz-showcase-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hz-showcase-list li {
  position: relative; padding-left: 20px; text-align: left;
  font-size: 0.9rem; color: #5a452a; line-height: 1.55;
}
.hz-showcase-list li::before { content: '✦'; position: absolute; left: 0; top: 2px; color: var(--hz-gold-deep); font-size: 0.7rem; }
.hz-showcase-list li b { color: var(--hz-maroon); }

@media (max-width: 1000px) {
  .hz-openbook { width: 360px; height: 246px; }
  .hz-openbook-shadow { width: 330px; }
}
@media (max-width: 860px) {
  .hz-showcase-row { grid-template-columns: 1fr; gap: 26px; justify-items: center; }
}
@media (max-width: 480px) {
  .hz-openbook { width: 300px; height: 208px; }
  .hz-openbook .ob-page { padding: 11px 10px 9px; }
  .hz-openbook-shadow { width: 270px; }
}

@media (prefers-reduced-motion: reduce) {
  .hz-openbook-stage, .hz-dust i, .hz-openbook .ob-leaf,
  .hz-openbook-stage::before, .hz-sparks i, .hz-paper-hero .hz-display { animation: none !important; }
  .ob-plate .pl-arc .val { animation: none !important; stroke-dashoffset: 33; }
}

/* ══ Royal-invitation form design (paper-hero pages) ══════════════ */
.hz-paper-hero .hz-form-card {
  overflow: hidden;
  border: 1px solid rgba(166, 119, 23, 0.5);
  animation: hzCardIn 0.7s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes hzCardIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* maroon invitation band behind the heading */
.hz-paper-hero .hz-form-card h2 {
  position: relative;
  margin: -34px -32px 6px; padding: 20px 20px 16px;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(255, 214, 130, 0.16), transparent 70%),
    linear-gradient(165deg, #7b3a2c 0%, #5e2418 60%, #4a180f 100%);
  color: #f0cf8e;
  font-size: 1.4rem;
}
.hz-paper-hero .hz-form-card h2::before, .hz-paper-hero .hz-form-card h2::after {
  content: '✦'; font-size: 0.7rem; color: rgba(240, 207, 142, 0.75);
  position: absolute; top: 50%; transform: translateY(-50%);
}
.hz-paper-hero .hz-form-card h2::before { left: 22px; }
.hz-paper-hero .hz-form-card h2::after { right: 22px; }
.hz-paper-hero .hz-form-card .hz-form-sub { margin-top: 10px; }
/* gold scallop trim under the band */
.hz-paper-hero .hz-form-card .hz-form-sub::before {
  content: '❧ ✦ ❧'; display: block; letter-spacing: 0.6em; text-indent: 0.6em;
  color: var(--hz-gold-deep); font-size: 0.72rem; margin-bottom: 8px;
}
/* the inner hairline frame must not cross the band */
.hz-paper-hero .hz-form-card::before { display: none; }

/* fields: gold ✦ label prefix + maroon focus bar */
.hz-paper-hero .hz-field label::before { content: '✦ '; color: var(--hz-gold-deep); font-size: 0.66rem; }
.hz-paper-hero .hz-field input, .hz-paper-hero .hz-field select {
  border-left: 3px solid rgba(166, 119, 23, 0.35);
  transition: border-color 0.2s, box-shadow 0.2s, border-left-color 0.2s;
}
.hz-paper-hero .hz-field input:focus, .hz-paper-hero .hz-field select:focus {
  border-left-color: var(--hz-maroon);
  box-shadow: 0 0 0 3px rgba(201, 150, 46, 0.2), 0 6px 16px rgba(90, 60, 15, 0.12);
}

/* submit: shine sweep + lift */
.hz-paper-hero .hz-form-card .hz-btn-gold { position: relative; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
.hz-paper-hero .hz-form-card .hz-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(120, 80, 20, 0.4); }
.hz-paper-hero .hz-form-card .hz-btn-gold::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 46%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 252, 240, 0.5), transparent);
  transform: skewX(-18deg);
  animation: hzBtnShine 4.2s ease-in-out infinite;
}
@keyframes hzBtnShine { 0%, 55% { left: -60%; } 85%, 100% { left: 120%; } }

/* Milan: tinted groom/bride panels + centre heart seal */
.hz-paper-hero .hz-milan-grid { position: relative; }
.hz-paper-hero .hz-person-form:first-child {
  background: linear-gradient(180deg, rgba(123, 45, 38, 0.055), transparent 55%);
  border-color: rgba(123, 45, 38, 0.45);
}
.hz-paper-hero .hz-person-form:last-child {
  background: linear-gradient(180deg, rgba(201, 150, 46, 0.09), transparent 55%);
  border-color: rgba(166, 119, 23, 0.55);
}
.hz-paper-hero .hz-milan-grid::after {
  content: '❤'; position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #fdf3df;
  background: linear-gradient(180deg, #a5793c, #7b4a1c);
  border: 2.5px double rgba(253, 244, 221, 0.75);
  box-shadow: 0 4px 14px rgba(90, 60, 15, 0.4);
  animation: hzHeartBeat 2.6s ease-in-out infinite;
  z-index: 2;
}
@keyframes hzHeartBeat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  12%      { transform: translate(-50%, -50%) scale(1.14); }
  24%      { transform: translate(-50%, -50%) scale(1); }
  36%      { transform: translate(-50%, -50%) scale(1.1); }
}
@media (max-width: 700px) { .hz-paper-hero .hz-milan-grid::after { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hz-paper-hero .hz-form-card, .hz-paper-hero .hz-form-card .hz-btn-gold::after,
  .hz-paper-hero .hz-milan-grid::after { animation: none !important; }
}