/* Geviti Project Page - Glassmorphic Styles */
/* Ported from gogeviti.vercel.app */

@property --angle-1 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -75deg;
}

@property --angle-2 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -45deg;
}

/* Geviti-specific variables */
.geviti-main {
    --card-bg: linear-gradient(135deg, rgba(213, 239, 255, 0.65), rgba(213, 239, 255, 0.4));
    --anim-time: 400ms;
    --anim-ease: cubic-bezier(0.25, 1, 0.5, 1);
    --gap-size: 20px;
    --border-width: 1.5px;

    background-color: var(--color-background);
    padding: calc(var(--grid-inset) * 2) var(--grid-inset) var(--grid-inset) var(--grid-inset);
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;

    /* Ensure content doesn't get constrained */
    min-height: auto;
    height: auto;
    overflow: visible;
}

/* Hide left/right grid lines on geviti page */
body:has(.geviti-main) .grid-line--left,
body:has(.geviti-main) .grid-line--right {
    display: none;
}

/* Ensure proper scrolling on geviti page */
html:has(.geviti-main) {
    overflow-y: scroll;
    overflow-x: hidden;
}

body:has(.geviti-main) {
    overflow: visible !important;
    height: auto;
}

body:has(.geviti-main) .grid-container {
    min-height: auto;
    height: auto;
    overflow: visible;
}

/* Make author banner match header image width on geviti page */
.geviti-container .author-banner {
    margin-left: 0;
    margin-right: 0;
}

/* Dark mode card adjustments */
:root .geviti-main {
    --card-bg: linear-gradient(135deg, rgba(213, 239, 255, 0.15), rgba(213, 239, 255, 0.08));
}

[data-theme="light"] .geviti-main {
    --card-bg: linear-gradient(135deg, rgba(213, 239, 255, 0.65), rgba(213, 239, 255, 0.4));
}

.geviti-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
.geviti-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.geviti-header-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.geviti-header-byline {
    font-family: 'Inter', 'Geist Mono', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6e6e73;
    margin: 8px 0 0 0;
}

.geviti-header-title {
    font-family: 'Instrument Serif', 'Crimson Pro', serif;
    font-style: italic;
    font-size: 32px;
    font-weight: 400;
    margin: 0;
    color: #1d1d1f;
}

.geviti-header-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
}

/* Section Styles */
.geviti-section {
    width: 100%;
    margin-bottom: 40px;
}

.geviti-section-title {
    font-family: 'Instrument Serif', 'Crimson Pro', serif;
    font-style: italic;
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 20px 0;
    color: var(--color-text-primary);
}

.geviti-section-description {
    font-family: 'Inter', 'Geist Mono', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 16px auto 0 auto;
    max-width: 700px;
    text-align: center;
}

/* Grid Layout */
.glass-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-size);
    width: 100%;
}

/* Social Grid - Mobile First (single column) */
.social-grid {
    grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 600px) {
    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-receipt,
    .card-healthy,
    .card-perfected {
        grid-column: span 1;
    }
}

/* Email Grid */
.email-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-size);
}

.email-card-wrapper {
    display: flex;
    flex-direction: column;
}

.card-label {
    font-family: 'Inter', 'Geist Mono', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin: 0 0 8px 0;
    text-align: center;
}

.card-email {
    padding: 0;
    height: 500px;
    max-height: 60vh;
    overflow: visible !important;
}

.card-email-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 14px;
    padding: 10px;
    box-sizing: border-box;
}

.card-email .card-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    display: block;
    pointer-events: none;
}

/* Custom scrollbar for email cards */
.card-email-inner::-webkit-scrollbar {
    width: 8px;
}

.card-email-inner::-webkit-scrollbar-track {
    background: rgba(128, 128, 128, 0.1);
    border-radius: 4px;
}

.card-email-inner::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.5);
    border-radius: 4px;
}

.card-email-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.7);
}

/* Hide old email on mobile */
.email-card-wrapper.card-email-old {
    display: none;
}

@media (min-width: 600px) {
    .email-grid {
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
    }

    .email-card-wrapper.card-email-old {
        display: flex;
    }
}

/* Video Embed (Vimeo) */
.card-video-embed {
    padding: 10px;
}

.vimeo-wrapper {
    position: relative;
    padding-bottom: 56.67%;
    height: 0;
    overflow: hidden;
    border-radius: 14px;
}

.vimeo-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 14px;
}

/* Motion Grid */
.motion-grid {
    grid-template-columns: 1fr;
}

