<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>quatreze — quatreze</title>
        <link rel="icon" href="uploads/favicon.png">
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=League+Gothic&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html, body {
            height: 100%;
            background: #000;
            color: #fff;
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ── BACKGROUND (Apple/Spotify Liquid Ambient Style) ── */
        .hts-bg {
            position: fixed;
            inset: -10%; /* Overflow to hide blurred edges */
            z-index: 0;
            background-color: #050505;
                        background-image: url('uploads/hiatus_bg_1786735622.png');
                        background-size: cover;
            background-position: center;
            filter: blur(100px) saturate(160%) brightness(0.4);
            animation: bgBreath 20s ease-in-out infinite alternate;
        }
        
        .hts-bg-overlay {
            position: fixed;
            inset: 0;
            z-index: 1;
            background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%);
        }

        @keyframes bgBreath {
            0% { transform: scale(1); }
            100% { transform: scale(1.15); }
        }

        /* ── MAIN CONTENT ── */
        .hts-wrap {
            position: relative;
            z-index: 10;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 24px;
            text-align: center;
        }

        /* Brand / Eyebrow */
        .hts-brand {
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 14px;
            text-transform: uppercase;
            color: transparent;
            background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.2) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            margin-bottom: 3rem;
            position: relative;
            animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
            display: inline-block;
            margin-left: 14px; /* offset for letter-spacing to visually center */
        }
        .hts-brand::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: calc(50% - 7px);
            transform: translateX(-50%);
            width: 24px;
            height: 1px;
            background: rgba(255,255,255,0.3);
        }

        /* Main title */
        .hts-title {
            font-family: 'League Gothic', sans-serif;
            font-size: clamp(4.5rem, 15vw, 13rem);
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: lowercase;
            line-height: 0.85;
            color: #fff;
            margin-bottom: 1.5rem;
            animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
            text-shadow: 0 10px 40px rgba(0,0,0,0.6);
        }

        /* Subtitle */
        .hts-subtitle {
            font-size: clamp(1rem, 2vw, 1.25rem);
            line-height: 1.6;
            color: rgba(255,255,255,0.7);
            max-width: 600px;
            margin-bottom: 4rem;
            animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
            font-weight: 300;
        }

        /* ── COUNTDOWN (Minimalist typography) ── */
        .hts-countdown {
            display: flex;
            align-items: center;
            gap: 2.5rem;
            margin-bottom: 4.5rem;
            animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
        }

        .hts-unit {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 80px;
        }
        .hts-unit__num {
            font-family: 'League Gothic', sans-serif;
            font-size: clamp(4rem, 12vw, 8rem);
            font-weight: 400;
            color: #fff;
            line-height: 1;
            text-shadow: 0 4px 20px rgba(0,0,0,0.5);
            font-variant-numeric: tabular-nums;
        }
        .hts-unit__label {
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.4);
            margin-top: 0.5rem;
        }

        /* Separator */
        .hts-sep {
            font-family: 'League Gothic', sans-serif;
            font-size: clamp(3rem, 10vw, 7rem);
            color: rgba(255,255,255,0.2);
            line-height: 1;
            padding-bottom: 1.8rem;
        }

        /* ── SOCIAL LINKS (Clean, minimal circles) ── */
        .hts-socials {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
        }
        
        .hts-social-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(255,255,255,0.03);
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            font-size: 1.3rem;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .hts-social-btn:hover {
            background: #fff;
            color: #000;
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 10px 25px rgba(0,0,0,0.4);
            border-color: #fff;
        }

        /* ── FOOTER ── */
        .hts-footer {
            position: absolute;
            bottom: 2.5rem;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 0.6rem;
            font-weight: 500;
            letter-spacing: 4px;
            text-transform: lowercase;
            color: rgba(255,255,255,0.3);
            animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
            white-space: nowrap;
            padding-left: 4px; /* visually balances the letter-spacing on the right */
        }

        /* ── SHARED ANIMATION ── */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(40px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 768px) {
            .hts-countdown { gap: 1.2rem; }
            .hts-sep { font-size: 4rem; padding-bottom: 1.5rem; }
            .hts-socials { gap: 1rem; }
            .hts-social-btn { width: 50px; height: 50px; font-size: 1.1rem; }
        }
        @media (max-width: 480px) {
            .hts-countdown { gap: 0.8rem; }
            .hts-unit { min-width: 60px; }
            .hts-unit__num { font-size: 4rem; }
            .hts-sep { font-size: 3rem; padding-bottom: 1.2rem; }
        }
    </style>
</head>
<body>
    <!-- Background -->
    <div class="hts-bg"></div>
    <div class="hts-bg-overlay"></div>

    <!-- Main content -->
    <div class="hts-wrap">
        <div class="hts-brand">quatreze</div>

        <h1 class="hts-title">
            we&#039;ll be back.        </h1>

        
                <div class="hts-countdown" id="hts-countdown" data-target="2026-09-14T00:00">
            <div class="hts-unit">
                <span class="hts-unit__num" id="cd-days">00</span>
                <span class="hts-unit__label">days</span>
            </div>
            <div class="hts-sep">:</div>
            <div class="hts-unit">
                <span class="hts-unit__num" id="cd-hours">00</span>
                <span class="hts-unit__label">hrs</span>
            </div>
            <div class="hts-sep">:</div>
            <div class="hts-unit">
                <span class="hts-unit__num" id="cd-mins">00</span>
                <span class="hts-unit__label">min</span>
            </div>
            <div class="hts-sep">:</div>
            <div class="hts-unit">
                <span class="hts-unit__num" id="cd-secs">00</span>
                <span class="hts-unit__label">sec</span>
            </div>
        </div>
        
        <!-- Social links -->
        <div class="hts-socials">
                        <a href="https://www.instagram.com/quatreze.co/" target="_blank" class="hts-social-btn" title="Instagram">
                <i class="fa-brands fa-instagram"></i>
            </a>
                                    <a href="https://www.youtube.com/@quatreze" target="_blank" class="hts-social-btn" title="YouTube">
                <i class="fa-brands fa-youtube"></i>
            </a>
                                </div>

        <div class="hts-footer">quatreze — all rights reserved — 2026</div>
    </div>

    <script>
    (function() {
        const el = document.getElementById('hts-countdown');
        if (!el) return;

        const target = new Date(el.dataset.target).getTime();
        const daysEl = document.getElementById('cd-days');
        const hoursEl = document.getElementById('cd-hours');
        const minsEl = document.getElementById('cd-mins');
        const secsEl = document.getElementById('cd-secs');

        function pad(n) { return String(n).padStart(2, '0'); }

        function tick() {
            const now  = Date.now();
            const diff = target - now;

            if (diff <= 0) {
                daysEl.textContent = '00';
                hoursEl.textContent = '00';
                minsEl.textContent = '00';
                secsEl.textContent = '00';
                return;
            }

            const days  = Math.floor(diff / 86400000);
            const hours = Math.floor((diff % 86400000) / 3600000);
            const mins  = Math.floor((diff % 3600000)  / 60000);
            const secs  = Math.floor((diff % 60000)    / 1000);

            daysEl.textContent = pad(days);
            hoursEl.textContent = pad(hours);
            minsEl.textContent = pad(mins);
            secsEl.textContent = pad(secs);
        }

        tick();
        setInterval(tick, 1000);
    })();
    </script>
</body>
</html>
