/* Safe Downloads — Frontend Styles */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Raleway:wght@300;400;500&display=swap');

/* ── Container ── */
.sd-container {
    position: relative;
    width: 100%;
    min-height: 320px;
    border-radius: 14px;
    overflow: hidden;
    font-family: 'Raleway', sans-serif;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 24px 64px rgba(0,0,0,.5);
    isolation: isolate;
}

/* ── Sky / reveal layer ── */
.sd-sky-layer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        #1a3a5c 0%,
        #2e6b9e 30%,
        #5ba3d0 60%,
        #a8d4f0 85%,
        #e8f4fd 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* ── Background image layer ── */
.sd-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity .6s ease;
}

/* ── Content text ── */
.sd-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    padding: 48px 40px;
    text-align: center;
    transform: translateY(10px);
    opacity: 0;
    transition: opacity 1.2s ease .3s, transform 1s ease .3s;
}
.sd-container.sd-revealed .sd-content {
    opacity: 1;
    transform: translateY(0);
}

/* content typography */
.sd-content h1, .sd-content h2, .sd-content h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,.4);
    line-height: 1.2;
    margin-bottom: .5em;
}
.sd-content h1 { font-size: clamp(28px, 5vw, 52px); letter-spacing: 1px; }
.sd-content h2 { font-size: clamp(22px, 4vw, 40px); }
.sd-content h3 { font-size: clamp(18px, 3vw, 28px); }
.sd-content p  {
    color: rgba(255,255,255,.92);
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.8;
    font-weight: 300;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
    margin-bottom: 1em;
}
.sd-content a {
    color: #a8d4f0;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s;
}
.sd-content a:hover { color: #fff; }
.sd-content img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.sd-content ul, .sd-content ol {
    text-align: left;
    display: inline-block;
    color: rgba(255,255,255,.88);
    font-weight: 300;
    line-height: 2;
}

/* ── Cloud veil ── */
.sd-cloud-veil {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: pointer;
    pointer-events: auto;
}

.sd-cloud-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── Veil overlay text (shown on top of clouds) ── */
.sd-veil-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    text-align: center;
    pointer-events: none;
    z-index: 12;
    width: 90%;
}
.sd-veil-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(36px, 7vw, 72px);
    font-weight: 400;
    font-style: italic;
    text-shadow:
        0 2px 12px rgba(0,0,0,.2),
        0 0 40px rgba(255,255,255,.3);
    letter-spacing: 4px;
    line-height: 1.1;
    margin-bottom: 10px;
}
.sd-veil-subtitle {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(11px, 1.8vw, 15px);
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,.2);
}

/* Fade veil text out as clouds dispel */
.sd-container.sd-revealing .sd-veil-text {
    opacity: 0;
    transition: opacity .6s ease;
}
.sd-container.sd-revealed .sd-veil-text {
    display: none;
}

/* ── Hint text ── */
.sd-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 30px;
    padding: 8px 20px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(0,0,0,.85) !important;
    pointer-events: none;
    animation: sd-float 3s ease-in-out infinite;
    white-space: nowrap;
    z-index: 11;
    transition: opacity .4s ease;
}
.sd-hint-icon {
    font-size: 18px;
    animation: sd-bob 2s ease-in-out infinite;
}

/* ── Hint fade on click ── */
.sd-container.sd-revealing .sd-hint {
    opacity: 0;
    pointer-events: none;
}

/* ── Fully revealed: remove veil ── */
.sd-container.sd-revealed .sd-cloud-veil {
    pointer-events: none;
}

/* ── Animations ── */
@keyframes sd-float {
    0%   { transform: translateX(-50%) translateY(0); }
    50%  { transform: translateX(-50%) translateY(-6px); }
    100% { transform: translateX(-50%) translateY(0); }
}
@keyframes sd-bob {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* ── Ripple on click ── */
.sd-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 70%);
    transform: scale(0);
    animation: sd-ripple-anim .8s ease-out forwards;
    pointer-events: none;
    z-index: 12;
}
@keyframes sd-ripple-anim {
    to { transform: scale(4); opacity: 0; }
}