.card-motion {
    aspect-ratio: 4 / 5;
}

.card-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

@media (min-width: 600px) {
    .motion-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Merch Grid */
.merch-grid {
    grid-template-columns: 1fr;
}

.card-merch {
    aspect-ratio: auto;
}

.card-merch .card-image {
    height: auto;
    object-fit: contain;
}

@media (min-width: 600px) {
    .card-merch {
        aspect-ratio: 4 / 5;
    }

    .card-merch .card-image {
        height: 100%;
        object-fit: cover;
    }

    .merch-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: Custom layout - 2 top, 3 bottom */
@media (min-width: 900px) {
    .social-grid {
        grid-template-columns: repeat(24, 1fr);
    }

    .card-strikethrough {
        grid-column: span 9;
    }

    .card-unwrap {
        grid-column: span 15;
    }

    .card-receipt {
        grid-column: span 8;
    }

    .card-healthy {
        grid-column: span 8;
    }

    .card-perfected {
        grid-column: span 8;
    }
}

/* Glass Card Styles */
.glass-card {
    position: relative;
    border-radius: 24px;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow:
        inset 0 2px 2px rgba(0, 0, 0, 0.05),
        inset 0 -2px 2px rgba(255, 255, 255, 0.1),
        0 4px 2px -2px rgba(0, 0, 0, 0.2),
        0 0 2px 4px inset rgba(255, 255, 255, 0.05),
        0 4px 16px rgba(148, 213, 252, 0.3);

    transition: all var(--anim-time) var(--anim-ease);
    cursor: pointer;
    z-index: 1;

    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Light mode card shadows */
[data-theme="light"] .glass-card {
    box-shadow:
        inset 0 2px 2px rgba(0, 0, 0, 0.05),
        inset 0 -2px 2px rgba(255, 255, 255, 0.7),
        0 4px 2px -2px rgba(0, 0, 0, 0.1),
        0 0 2px 4px inset rgba(255, 255, 255, 0.2),
        0 4px 16px rgba(148, 213, 252, 0.5);
}

/* Card aspect ratios */
.card-strikethrough,
.card-receipt,
.card-healthy,
.card-perfected,
.card-unwrap {
    aspect-ratio: auto;
}

.social-grid .card-image {
    height: auto;
    object-fit: contain;
}

@media (min-width: 600px) {
    .card-strikethrough,
    .card-receipt,
    .card-healthy,
    .card-perfected {
        aspect-ratio: 4 / 5;
    }

    .card-unwrap {
        aspect-ratio: 4 / 3;
    }

    .social-grid .card-image {
        height: 100%;
        object-fit: cover;
    }
}

/* Card Images */
.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

/* Hover effects */
@media (hover: hover) {
    .glass-card:hover {
        transform: scale(1.015);
        box-shadow:
            inset 0 2px 2px rgba(0, 0, 0, 0.05),
            inset 0 -2px 2px rgba(255, 255, 255, 0.15),
            0 8px 8px -4px rgba(0, 0, 0, 0.25),
            0 0 2px 4px inset rgba(255, 255, 255, 0.1),
            0 8px 24px rgba(148, 213, 252, 0.4);
    }

    [data-theme="light"] .glass-card:hover {
        box-shadow:
            inset 0 2px 2px rgba(0, 0, 0, 0.05),
            inset 0 -2px 2px rgba(255, 255, 255, 0.7),
            0 8px 8px -4px rgba(0, 0, 0, 0.15),
            0 0 2px 4px inset rgba(255, 255, 255, 0.5),
            0 8px 24px rgba(148, 213, 252, 0.5);
    }
}

/* Moving Edge Border */
.glass-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 24px;
    padding: var(--border-width);

    background: conic-gradient(from var(--angle-1) at 50% 50%,
            #69B1DC,
            rgba(0, 0, 0, 0) 5% 40%,
            #69B1DC 50%,
            rgba(0, 0, 0, 0) 60% 95%,
            #69B1DC),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    transition: --angle-1 500ms ease;
    opacity: 0.7;
}

@media (hover: hover) {
    .glass-card:hover::after {
        --angle-1: -125deg;
        opacity: 1;
    }
}

/* Footer */
.geviti-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding: 40px 0;
}

.geviti-footer-text {
    font-family: 'Inter', 'Geist Mono', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin: 0;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .geviti-header-title {
        font-size: 24px;
    }

    .geviti-header-logo {
        height: 32px;
        width: auto;
        object-fit: contain;
    }
}