/* Wedding Website Custom Styles */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;1,300;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=IM+Fell+English:ital@0;1&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:wght@400;700&family=Great+Vibes&family=Lavishly+Yours&family=Lato:wght@300;400;700&family=Caveat:wght@400;600;700&display=swap');

/* CSS Variables - Color Palette */
:root {
    --font-script: 'Great Vibes', cursive;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --font-whimsical: 'Lavishly Yours', cursive;
    --font-sc: 'Playfair Display SC', serif;
    --font-date: 'Cormorant', serif;
    --font-manuscript-heading: 'IM Fell English', serif;
    --font-manuscript-body: 'Cormorant Garamond', serif;
    --color-warm-charcoal: #3d3530;

    /* Manuscript ink tones */
    --color-ink-dark: #2c1a0e;
    --color-ink-medium: #3b2a1a;
    --color-ink-light: #5a4535;

    --color-sage: #b5c4b1;
    --color-gold: #d4b896;
    --color-cream: #faf5f0;
    --color-forest: #3D5941;
    --color-text-dark: #3d3530;
    --color-text-light: #FFFFFF;
    --color-accent: #c9b8a8;

    /* Pastel palette */
    --color-rose: #e8c4bc;
    --color-lavender: #d4cce8;
    --color-blush-bg: rgba(232, 196, 188, 0.08);
    --color-mint-bg: rgba(181, 196, 177, 0.08);
    --color-dusty-rose: #c4928a;

    /* Envelope palette */
    --env-body-light: #f5e4ec;
    --env-body-mid: #f0d8e4;
    --env-body-dark: #e8ccd6;
    --env-flap-dark: #ccaab8;
    --env-flap-mid: #d8b8c8;
    --env-flap-light: #e6cdd8;
    --env-seal-gold: #d4a030;
    --env-seal-highlight: #e8c050;
    --env-seal-shadow: #a67a1f;
    --env-text-warm: #3B2F2A;
    --env-paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
    --env-paper-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3 0.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.04'/%3E%3C/svg%3E");
    --env-flap-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='fg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23fg)' opacity='0.07'/%3E%3C/svg%3E");

    /* Book / Storybook palette */
    --book-cover-leather: #48527a;
    --book-cover-dark: #292a47;
    --book-gold-leaf: #D4AF37;
    --book-gold-detail: #C9A86A;
    --book-page-cream: #faf5f0;
    --book-page-turn-duration: 1.4s;
    --book-perspective: clamp(1200px, 160vw, 3000px);

    /* Page-turn physics */
    --book-turn-stiffness: 4;
    --book-turn-flex: 0.9;
    --book-turn-overshoot: 4;
    --book-turn-settle-flutter: 0.3;
    --book-turn-easing: cubic-bezier(0.22, 0.68, 0.18, 1);

    /* Page-turn cascade / multi-page */
    --book-turn-stagger-base: 160;
    --book-turn-stagger-min: 120;
    --book-turn-stagger-max: 280;
    --book-turn-fan-offset: 2;
    --book-turn-fan-spread: 2;

    /* Page-turn visual effects */
    --book-turn-mote-count: 8;
    --book-turn-mote-opacity: 0.9;
    --book-turn-mote-travel: 140;
    --book-turn-mote-color: rgba(212, 175, 55, 0.9);
    --book-turn-spine-glow-intensity: 0.35;
    --book-turn-spine-glow-color: rgba(212, 175, 55, 0.35);
    --book-turn-curl-shadow-max: 0.35;
    --book-turn-edge-thickness: 4;

    /* Page-turn drag interaction */
    --book-turn-drag-threshold: 0.3;
    --book-turn-drag-release: 300;

    /* Viewport-responsive book scaling properties */
    --book-spine-width: clamp(40px, 5vw, 100px);
    --book-spine-offset: clamp(-20px, -2.5vw, -50px);
    --book-spine-blur: clamp(6px, 1vw, 16px);
    --book-light-width: clamp(35px, 4.5vw, 90px);
    --book-light-offset: clamp(-15px, -2vw, -40px);
    --book-light-blur: clamp(8px, 1.5vw, 24px);
    --book-edge-width-base: clamp(2px, 0.3vw, 5px);
    --book-vignette-blur: clamp(60px, 10vw, 200px);
    --book-vignette-spread: clamp(30px, 5vw, 100px);
    --book-highlight-width: clamp(120px, 16vw, 350px);
    --book-ambient-edge: clamp(30px, 4vw, 80px);
    --book-mote-sm: clamp(2px, 0.25vw, 5px);
    --book-mote-md: clamp(3px, 0.35vw, 7px);
    --book-mote-lg: clamp(4px, 0.5vw, 9px);
    --book-corner-zone: clamp(50px, 6vw, 110px);
    --book-corner-default: clamp(12px, 1.5vw, 24px);
    --book-corner-hover: clamp(40px, 5vw, 85px);
    --book-corner-active: clamp(60px, 7.5vw, 130px);
    --book-nav-size: clamp(40px, 4vw, 72px);
    --book-nav-icon: clamp(16px, 1.8vw, 30px);
    --book-nav-offset: clamp(12px, 2vw, 40px);

    /* Book frame constraints (desk scene) */
    --book-page-ratio: 3 / 4;
    --book-frame-max-w: 950px;
    --book-frame-max-h: 1267px;
    --book-desk-blur: 4px;
    --book-frame-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 2px 12px rgba(0,0,0,0.18);

    /* 3D Spine element */
    --book-spine-3d-width: clamp(12px, 1.5vw, 24px);

    /* 3D Page Edge Geometry */
    --book-edge-3d-thickness: clamp(2px, 0.25vw, 5px);
    --book-edge-3d-gap: clamp(1px, 0.15vw, 3px);

    /* Page V-shape curvature — unturned pages bow slightly away from spine */
    --book-page-rest-angle: 2deg;

    /* Hard cover overhang — how far the cover boards extend beyond the page block.
       Larger values make the leather border more visible in both closed and open states. */
    --book-cover-overhang: clamp(26px, 3.5vw, 50px);
    --book-stack-depth-per-page: clamp(0.5px, 0.1vw, 2px);

    /* Closed book 3D appearance */
    --book-closed-rotate-x: 10deg;
    --book-closed-rotate-y: 18deg;
    --book-closed-rotate-z: 0deg;
    --book-closed-perspective: 900px;
    --book-closed-spine-width: clamp(24px, 3.5vw, 48px);
    --book-closed-page-depth: clamp(50px, 8vw, 120px);
    --book-closed-hover-lift: -10px;
    --book-closed-open-duration: 1.4s;
    --book-3d-layer-total: 13; /* BookDepthLayers + 1 for spacing */

    /* Open book 3D appearance — subtle tilt maintains physical 3D presence
       in reading state. Like gazing down at an open book on a desk.
       Higher perspective distance = less foreshortening = less content clipping. */
    --book-open-rotate-x: 4deg;
    --book-open-rotate-y: 0deg;
    --book-open-rotate-z: 0deg;
    --book-open-perspective: 2400px;
    --book-open-page-depth: calc(var(--book-closed-page-depth) * 0.4);
    /* Open-state spine: wider and dramatically more curved to create a visible
       rounded hump connecting left and right halves — like a real book binding.
       Closed-state curvature (20deg) is too subtle when the spine is perpendicular.
       At 130deg, the 5 barrel strips fan out so outer strips face nearly forward,
       making the spine visible as a rounded ridge from the reader's perspective. */
    --book-open-spine-width: calc(var(--book-spine-thickness) * 1.3);
    --book-open-spine-curvature: 130deg;
    /* Slight page tenting — pages angle up from the spine like a real open book */
    --book-open-page-tent: 3deg;
    /* Extra backward push on page layers to compensate for the tenting angle's
       forward Z-projection at the left edge: sin(tent) × halfWidth ≈ 10px.
       Scales with book geometry so it works across all viewport sizes. */
    --book-page-tent-clearance: calc(var(--book-open-page-depth) * 0.38);

    /* Closed book hover offsets (added to resting rotation) */
    --book-closed-hover-rx-offset: -3deg;
    --book-closed-hover-ry-offset: 3deg;
    --book-closed-hover-rz-offset: 0deg;
    --book-closed-hover-tz: 20px;

    /* Front cover overhang — matches --book-cover-overhang so the cover page's
       leather edge is the same size as the hardcover border. This overhang
       rotates WITH the cover during the swing animation, creating a physically
       attached leather edge that moves naturally as the book opens. */
    --book-cover-overhang-top: var(--book-cover-overhang);
    --book-cover-overhang-right: var(--book-cover-overhang);
    --book-cover-overhang-bottom: var(--book-cover-overhang);

    /* Back cover insets — how far the back cover peeks behind the page block.
       These make the leather border perceptible around the open spread. */
    --book-back-inset-top: 2px;
    --book-back-inset-left: 2px;
    --book-back-inset-right: 4px;
    --book-back-inset-bottom: 2px;

    /* 3D Spine overhang — matches cover overhang so spine extends to cover corners */
    --book-spine-overhang-top: var(--book-cover-overhang-top);
    --book-spine-overhang-bottom: var(--book-cover-overhang-bottom);

    /* Page bundle insets — how far pages are recessed from the covers */
    --book-page-inset-top: 2px;
    --book-page-inset-right: 2px;
    --book-page-inset-bottom: 2px;

    /* Page appearance — alternating colors for page layers and edges */
    --book-page-color-1: #f5f0e6;
    --book-page-color-2: #ece5d8;
    --book-edge-line-width: 1.5px;
    --book-edge-line-gap: 1px;

    /* Spine appearance — independent thickness and detailing */
    --book-spine-thickness: var(--book-closed-page-depth);
    --book-spine-offset-x: 0px;
    --book-spine-offset-y: 0px;
    --book-spine-band-width: 4px;
    --book-spine-band-opacity: 0.8;
    --book-spine-ridge-spacing: 18px;
    --book-spine-ridge-opacity: 0.20;
    --book-spine-highlight: 85%;
    --book-spine-curvature: 30deg;

    /* Cover appearance — leather texture and decoration */
    --book-cover-grain-opacity: 0.15;
    --book-cover-vignette-intensity: 0.15;
    --book-cover-gold-opacity: 0.35;
    --book-cover-board-thickness: clamp(6px, 1vw, 12px);

    /* WebGL page-curl shader (Phase 3) */
    --book-curl-enabled: 1;               /* 0 = disabled, falls back to CSS animation */
    --book-curl-radius: 0.15;             /* cylinder radius as fraction of page width */
    --book-curl-shadow-intensity: 0.35;   /* fold shadow darkness (0-1) */
    --book-curl-highlight-intensity: 0.5; /* specular highlight on curl (0-1) */

    /* Per-part extra transforms (BookPartPropertyPanel) — all default to identity */
    --book-spine-extra-tx: 0px;
    --book-spine-extra-ty: 0px;
    --book-spine-extra-tz: 0px;
    --book-spine-extra-rx: 0deg;
    --book-spine-extra-ry: 0deg;
    --book-spine-extra-rz: 0deg;

    --book-front-cover-extra-tx: 0px;
    --book-front-cover-extra-ty: 0px;
    --book-front-cover-extra-tz: 0px;
    --book-front-cover-extra-rx: 0deg;
    --book-front-cover-extra-ry: 0deg;
    --book-front-cover-extra-rz: 0deg;

    --book-back-cover-extra-tx: 0px;
    --book-back-cover-extra-ty: 0px;
    --book-back-cover-extra-tz: 0px;
    --book-back-cover-extra-rx: 0deg;
    --book-back-cover-extra-ry: 0deg;
    --book-back-cover-extra-rz: 0deg;

    --book-pages-extra-tx: 0px;
    --book-pages-extra-ty: 0px;
    --book-pages-extra-tz: 0px;
    --book-pages-extra-rx: 0deg;
    --book-pages-extra-ry: 0deg;
    --book-pages-extra-rz: 0deg;

    --book-edge-right-extra-tx: 0px;
    --book-edge-right-extra-ty: 0px;
    --book-edge-right-extra-tz: 0px;
    --book-edge-right-extra-rx: 0deg;
    --book-edge-right-extra-ry: 0deg;
    --book-edge-right-extra-rz: 0deg;

    --book-edge-top-extra-tx: 0px;
    --book-edge-top-extra-ty: 0px;
    --book-edge-top-extra-tz: 0px;
    --book-edge-top-extra-rx: 0deg;
    --book-edge-top-extra-ry: 0deg;
    --book-edge-top-extra-rz: 0deg;

    --book-edge-bottom-extra-tx: 0px;
    --book-edge-bottom-extra-ty: 0px;
    --book-edge-bottom-extra-tz: 0px;
    --book-edge-bottom-extra-rx: 0deg;
    --book-edge-bottom-extra-ry: 0deg;
    --book-edge-bottom-extra-rz: 0deg;

    /* ── Table Scene (book lying flat on desk) ── */
    --book-table-rotate-x: 73deg;
    --book-table-rotate-y: 0deg;
    --book-table-rotate-z: 0deg;
    --book-table-scale: 0.7;
    --book-table-translate-x: 0%;
    --book-table-translate-y: 5%;
    --book-table-translate-z: -425px;
    --book-table-perspective: 1200px;
    --book-table-hover-lift: 30px;

    --book-table-shadow-offset-x: 28px;
    --book-table-shadow-offset-y: 44px;
    --book-table-shadow-blur: 16px;
    --book-table-shadow-spread: 20px;
    --book-table-shadow-color: rgba(0, 0, 0, 0.45);
    --book-table-shadow-opacity: 1;

    --book-table-glow-color: rgba(212, 175, 55, 0.0);
    --book-table-glow-spread: 0px;
    --book-table-glow-blur: 95px;
    --book-table-glow-pulse-speed: 7.1s;
    --book-table-glow-intensity: 0.6;

    --book-table-pickup-duration: 1.2s;
    --book-table-setdown-duration: 1s;

    /* ── Table Scene Rim Glow (per-surface edge lighting) ── */
    --book-table-rim-blur: 40px;
    --book-table-rim-spread: 20px;
    --book-table-rim-color: rgba(212, 175, 55, 0.35);
    --book-table-rim-hover-blur: 50px;
    --book-table-rim-hover-spread: 18px;
    --book-table-rim-hover-color: rgba(212, 175, 55, 0.55);
    --book-table-rim-pulse-speed: 2.5s;
    --book-table-rim-intensity: 1;

    /* ── Table Scene Particles ── */
    --book-table-particle-size: 1;
    --book-table-particle-opacity: 0.7;
    --book-table-particle-speed: 1;
    --book-table-particle-rise: 120px;
    --book-table-particle-spread: 12px;

    /* Corner Peel Effect */
    --book-peel-min: clamp(12px, 1.5vw, 20px);
    --book-peel-max: clamp(80px, 10vw, 150px);
    --book-peel-shadow-blur: clamp(4px, 0.6vw, 12px);
    --book-peel-lift-z: clamp(1px, 0.2vw, 4px);

    /* Sticky Note Bookmarks */
    --book-note-size: clamp(30px, 4vw, 60px);
    --book-note-protrude: clamp(12px, 1.5vw, 24px);
    --book-note-shadow: 0 1px 3px rgba(0,0,0,0.1);

    /* Ribbon Navigation */
    --ribbon-width: clamp(40px, 4vw, 52px);
    --ribbon-protrude: clamp(32px, 5vh, 55px);
    --ribbon-protrude-active: clamp(48px, 7vh, 75px);
    --ribbon-protrude-hover: clamp(42px, 6vh, 65px);
    --ribbon-fold-height: clamp(8px, 1.2vh, 14px);
    --ribbon-tail-height: clamp(4px, 0.6vh, 8px);
    --ribbon-gap: clamp(6px, 1vw, 14px);

    /* 3D Ribbon Geometry — physical depth for true 3D ribbons */
    --ribbon-3d-thickness: 2px;
    --ribbon-3d-protrude-closed: clamp(20px, 3vh, 40px);
    --ribbon-3d-emerge-depth: 4px;

    /* Theme Toggle — Celestial body (desk scene sun/moon) */
    --celestial-size: clamp(36px, 5vw, 56px);
    --celestial-glow-size: clamp(60px, 8vw, 100px);

    /* Theme Toggle — Ribbon bookmark (bottom-protruding) */
    --theme-ribbon-width: clamp(26px, 3.5vw, 42px);
    --theme-ribbon-protrude: clamp(36px, 5vh, 60px);
    --theme-ribbon-tail-height: clamp(8px, 1.2vh, 14px);

    /* Notebook RSVP system */
    --notebook-line-height: 26px;
    --notebook-line-color: rgba(160, 150, 130, 0.3);
    --notebook-top-margin: 20px;
    --ink-color: #1a1a2e;
    --ink-color-sepia: #2c1a0e;
    --ink-color-faded: rgba(26, 26, 46, 0.7);
    --font-handwriting: 'Caveat', cursive;
}

/* Blazor Error UI — hidden by default */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #b32121;
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
}

/* Global Styles */
html, body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Skip to content link (accessibility) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-forest);
    color: var(--color-text-light);
    padding: 0.5rem 1rem;
    z-index: 10000;
    transition: top 0.2s ease;
    text-decoration: none;
    font-family: var(--font-body);
}

.skip-link:focus {
    top: 0;
}

/* Fieldset reset for accessible radio groups */
fieldset.rsvp-form-group {
    border: none;
    padding: 0;
    margin: 0;
}

fieldset.rsvp-form-group legend.rsvp-label {
    float: none;
    width: 100%;
}