/* =============================================================
   FILE: Server/CSS/Public-Showcase-Desktop.css
   PURPOSE: Desktop 16:9 animated showcase stylesheet for
            /Public/index.php. Designed for screen-recording into
            Canva social video content. Warm bright palette.
            Single viewport, no scroll. One-shot animation that
            holds the final CTA frame.

   LOADED BY:
     - /Public/index.php

   DEPENDS ON:
     - /Server/JavaScript/Public-Showcase-Animation.js (particle canvas)

   NOTES:
     - Public theme system intentionally bypassed per task brief.
     - Pure CSS3 keyframes, no third-party libraries.
     - animation-fill-mode: forwards locks final state.
   ============================================================= */

:root {
    --pf-warm-1: #FF3D6E;
    --pf-warm-2: #FF8A3D;
    --pf-warm-3: #FFD23F;
    --pf-warm-4: #FFF1A6;
    --pf-accent: #00E0FF;
    --pf-ink:    #1A0B2E;
    --pf-ink-soft: #3A1A5C;
    --pf-white: #FFFDF6;

    --pf-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --pf-ease-snap:   cubic-bezier(0.2, 0.85, 0.3, 1.15);
    --pf-ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);

    --pf-shadow-card:
        0 1px 0 rgba(26, 11, 46, 0.06),
        0 6px 14px rgba(255, 61, 110, 0.14),
        0 22px 42px rgba(255, 138, 61, 0.18),
        0 48px 90px rgba(26, 11, 46, 0.22);

    --pf-shadow-glow:
        0 0 0 1px rgba(255, 253, 246, 0.35) inset,
        0 10px 30px rgba(255, 61, 110, 0.45),
        0 24px 60px rgba(255, 210, 63, 0.35);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: var(--pf-ink);
    background:
        radial-gradient(1200px 800px at 12% 14%, rgba(255, 210, 63, 0.55), transparent 60%),
        radial-gradient(1000px 700px at 88% 18%, rgba(255, 61, 110, 0.55), transparent 62%),
        radial-gradient(1400px 900px at 50% 110%, rgba(255, 138, 61, 0.6), transparent 60%),
        linear-gradient(135deg, #FFE7A3 0%, #FFB27A 35%, #FF8BA8 70%, #FFD98E 100%);
    background-size: 140% 140%, 150% 150%, 160% 160%, 200% 200%;
    animation: pf-bg-drift 14s ease-in-out infinite alternate;
}

@keyframes pf-bg-drift {
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
    100% { background-position: 10% 20%, 90% 10%, 55% 95%, 100% 50%; }
}

/* ---------- Stage (full viewport frame) ---------- */
.pf-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

.pf-stage::before {
    content: "";
    position: absolute;
    inset: -8%;
    background:
        radial-gradient(600px 400px at 20% 30%, rgba(255, 253, 246, 0.45), transparent 60%),
        radial-gradient(500px 360px at 80% 70%, rgba(0, 224, 255, 0.22), transparent 62%);
    filter: blur(10px);
    z-index: 0;
    pointer-events: none;
    animation: pf-stage-glow 9s ease-in-out infinite alternate;
}

@keyframes pf-stage-glow {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; }
    100% { transform: translate3d(2%, -1%, 0) scale(1.04); opacity: 1; }
}

#pf-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    animation: pf-fade-in 700ms var(--pf-ease-smooth) 150ms forwards;
}

@keyframes pf-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Top bar: logo + brand ---------- */
.pf-brand {
    position: absolute;
    top: clamp(18px, 3vh, 40px);
    left: clamp(24px, 3vw, 56px);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 6;
    opacity: 0;
    transform: translateY(-28px) scale(0.94);
    animation: pf-brand-in 900ms var(--pf-ease-pop) 200ms forwards;
}

