/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
#can {
    height: 100%;
    width: 100%;
}

a,
a:visited {
    color: black;
}

#apple-lockup {
    transition: opacity 0.25s ease-in-out;
}
@media only screen and (max-width: 600px) {
    #apple-lockup {
        opacity: 0;
    }
}

.app-store-button-wrapper {
    padding: var(--spacing-sm);
    position: fixed;
    top: 27.5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.app-store-button-wrapper > * {
    pointer-events: auto;
}

#bubcan {
    pointer-events: none;
}

@media only screen and (max-width: 600px) {
    .app-store-button-wrapper {
        width: 99lvw;
    }
}

/* CSS Custom Properties */
:root {
    /* Light theme colors in LAB */
    --color-bg: lab(95% 0 -2); /* #f7f6ee converted to LAB */
    --color-text: lab(0% 0 0); /* Pure black */
    --color-accent: lab(65% 25 70); /* #e59a03 converted to LAB */
    --color-selection: lab(65% 25 70 / 0.33); /* Accent color with alpha */

    /* Base theme properties */
    --font-family:
        "SF Pro Rounded", ui-rounded, -apple-system, system-ui,
        BlinkMacSystemFont, "Arial", sans-serif;
    --base-font-size: 1.11rem;
    --line-height: 1.8;
    --transition-bezier: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Light mode - keep black */
    --icon-invert: 0; /* 0% inversion for light mode (black icons) */

    /* Common values as variables for performance and maintainability */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.66rem;
    --spacing-base: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 5rem;

    /* Opacity values */
    --opacity-subtle: 0.22;
    --opacity-medium: 0.44;
    --opacity-hover: 0.5;
    --opacity-strong: 0.8;

    /* Border radius values */
    --radius-sm: 0.77rem;
    --radius-lg: 2rem;

    /* Animation durations */
    --duration-fast: 0.2s;
    --duration-medium: 0.3s;
    --duration-slow: 2.22s;
    --duration-very-slow: 5.55s;

    /* Blur values */
    --blur-heavy: 44px;
    --blur-object: 33px;

    /* Z-index layers */
    --z-below: -1;
    --z-overlay: 999;
    --z-top: 1000;

    /* Common dimensions */
    --icon-size: 54px;
    --icon-small: 16px;
    --object-size: 222px;

    /* Content widths */
    --content-width: 38rem;
    --text-width: 65ch;

    /* Box shadows for glass-morphism */
    --shadow-button:
        0 4px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        inset 0 -1px 2px rgba(0, 0, 0, 0.05);
    --shadow-button-hover:
        0 6px 24px rgba(0, 0, 0, 0.12),
        inset 0 1px 3px rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(0, 0, 0, 0.06);
    --shadow-button-active:
        0 2px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -1px 3px rgba(0, 0, 0, 0.1);
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: lab(10% 1 0); /* #1a1818 converted to LAB */
        --color-text: lab(95% 0 -2); /* Light text color */
        --color-accent: lab(95% 0 -2); /* Same as text for dark mode */
        --color-selection: lab(100% 0 0 / 0.2); /* White with alpha */

        /* Dark mode - invert to white */
        --icon-invert: 1; /* 100% inversion for dark mode (white icons) */

        /* Dark mode box shadows */
        --shadow-button:
            0 4px 20px rgba(0, 0, 0, 0.3),
            inset 0 1px 2px rgba(255, 255, 255, 0.2),
            inset 0 -1px 2px rgba(0, 0, 0, 0.3);
        --shadow-button-hover:
            0 6px 24px rgba(0, 0, 0, 0.4),
            inset 0 1px 3px rgba(255, 255, 255, 0.25),
            inset 0 -1px 2px rgba(0, 0, 0, 0.3);
        --shadow-button-active:
            0 2px 12px rgba(0, 0, 0, 0.3),
            inset 0 1px 1px rgba(255, 255, 255, 0.15),
            inset 0 -1px 3px rgba(0, 0, 0, 0.4);
    }
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Root Element Styles */
html {
    font-size: var(--base-font-size);
    line-height: var(--line-height);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    letter-spacing: -0.011em;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth; /* Performance: GPU-accelerated smooth scrolling */
}

