/* ================================================================
   v4.css — Version 4 polish layer
   ================================================================
   Loaded LAST (after v3.css) so these rules win the cascade.

   V4 CHANGES:
   1. Opening card now shows on EVERY refresh (js change).
   2. Sacred intro writes LIVE after the card opens (js change).
   3. Love heart — BIGGER + more modern:
      • desktop up to 960px
      • portrait phones stretch LONG toward the bottom
      • richer gold rim, animated glossy sheen, glass hint chip,
        refined name typography
   4. Poetic phrases always exactly 2 centered lines (js fit engine
      + css centering guard).
   ================================================================ */


/* ================================================================
   3. LOVE HEART — BIGGER + MODERN
   ================================================================ */

/* Desktop / tablets / landscape — huge statement heart */
.scratch-heart-stage {
    width:  min(94vw, 92vh, 960px);
    height: min(94vw, 92vh, 960px);
}

/* Phones & small tablets in PORTRAIT — extra-long heart that
   stretches toward the bottom of the screen */
@media (orientation: portrait) and (max-width: 768px) {
    .scratch-heart-stage {
        width:  min(97vw, 94svh, 580px);
        height: min(138vw, 128svh, 780px);
    }
}

/* ---- Modern gold rim — richer multi-stop shine ---- */
.scratch-heart-wrap::before {
    background: linear-gradient(140deg,
        #f6d98e 0%, #c9943a 28%, #f7e2a4 50%,
        #c9943a 62%, #a8162a 82%, #6b0e1c 100%);
    transform: scale(1.02);
}

/* Softer modern floating shadow + warm glow */
.scratch-heart-wrap {
    filter:
        drop-shadow(0 30px 60px rgba(20, 5, 12, 0.40))
        drop-shadow(0 6px 18px rgba(20, 5, 12, 0.25))
        drop-shadow(0 0 30px rgba(240, 201, 110, 0.26));
}

/* ---- Animated glossy sheen sweeping across the heart ----
   Clipped to the heart shape so it never bleeds outside */
.scratch-heart-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 34%,
        rgba(255, 255, 255, 0.05) 44%,
        rgba(255, 246, 220, 0.17) 50%,
        rgba(255, 255, 255, 0.05) 56%,
        transparent 66%);
    background-size: 240% 240%;
    background-position: 0% 0%;
    animation: heartSheenSweep 6.5s ease-in-out infinite;
    mix-blend-mode: screen;
    clip-path: url(#heartClipPath);
    -webkit-clip-path: url(#heartClipPath);
}

@keyframes heartSheenSweep {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 100% 100%; }
}

/* ---- Modern glass hint chip ---- */
.scratch-hint .hint-icon {
    width:  clamp(58px, 16vw, 86px);
    height: clamp(58px, 16vw, 86px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.5rem, 5.5vw, 2.1rem);
    margin: 0 auto 12px;
    background: rgba(255, 248, 231, 0.12);
    border: 1px solid rgba(240, 201, 110, 0.50);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.scratch-hint .hint-text {
    font-size: clamp(0.9rem, 3.4vw, 1.15rem);
    letter-spacing: 0.3em;
}

/* ---- Refined names on the revealed photo ---- */
.scratch-reveal-names {
    bottom: 30%;
    width: 82%;
    background: linear-gradient(180deg,
        rgba(20, 5, 12, 0) 0%,
        rgba(20, 5, 12, 0.58) 50%,
        rgba(20, 5, 12, 0) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 16px;
}

.scratch-reveal-names .reveal-groom,
.scratch-reveal-names .reveal-bride {
    font-size: clamp(1.2rem, 4.8vw, 1.75rem);
    letter-spacing: 0.07em;
}

.scratch-reveal-names .reveal-weds {
    font-size: clamp(0.6rem, 2.4vw, 0.85rem);
    letter-spacing: 0.55em;
    color: #f0c96e;
}


/* ================================================================
   4. POETIC PHRASES — always exactly 2 centered lines
   ================================================================ */
.poetic-para-wrap {
    text-align: center;
    line-height: 2;
}

.poetic-cursor-text,
.poetic-cursor-inner {
    white-space: pre-line;   /* honour the \n as the single line break */
    word-break: normal;
    overflow-wrap: normal;
}

@media (prefers-reduced-motion: reduce) {
    .scratch-heart-wrap::after {
        animation: none !important;
    }
}