@keyframes pf-brand-in {
    0%   { opacity: 0; transform: translateY(-28px) scale(0.94); }
    60%  { opacity: 1; transform: translateY(4px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.pf-brand-logo {
    width: clamp(52px, 6vw, 80px);
    height: clamp(52px, 6vw, 80px);
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    background: linear-gradient(135deg, var(--pf-warm-3), var(--pf-warm-1));
    padding: 6px;
    box-shadow: var(--pf-shadow-glow);
}

.pf-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    background: var(--pf-white);
    padding: 6px;
}

.pf-brand-word {
    font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    font-size: clamp(22px, 2.2vw, 34px);
    color: var(--pf-ink);
    letter-spacing: -0.01em;
    line-height: 1;
}

.pf-brand-word span {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.45em;
    color: var(--pf-ink-soft);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ---------- Top-right burst badge ---------- */
.pf-burst {
    position: absolute;
    top: clamp(22px, 4vh, 46px);
    right: clamp(24px, 3vw, 56px);
    z-index: 6;
    padding: 12px 22px;
    border-radius: 55% 45% 52% 48% / 50% 52% 48% 50%;
    background: linear-gradient(120deg, var(--pf-warm-1), var(--pf-warm-2));
    color: var(--pf-white);
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(14px, 1.2vw, 18px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: var(--pf-shadow-glow);
    opacity: 0;
    transform: scale(0.4) rotate(-18deg);
    animation: pf-burst-in 800ms var(--pf-ease-pop) 350ms forwards,
               pf-burst-wobble 3.2s ease-in-out 1.3s infinite;
}

@keyframes pf-burst-in {
    0%   { opacity: 0; transform: scale(0.4) rotate(-18deg); }
    70%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
    100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

@keyframes pf-burst-wobble {
    0%, 100% { transform: scale(1) rotate(-4deg); }
    50%      { transform: scale(1.06) rotate(2deg); }
}

/* ---------- Hero block ---------- */
.pf-hero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: min(62vw, 920px);
    text-align: center;
    pointer-events: none;
}

.pf-hero-title {
    font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    font-size: clamp(44px, 5.2vw, 92px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--pf-ink);
    text-shadow:
        0 1px 0 rgba(255, 253, 246, 0.55),
        0 14px 36px rgba(26, 11, 46, 0.18);
    opacity: 0;
    transform: translateY(28px);
    animation: pf-hero-in 1100ms var(--pf-ease-smooth) 1200ms forwards;
}

.pf-hero-title b {
    font-weight: 400;
    background: linear-gradient(95deg, var(--pf-warm-1) 0%, var(--pf-warm-2) 48%, var(--pf-warm-3) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    background-size: 220% 100%;
    animation: pf-shine 4.5s linear 1.8s infinite;
}

.pf-hero-sub {
    margin-top: 18px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(16px, 1.6vw, 24px);
    color: var(--pf-ink-soft);
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(18px);
    animation: pf-hero-in 900ms var(--pf-ease-smooth) 1650ms forwards;
}

@keyframes pf-hero-in {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pf-shine {
    0%   { background-position: 220% 50%; }
    100% { background-position: -20% 50%; }
}

/* ---------- Feature cards (four corners) ---------- */
.pf-card {
    position: absolute;
    z-index: 5;
    width: clamp(220px, 19vw, 300px);
    padding: 18px 20px;
    border-radius: 26px 22px 30px 20px / 22px 30px 20px 28px;
    background: linear-gradient(160deg, rgba(255, 253, 246, 0.96), rgba(255, 253, 246, 0.88));
    color: var(--pf-ink);
    box-shadow: var(--pf-shadow-card);
    backdrop-filter: blur(6px);
    opacity: 0;
    will-change: transform, opacity;
}

.pf-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(120deg, var(--pf-warm-1), var(--pf-warm-3), var(--pf-accent), var(--pf-warm-2));
    background-size: 300% 300%;
    z-index: -1;
    filter: blur(1px);
    animation: pf-card-border 6s ease infinite;
}

.pf-card::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255, 253, 246, 0.98), rgba(255, 241, 166, 0.72));
    z-index: -1;
}

@keyframes pf-card-border {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.pf-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 60% 40% 50% 50% / 50% 55% 45% 50%;
    background: linear-gradient(135deg, var(--pf-warm-3), var(--pf-warm-1));
    color: var(--pf-white);
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(255, 61, 110, 0.35);
}

.pf-card-title {
    font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    font-size: clamp(18px, 1.55vw, 24px);
    line-height: 1.1;
    margin-bottom: 6px;
}

.pf-card-desc {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(13px, 1vw, 15px);
    font-style: italic;
    color: var(--pf-ink-soft);
    line-height: 1.35;
}

/* Card positions + entry animations */
.pf-card-tl {
    top: 20%;
    left: clamp(24px, 3.5vw, 70px);
    transform: translate(-50px, 30px) rotate(-6deg) scale(0.85);
    animation: pf-card-in-tl 900ms var(--pf-ease-pop) 2600ms forwards,
               pf-card-hover 7s ease-in-out 3800ms infinite alternate;
}

.pf-card-tr {
    top: 20%;
    right: clamp(24px, 3.5vw, 70px);
    transform: translate(50px, 30px) rotate(6deg) scale(0.85);
    animation: pf-card-in-tr 900ms var(--pf-ease-pop) 2900ms forwards,
               pf-card-hover 8s ease-in-out 4100ms infinite alternate;
}

.pf-card-bl {
    bottom: 22%;
    left: clamp(24px, 3.5vw, 70px);
    transform: translate(-50px, -30px) rotate(5deg) scale(0.85);
    animation: pf-card-in-bl 900ms var(--pf-ease-pop) 3200ms forwards,
               pf-card-hover 7.5s ease-in-out 4400ms infinite alternate;
}

.pf-card-br {
    bottom: 22%;
    right: clamp(24px, 3.5vw, 70px);
    transform: translate(50px, -30px) rotate(-5deg) scale(0.85);
    animation: pf-card-in-br 900ms var(--pf-ease-pop) 3500ms forwards,
               pf-card-hover 8.5s ease-in-out 4700ms infinite alternate;
}

@keyframes pf-card-in-tl {
    0%   { opacity: 0; transform: translate(-50px, 30px) rotate(-6deg) scale(0.85); }
    70%  { opacity: 1; transform: translate(6px, -6px) rotate(-1deg) scale(1.04); }
    100% { opacity: 1; transform: translate(0, 0) rotate(-3deg) scale(1); }
}

@keyframes pf-card-in-tr {
    0%   { opacity: 0; transform: translate(50px, 30px) rotate(6deg) scale(0.85); }
    70%  { opacity: 1; transform: translate(-6px, -6px) rotate(1deg) scale(1.04); }
    100% { opacity: 1; transform: translate(0, 0) rotate(3deg) scale(1); }
}

@keyframes pf-card-in-bl {
    0%   { opacity: 0; transform: translate(-50px, -30px) rotate(5deg) scale(0.85); }
    70%  { opacity: 1; transform: translate(6px, 6px) rotate(0deg) scale(1.04); }
    100% { opacity: 1; transform: translate(0, 0) rotate(2deg) scale(1); }
}

@keyframes pf-card-in-br {
    0%   { opacity: 0; transform: translate(50px, -30px) rotate(-5deg) scale(0.85); }
    70%  { opacity: 1; transform: translate(-6px, 6px) rotate(0deg) scale(1.04); }
    100% { opacity: 1; transform: translate(0, 0) rotate(-2deg) scale(1); }
}

@keyframes pf-card-hover {
    0%   { translate: 0 0; }
    50%  { translate: 0 -6px; }
    100% { translate: 0 0; }
}

/* ---------- CTA bar (pinned bottom) ---------- */
.pf-cta {
    position: absolute;
    left: 50%;
    bottom: clamp(22px, 4vh, 52px);
    transform: translateX(-50%) translateY(32px);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: pf-cta-in 1100ms var(--pf-ease-pop) 7200ms forwards;
}

@keyframes pf-cta-in {
    0%   { opacity: 0; transform: translateX(-50%) translateY(32px) scale(0.9); }
    65%  { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.04); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.pf-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 42px;
    border-radius: 54px 46px 50px 50px / 48px 52px 48px 52px;
    background: linear-gradient(120deg, var(--pf-warm-1) 0%, var(--pf-warm-2) 50%, var(--pf-warm-3) 100%);
    background-size: 220% 220%;
    color: var(--pf-white);
    font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    font-size: clamp(22px, 2.2vw, 34px);
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: var(--pf-shadow-glow);
    animation: pf-cta-shine 6s ease infinite;
    isolation: isolate;
}

.pf-cta-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at top, rgba(255, 253, 246, 0.35), transparent 60%);
    pointer-events: none;
}