::selection {
    background-color: var(--color-selection);
    color: var(--color-text);
}

/* Layout & Container Elements */
body {
    height: 100dvh;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    contain: layout style; /* Performance: isolate layout calculations */
}

/* Styles for content-heavy pages like privacy and terms */
body.content-page {
    height: auto;
    min-height: 100dvh;
    justify-content: flex-start;
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-2xl);
    overflow-y: auto;
}

article {
    align-items: flex-start;
}

.cap {
    color: white;
    font-size: 0.8rem;
    margin-bottom: 0;
    padding-bottom: 0;
}

.content-page article {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

section {
    max-width: var(--content-width);
    margin: var(--spacing-lg) auto;
    padding: 0 var(--spacing-md);
}

/* Typography Scale */
section h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: var(--spacing-base);
}
section h2 {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    margin: var(--spacing-lg) 0 var(--spacing-base);
}
section h3 {
    font-size: clamp(1.1rem, 3vw, 1.2rem);
    margin: var(--spacing-md) 0 0.75rem;
}

:is(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
    max-width: var(--text-width);
}

section :is(p, ul) {
    margin-bottom: var(--spacing-base);
}

/* Content page specific typography */
.content-page h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin-bottom: var(--spacing-base);
}

.content-page h2 {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    margin: var(--spacing-lg) 0 var(--spacing-base);
}

.content-page h3 {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    margin: var(--spacing-md) 0 0.75rem;
}

.content-page :is(p, ul) {
    margin-bottom: var(--spacing-base);
}

/* Lists & Links */
ul {
    list-style: none;
}
section ul {
    list-style: disc;
    padding-left: var(--spacing-md);
}
section li {
    margin-bottom: var(--spacing-xs);
}
a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Media Elements */
:is(img, picture, video, canvas, svg) {
    display: block;
    max-width: 100%;
    height: auto;
    contain: layout style; /* Performance optimization */
}

/* Form Elements */
:is(input, button, textarea, select) {
    font: inherit;
}

/* Tables */
table {
    border-collapse: collapse;
}

/* Footer Components */
.footer-container {
    position: fixed;
    bottom: 1.3rem;
    left: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none; /* Container itself doesn't catch events */
    z-index: var(--z-top); /* Ensure it's above other content */
    contain: layout style; /* Performance optimization */
}

.footer-left {
    pointer-events: auto;
    margin: 0;
    color: #ffffff;
}

.footer-left p,
.footer-left a {
    color: #ffffff;
}

.site-footer {
    position: static;
    pointer-events: auto;
    contain: layout style;
}

.app-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--radius-sm);
    contain: layout style; /* Performance optimization */
}

.lockup-container {
    color: white;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-base);
    cursor: pointer;
    h1,
    p {
        text-shadow: 1px 1px 5px black;
    }
    .app-icon {
        filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 1));
    }
}

/* Apply text shadow to all text elements within lockup container */

/* Apply drop shadow to app icon */
.lockup-container .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size); /* Match icon height */
}

.text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

:is(.text-wrapper, .lockup-container) p {
    line-height: 1.44rem;
    margin: 0; /* Remove default paragraph margins */
    padding: 0; /* Remove default paragraph padding */
    text-align: left; /* Ensure left alignment */
}

@media (max-width: 640px) {
    .site-footer {
        justify-content: center;
    }

    .footer-container {
        left: var(--spacing-base);
        right: var(--spacing-base);
        justify-content: center;
    }

    .footer-left {
        display: none;
    }
}

.footer-links {
    display: flex;
    gap: var(--spacing-base);
    color: #ffffff;
}

.footer-links a,
.footer-links a:visited,
.footer-links a:hover,
.footer-links a:active,
.footer-links a:focus {
    color: #ffffff !important;
}

/* Ensure all list items in footer are vertically centered */
.footer-links li {
    display: flex;
    align-items: center;
}

