/* Theme-independent layout for carouline.af.codes.
   Color tokens and the glow painted with them live in index-light.css /
   index-dark.css. */

:root {
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Scroll-to-top button geometry. The footer derives its bottom padding from
       these, so the button and the footer text can never collide. */
    --fab-size: 2.5rem;
    --fab-inset: 1.5rem;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* The body has no background of its own, so the glow behind it, fixed to the
   window like the app's backdrop behind its screens, shows through. */
body {
    margin: 0;
    font-family: var(--font);
    line-height: 1.5;
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

/* The theme sheets paint it: the app's GlowBackdrop, violet in three corners
   and mint in the fourth, washed toward white or night. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

h1,
h2,
p {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Every themed image is a <picture> so it can carry a dark variant. Left
   inline it would put the block-level image in an inline box, adding a
   line-height gap under it. */
picture {
    display: block;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.container {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Hero ------------------------------------------------------------------- */

.section-hero {
    /* .top-brand and .top-actions are absolute; without this they would anchor
       to the initial containing block instead of the hero. The ribbon spans
       the window, so it's clipped here rather than scrolling the page
       sideways. */
    position: relative;
    overflow: hidden;
    overflow: clip;
    padding: 6rem 0 5rem;
    text-align: center;
}

.hero-copy,
.hero-devices,
.top-brand,
.top-actions {
    position: relative;
    z-index: 1;
}

/* Top brand and actions -------------------------------------------------- */

.top-brand,
.top-actions {
    position: absolute;
    top: 1rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
}

.top-brand {
    left: 1.5rem;
}

.top-actions {
    right: 1.5rem;
    gap: .5rem;
}

.top-brand .brand-logo {
    display: inline-flex;
    padding: .25rem;
    border-radius: 50%;
}

.top-brand .brand-logo img {
    width: 2rem;
    border-radius: 50%;
}

.top-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: .75;
    transition: opacity .2s ease, color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .top-btn:hover {
        opacity: 1;
        color: var(--accent);
    }
}

.top-btn:focus-visible {
    opacity: 1;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    display: none;
}

/* App icon and title ----------------------------------------------------- */

/* Rendered from AppIcon.icon with Icon Composer's ictool, so the plate and
   corner mask are already in the image; drop-shadow follows its alpha. */
.app-icon {
    width: 7rem;
    margin: 0 auto;
}

.app-icon img {
    width: 100%;
    filter: drop-shadow(0 .6rem 1.2rem var(--icon-shadow));
}

.hero-copy h1 {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: clamp(2.75rem, 7vw, 4.25rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.1;
    color: var(--fg);
}

/* The name is painted in the icon's colors wherever text can be a gradient's
   clip; elsewhere it stays plain --fg. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-copy h1 {
        background: var(--title-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.tagline {
    max-width: 36rem;
    margin: 1rem auto 0;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.55;
    color: var(--secondary);
}

/* Buttons ---------------------------------------------------------------- */

.cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
}

.app-store,
.btn-ghost {
    border-radius: .55rem;
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Apple's badge artwork, unaltered and at least the 40px tall its guidelines
   ask for. Its own rounded corners set the ghost button's radius. */
.app-store img {
    width: auto;
    height: 3rem;
}

/* Glass, like the app's floating chrome, over the glow. */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 3rem;
    padding: 0 1.2rem;
    border: 1px solid var(--glass-border);
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    color: var(--fg);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Two-line label, shorter together than the button, so it stays level with
   the badge. */
.btn-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}

.btn-subtext {
    font-size: .7rem;
    font-weight: 500;
    color: var(--secondary);
}

@media (hover: hover) and (pointer: fine) {
    .app-store:hover,
    .btn-ghost:hover {
        transform: scale(1.03);
    }
}

/* Devices ---------------------------------------------------------------- */

/* The captures are full-screen and square-cornered. Each frame sizes from its
   screen width, --w, so the bezel and both radii scale with it at every
   width. */
.device {
    position: relative;
    margin: 0 auto;
    padding: var(--bezel);
    width: calc(var(--w) + 2 * var(--bezel));
    border-radius: calc(var(--radius) + var(--bezel));
    background: #050506;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .1),
        0 0 0 1px var(--device-rim),
        0 2px 4px rgba(0, 0, 0, .08),
        0 1.5rem 3rem -1rem var(--device-shadow),
        0 3rem 6rem -2rem var(--device-shadow);
}

.device img {
    width: 100%;
    border-radius: var(--radius);
}

/* iPhone 18 Pro: a 402pt-wide screen with 62pt display corners. */
.phone {
    --w: min(290px, 62vw);
    --bezel: calc(var(--w) * .036);
    --radius: calc(var(--w) * .154);
}

.phone img {
    aspect-ratio: 603 / 1311;
}

/* The Dynamic Island draws outside the app, so the captures leave room for it
   without showing it: 126 by 37pt, 11pt below the screen's top edge. */
.phone::after {
    content: "";
    position: absolute;
    top: calc(var(--bezel) + var(--w) * .027);
    left: 50%;
    width: calc(var(--w) * .313);
    height: calc(var(--w) * .093);
    border-radius: 999px;
    background: #000;
    transform: translateX(-50%);
}

/* iPad Pro 13-inch: a 1032pt-wide screen with 18pt display corners. */
.tablet {
    --w: min(400px, 80vw);
    --bezel: calc(var(--w) * .03);
    --radius: calc(var(--w) * .0175);
}

.tablet img {
    aspect-ratio: 1032 / 1376;
}

.hero-devices {
    width: fit-content;
    margin: 4rem auto 0;
}

.hero-devices .phone {
    --w: min(300px, 62vw);
}

/* The icon's mint ribbon, flowing across the window behind the phone the way
   it crosses the icon's cards. Its box spans the window from the phone's
   center, and the path stretches to fill it. */
.ribbon {
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: -1;
    width: 100vw;
    height: min(22rem, 62vw);
    transform: translateX(-50%);
    filter: drop-shadow(0 .75rem 1.5rem var(--ribbon-shadow));
}

/* Features --------------------------------------------------------------- */

.section-feature {
    padding: 5rem 0;
}

.feature-split {
    max-width: 60rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}

.feature-split-reverse .feature-text {
    order: 2;
}

.feature-text {
    max-width: 28rem;
    justify-self: center;
}

.section-centered {
    text-align: center;
}

.section-centered .feature-copy {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.section-feature h2 {
    margin-top: 1rem;
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.feature-copy {
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--secondary);
}

/* Section labels are glass capsules like the app's slide captions, with the
   accent drawn solid in their text. */
.chip {
    display: inline-flex;
    padding: .3rem .85rem;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    color: var(--accent-text);
    font-size: .875rem;
    font-weight: 600;
    box-shadow: 0 .35rem .9rem -.35rem var(--glass-shadow);
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
    /* The scroll-to-top button is fixed over the bottom-right corner, and at
       narrow widths this text is wide enough to run under it once the page is
       scrolled to the end. Reserve the button's band plus a gap. */
    padding: 4rem 1.25rem calc(var(--fab-inset) + var(--fab-size) + 1rem);
    text-align: center;
    font-size: .875rem;
    color: var(--secondary);
}

.site-footer a {
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .site-footer a:hover {
        color: var(--accent-text);
        text-decoration: underline;
    }
}

/* Scroll-to-top ---------------------------------------------------------- */

/* Do NOT rename this to a generic "back to top" name (jump-to-top, back-to-top,
   scroll-to-top): ad-block cosmetic filters hide those id/class names, which
   makes the button vanish in browsers with a content blocker. Glass, like the
   app's floating chrome. */
.overview-return {
    position: fixed;
    right: var(--fab-inset);
    bottom: var(--fab-inset);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fab-size);
    height: var(--fab-size);
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    color: var(--fg);
    box-shadow: 0 4px 16px var(--glass-shadow);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity .25s ease, transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility .25s ease;
}

.overview-return.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .overview-return.visible:hover {
        transform: translateY(0) scale(1.05);
    }
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 820px) {
    .section-feature {
        padding: 4rem 0;
    }

    .feature-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .feature-split-reverse .feature-text {
        order: 0;
    }

    .feature-text {
        max-width: 34rem;
    }
}

@media (max-width: 600px) {
    .section-hero {
        padding: 5rem 0 3.5rem;
    }

    .app-icon {
        width: 5.5rem;
    }

    .hero-devices {
        margin-top: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    .app-store:hover,
    .btn-ghost:hover,
    .overview-return.visible:hover {
        transform: none;
    }
}