.pf-cta-button::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: inherit;
    border: 2px solid rgba(255, 253, 246, 0.7);
    opacity: 0;
    animation: pf-cta-ring 2.6s ease-out 7600ms infinite;
    pointer-events: none;
}

@keyframes pf-cta-shine {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@keyframes pf-cta-ring {
    0%   { opacity: 0.75; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.12); }
}

.pf-cta-arrow {
    display: inline-block;
    font-size: 0.95em;
    transform: translateX(0);
    animation: pf-arrow-bob 1.4s ease-in-out 7800ms infinite;
}

@keyframes pf-arrow-bob {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(8px); }
}

.pf-cta-support {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(13px, 1.1vw, 17px);
    color: var(--pf-ink);
    background: rgba(255, 253, 246, 0.78);
    padding: 6px 16px;
    border-radius: 22px 26px 24px 22px / 24px 22px 24px 26px;
    box-shadow: 0 6px 14px rgba(26, 11, 46, 0.12);
}

.pf-cta-support strong {
    font-weight: 700;
    color: var(--pf-warm-1);
    letter-spacing: 0.02em;
    font-style: normal;
    margin-left: 6px;
}

/* ---------- Corner flourishes ---------- */
.pf-corner {
    position: absolute;
    width: clamp(140px, 14vw, 220px);
    height: clamp(140px, 14vw, 220px);
    border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
    filter: blur(14px);
    opacity: 0.55;
    z-index: 2;
    pointer-events: none;
    animation: pf-corner-pulse 7s ease-in-out infinite alternate;
}

.pf-corner-a {
    top: -6%;
    left: -4%;
    background: radial-gradient(circle at 30% 30%, var(--pf-warm-3), transparent 70%);
}

.pf-corner-b {
    top: -8%;
    right: -6%;
    background: radial-gradient(circle at 70% 30%, var(--pf-warm-1), transparent 70%);
    animation-delay: 1.2s;
}

.pf-corner-c {
    bottom: -10%;
    left: 30%;
    background: radial-gradient(circle at 50% 70%, var(--pf-accent), transparent 70%);
    opacity: 0.35;
    animation-delay: 2.4s;
}

@keyframes pf-corner-pulse {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(2%, 1%); }
}

/* ---------- Footer micro-line ---------- */
.pf-foot {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    z-index: 6;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(11px, 0.9vw, 13px);
    color: rgba(26, 11, 46, 0.65);
    letter-spacing: 0.04em;
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .pf-card { opacity: 1; transform: none !important; }
    .pf-cta { opacity: 1; transform: translateX(-50%) !important; }
    .pf-hero-title, .pf-hero-sub { opacity: 1; transform: none; }
    .pf-brand, .pf-burst { opacity: 1; transform: none; }
}