/* About page – Pure CSS layout and styling matching the mock */
/* About page styles: faithful to provided mock, fully responsive */

:root{
    --bg:#f5f5f5;
    --text:#0f1720;
    --muted:#646d75;
}

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

html, body{
    height:100%;
    width:100%;
    overflow:hidden; /* Prevent scrolling */
    position:fixed; /* Additional measure to prevent scrolling */
}

body{
    font-family:"Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background:var(--bg);
    color:var(--text);
}

@font-face{
    font-family: 'Avegra';
    src: url('/static/font/avegra.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.about-body{
    min-height: 100vh;
    margin: 0;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.about-card{
    width: 100%;
    max-width: 420px;
    padding: 28px 24px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: 9/16;
    max-height: 92vh;
    position: relative;
    overflow: hidden;
}

.circle-lottie{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 420px){
    .circle-lottie{ width: 320px; height: 320px; }
}

/* Ensure perfect stacked hero on tablets and mobiles */
@media (max-width: 1023.98px) and (min-width: 769px) {
    /* Create safe space for fixed top and bottom nav on small screens */
    .about-card{ padding-top: 52px; padding-bottom: 110px; }
    /* Keep CTA visually bottom-centered but clear of bottom nav */
    .about-cta{ margin-bottom: 12px; width: 56px; height: 56px; }
}

/* Tablet sizing of the lottie and heading to match mock */
@media (min-width: 640px) and (max-width: 1023.98px){
    .circle-lottie{ width: 420px; height: 420px; }
    .about-title{ font-size: 56px; }
}

/* Small phones: slightly larger lottie and extra bottom room */
@media (max-width: 639.98px) and (min-width: 410px) {
    .about-card{ padding-top: 46px; padding-bottom: 96px; }
    .about-content{ transform: translateY(-8px); }
    .circle-lottie{ width: 340px; height: 340px; }
}

@media (max-width: 394px){
    .circle-lottie{ width: 300px; height: 300px; }
}

.about-title{
    margin-top: 24px;
    margin-bottom: 0;
    font-family: 'Avegra', 'Times New Roman', serif;
    font-size: 56px;
    line-height: 1;
    color: #0f0f0f;
}

@media (max-width: 420px){
    .about-title{ font-size: 44px; }
}

.about-subtitle{
    margin-top: 4px;
    margin-bottom: 0;
    font-weight: 800;
    letter-spacing: .08em;
    color: #111;
}

.about-brand{
    margin-top: 18px;
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: .18em;
    color: #111;
}
.about-cta{
    margin-top: 50px;
    margin-bottom: 2px;
    width: 50px;
    height: 50px;
    display: flex;
    flex: 0 0 auto;
    background-color: white;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    line-height: 0;
    font-weight: 900;
    color: #111;
    text-decoration: none;
    font-size: 16px;
    transition: background .2s ease, color .2s ease;
    border: 1px solid #111;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}

.about-cta:hover{ background:#111; color:#fff; }


/* Transitions and dark mode */
.about-content{ position:relative; z-index: 2; transition: opacity .45s ease, transform .45s ease; }

.timeline{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 16px;
    display: grid;
    place-items: center;
    background: #000;
    color: #fff;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease, background-color .6s ease;
    z-index: 40;
    pointer-events: none; /* allow clicking about-cta when hidden */
}
@media (min-width: 1124px) and (max-width: 2000px){
    .timeline .tl-card{padding: 70px;}
}
@media (max-width: 344px) and (min-width: 320px){
    .timeline .tl-title{font-size: 30px;}
}
.tl-card{
    width: 100%;
    height: 100%;
    border-radius: 22px;
    background: #000;
    display: flex;
    align-items: center;
    padding: 70px 0;
    position: relative;
    overflow: hidden;
    transition: background-color .6s ease;
}

.tl-track{ display:flex; width:auto; min-width:100%; height:100%; transition: transform .5s ease; overflow:visible; will-change: transform; }
.tl-slide{ flex:0 0 100%; min-width:100%; display:flex; align-items:center; justify-content:flex-start; padding:8px; height:100%; }
.tl-inner{ max-width: 900px; padding: 0 8px; text-align:left; }
.tl-eyebrow{ font-size: 54px; letter-spacing:.08em; color:#d1d5db; margin:0 0 10px; text-transform: uppercase; font-weight:300; }
.tl-title{ font-size: 72px; font-weight: 900; letter-spacing:.01em; margin:0 0 28px; color:#ffffff; line-height:1.05; }
.tl-desc{ display:block; color:#cbd5e1; line-height:1.6; margin: 14px 0 0; max-width: 720px; font-size:18px; }
.tl-year-row{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin: 8px 0 0; }
.tl-year{ font-size:20px; color:#e5e7eb; }
.tl-rule{ width:70%; height:2px; background:#d1d5db; display:block; opacity:.9; }

/* Light theme overrides for slide 4 */
.tl-card.theme-light{ background:#e8e8e8; }
.tl-card.theme-light .tl-title{ color:#111; }
.tl-card.theme-light .tl-eyebrow{ color:#222; }
.tl-card.theme-light .tl-year{ color:#333; }
.tl-card.theme-light .tl-desc{ color:#374151; }
.tl-card.theme-light .tl-rule{ background:#9ca3af; }

/* Per-index theme overrides while keeping background from JS */
/* Slide 3 (index 2): make non-bold text pure white */
.tl-card.theme-idx-2 .tl-eyebrow{ color:#ffffff; }
.tl-card.theme-idx-2 .tl-year{ color:#ffffff; }
.tl-card.theme-idx-2 .tl-desc{ color:#ffffff; }
.tl-card.theme-idx-2 .tl-rule{ background:#ffffff; opacity:1; }

/* Slide 4 (index 3): make non-bold text pure black on light bg */
.tl-card.theme-idx-3 .tl-eyebrow{ color:#000000; }
.tl-card.theme-idx-3 .tl-year{ color:#000000; }
.tl-card.theme-idx-3 .tl-desc{ color:#000000; }
.tl-card.theme-idx-3 .tl-rule{ background:#000000; opacity:1; }

@media (max-width: 520px) and (min-width: 410px) {
    .tl-eyebrow{ font-size: 20px; letter-spacing:.12em; }
    .timeline .tl-title{ font-size: 40px;}
    .tl-year{ font-size:12px; }
    .tl-desc{ font-size: 15px; }
    .about-cta{width: 40px; height: 40px;}
    .tl-rule{ width:60%; }
}

/* Desktop vs Mobile sizing for the inner card */
@media (min-width: 900px) and (max-width: 1024px){
    .tl-card{ border-radius: 28px; }
}
@media screen and (max-width:393px){
    .about-card{margin-bottom: 150px;}
    .circle-lottie{width: 250px; height: 250px;}
}
@media (max-width: 640px){
    .tl-card{ padding: 3px; overflow:hidden; }
    .tl-inner{ max-width: none; width: 100%; }
    .tl-slide{ align-items:center; justify-content:center; }
    .tl-title{ font-size: 30px; }
    .tl-eyebrow{ font-size: 22px; }
    .about-card{margin-bottom: 100px;}
    /* .circle-lottie{width: 300px; height: 300px;} */
    .about-cta{margin-top: 30px;}
    .tl-rule{ width:65%; height:2px; }
}

@media (max-width: 900px){
    .tl-card{ overflow:hidden; }
    .tl-slide{ align-items:center; justify-content:center; }
    .tl-title{ font-size: 48px; }
    .tl-eyebrow{ font-size: 32px; }
}

/* Controls */
.tl-controls{
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
}

.tl-prev, .tl-next{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(20,20,20,.9);
    color:#fff;
    border:2px solid rgba(255,255,255,.35);
    cursor: pointer;
    display:flex; align-items:center; justify-content:center;
}
.tl-prev:hover, .tl-next:hover{ background:#111; }
.tl-prev:disabled, .tl-next:disabled{ opacity:.35; cursor: default; }

.tl-close{
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    color:#f3f4f6;
    border:2px solid rgba(255,255,255,.45);
    display:flex; align-items:center; justify-content:center;
    z-index: 3;
}

.timeline.is-start .tl-prev{ opacity:.35; pointer-events:none; }
.timeline.is-end .tl-next{ opacity:.35; pointer-events:none; }

/* Mobile: center the controls at bottom */
@media (max-width: 640px) and (min-width: 415px){
    .tl-controls{
        left: 50%;
        bottom: 16px;
        transform: translateX(-50%);
    }
    .tl-close{
        right: 16px; /* stays right */
    }
}
@media (max-width: 414px){
    .tl-title{font-size: 35px;}
}
/* Desktop/Large: move close to top-right */
@media (min-width: 1024px){
    .tl-controls{
        right: 16px;
        left: auto;
        bottom: 16px;
        transform: none;
    }
    .tl-close{
        top: 18px;
        right: 18px;
        bottom: auto;
    }
}

.about-body.is-dark{ background: #000; color:#f5f5f5; }
.about-body.is-dark .about-content{ opacity:0; transform: translateY(-12px); pointer-events:none; }
.about-body.is-dark .timeline{ opacity:1; transform: translateY(0); pointer-events:auto; }

/* Reduced motion respect */
.about-body.no-motion, .about-body.no-motion *{ transition: none !important; }


/* Desktop-only layout for left lottie, centered content, right CTA */
@media (min-width: 1024px){
    .about-card{
        max-width: none;
        height: 100vh;
        aspect-ratio: auto;
        width: 100%;
        display: grid;
        /* Make columns flexible at smaller desktop widths while preserving the composition */
        grid-template-columns: minmax(260px, 1fr) minmax(520px, 1000px) min-content;
        column-gap: 40px;
        align-items: center;
        justify-items: center;
        /* Use responsive side gutters so 1024px wide viewports don't overflow */
        padding: 0 clamp(16px, 8vw, 220px);
        position: relative;
        overflow: hidden;
    }

    /* Ensure content is perfectly centered */
    .about-content{
        grid-column: 2;
        text-align: center;
        position: static; /* allow absolute lottie to anchor to .about-card */
    }

    /* Place CTA immediately to the right of centered content */
    .about-cta{
        grid-column: 3;
        align-self: center;
        justify-self: start;
        margin: 0;
        width: 64px;
        height: 64px;
    }

    /* Make the lottie large and docked to the left side */
    .circle-lottie{
        position: absolute;
        left: clamp(16px, 6vw, 72px);
        top: 50%;
        transform: translateY(-50%);
        width: 500px;
        height: 500px;
        z-index: 0;
        pointer-events: none; /* do not block interactions */
    }

    .circle-lottie dotlottie-wc{
        width: 680px !important;
        height: 680px !important;
    }
}

/* Fine-tune layout specifically for 1024–1279px to perfectly match the mock */
@media (min-width: 1024px) and (max-width: 1279.98px){
    .about-card{
        grid-template-columns: minmax(220px, 1fr) minmax(480px, 720px) min-content;
        column-gap: 32px;
        padding: 0 clamp(16px, 7vw, 140px);
    }
    .circle-lottie{
        left: clamp(12px, 5vw, 56px);
        width: 480px;
        height: 480px;
    }
    .circle-lottie dotlottie-wc{
        width: 620px !important;
        height: 620px !important;
    }
    .about-cta{
        width: 60px;
        height: 60px;
    }
}