/* Performance: Add will-change to interactive elements */
.bgm-button,
.dynamic-center-button {
    will-change: opacity, transform;
}

.bgm-button:hover,
.dynamic-center-button:hover {
    will-change: auto; /* Reset after interaction */
}

/* BGM Toggle Button */
.bgm-button {
    background: none;
    border: none;
    color: #ffffff;
    font: inherit;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.bgm-icon {
    width: var(--icon-small);
    height: var(--icon-small);
}

/* Dynamic Center Button */
.dynamic-center-button {
    position: fixed;
    left: 50%;
    bottom: 25%; /* Positioned at 25% from bottom (middle of bottom half) */
    transform: translateX(-50%);
    z-index: var(--z-overlay); /* Just below footer which is 1000 */

    /* Button styling with glass-morphism effect */
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(var(--blur-heavy)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(180%); /* Safari support */
    color: var(--color-text);
    border: 0.5px solid rgba(255, 255, 255, 0.11); /* Lighter border for highlight */
    border-radius: var(--radius-lg);
    padding: 0.11rem 0.99rem;
    font-family: var(--font-family);
    font-weight: 333;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--duration-medium) var(--transition-bezier);
    white-space: nowrap; /* Prevent text wrapping */
    contain: layout style; /* Performance optimization */

    /* Lickable button effects */
    box-shadow: var(--shadow-button);

    /* Subtle text embossing */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Add pseudo-element for additional gloss effect */
.dynamic-center-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: none;
}

.dynamic-center-button:hover {
    transform: translateX(-50%) translateY(-2.22px);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-button-hover);
}

.dynamic-center-button:active {
    transform: translateX(-50%) translateY(0);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-button-active);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .dynamic-center-button {
        bottom: 20%; /* Slightly lower on mobile for better thumb reach */
        padding: var(--spacing-xs) var(--spacing-base); /* Reduced padding to prevent wrapping */
        font-size: 0.9rem; /* Slightly smaller font */
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .dynamic-center-button {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0) 100%
            ),
            rgba(255, 255, 255, 0.08);
        color: var(--color-text); /* Use light text color in dark mode */
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: var(--shadow-button);

        /* Subtle text embossing for dark mode */
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
    }

    .dynamic-center-button::before {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    .dynamic-center-button:hover {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.15) 0%,
                rgba(255, 255, 255, 0) 100%
            ),
            rgba(255, 255, 255, 0.1);
        box-shadow: var(--shadow-button-hover);
    }

    .dynamic-center-button:active {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(255, 255, 255, 0) 100%
            ),
            rgba(255, 255, 255, 0.06);
        box-shadow: var(--shadow-button-active);
    }
}

/* Animation Components */
.object {
    --blur-amount: var(--blur-object);
    --base-opacity: 0.33;

    width: var(--object-size);
    height: var(--object-size);
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    position: fixed;
    z-index: var(--z-below);
    transition: opacity var(--duration-very-slow) var(--transition-bezier);
    filter: blur(var(--blur-amount));
    will-change: transform;
    contain: layout style paint; /* Performance optimization */
}

.cycling-text {
    opacity: 1;
    transition: opacity var(--duration-slow) var(--transition-bezier);
    text-align: center;
    color: white;
}

.cycling-text.fade-out {
    opacity: 0;
}

/* Animations */
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(var(--float-height));
    }
}

@keyframes orbit {
    from {
        transform: rotate(0deg) translateX(var(--orbit-radius));
    }
    to {
        transform: rotate(360deg) translateX(var(--orbit-radius));
    }
}

/* Performance: Use transform for animations */
.object,
.cycling-text {
    transform: translateZ(0); /* Force GPU acceleration */
}

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

    .object {
        display: none;
    }
}

.testflight-link {
    padding-top: var(--spacing-xs);
}

.shop-link {
    text-align: center;
    display: block;
}

.shop-link p {
    text-align: center;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
#can,
#bubcan {
    position: absolute;
    height: 100%;
    width: 100%;
}

#bubcan {
    z-index: 1000;
}

a,
a:visited {
    color: black;
}