<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Antigravity App Showcase</title>
    <meta name="description" content="A curated collection of innovative web and desktop applications.">

    <!-- OGP Settings -->
    <meta property="og:site_name" content="gladdesign.fun">
    <meta property="og:url" content="https://gladdesign.fun/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Antigravity App Showcase">
    <meta property="og:description" content="A curated collection of innovative web and desktop applications.">
    <meta property="og:image" content="https://gladdesign.fun/images/main-img.png">

    <!-- Twitter Card Settings -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Antigravity App Showcase">
    <meta name="twitter:description" content="A curated collection of innovative web and desktop applications.">
    <meta name="twitter:image" content="https://gladdesign.fun/images/main-img.png">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap"
        rel="stylesheet">

    <link rel="stylesheet" href="css/style.css">
    <style>
        /* ===== HERO SPECIFIC ===== */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero__bg-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80vw;
            height: 80vw;
            max-width: 1000px;
            max-height: 1000px;
            background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
            z-index: 1;
            pointer-events: none;
        }

        .hero__content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 0 var(--side-pad);
        }

        .hero__eyebrow {
            font-family: var(--font-sans);
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 24px;
        }

        .hero__title {
            font-family: var(--font-display);
            font-size: clamp(3.5rem, 10vw, 9rem);
            line-height: 1.05;
            letter-spacing: 0.04em;
            margin-bottom: 24px;
        }

        .hero__title--accent {
            color: var(--accent);
            display: inline-block;
            text-shadow: 0 0 80px var(--accent-glow);
        }

        .hero__description {
            font-family: var(--font-serif);
            font-size: clamp(1rem, 2vw, 1.35rem);
            font-weight: 400;
            color: var(--text-muted);
            line-height: 1.8;
            margin-bottom: 48px;
            max-width: 600px;
            margin-inline: auto;
        }

        /* ===== GALLERY SPECIFIC ===== */
        .gallery {
            background: var(--bg-dark);
            padding: var(--section-pad) 0;
            position: relative;
        }

        .gallery__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 16px;
            padding: 0 var(--side-pad);
            margin-top: 64px;
        }

        .app-card {
            background: var(--bg-card);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            aspect-ratio: 4/3;
            text-decoration: none;
            cursor: pointer;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

        .app-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s;
            z-index: 10;
        }

        .app-card:hover::before {
            transform: scaleX(1);
        }

        .app-card__image-wrap {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }

        .app-card__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .app-card:hover .app-card__image {
            transform: scale(1.05);
        }

        .app-card__overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(5, 5, 8, 0.95) 0%, rgba(5, 5, 8, 0.4) 50%, rgba(5, 5, 8, 0.1) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: clamp(32px, 4vw, 48px);
            z-index: 2;
            transition: background 0.4s ease, backdrop-filter 0.4s ease;
        }

        .app-card:hover .app-card__overlay {
            background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.5) 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .app-card__tag {
            font-family: var(--font-sans);
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 12px;
            transition: color 0.3s ease;
        }

        .app-card:hover .app-card__tag {
            color: var(--text-white);
        }

        .app-card__title {
            font-family: var(--font-display);
            font-size: clamp(2rem, 3vw, 3rem);
            letter-spacing: 0.05em;
            margin-bottom: 12px;
            line-height: 1.1;
            color: var(--text-white);
            transition: color 0.3s;
            min-height: 2.2em;
            /* 常に2行分の高さを確保し、上のテキスト位置を揃える */
        }

        .app-card:hover .app-card__title {
            color: var(--accent);
        }

        .app-card__desc {
            font-size: 0.85rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 24px;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.4s ease;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        .app-card:hover .app-card__desc {
            transform: translateY(0);
            opacity: 1;
            color: var(--text-white) !important;
            text-shadow: 0 0 15px rgba(0, 0, 0, 1);
        }

        .app-card__arrow {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-white);
            transition: all 0.3s;
            transform: translateX(-10px);
            opacity: 0;
        }

        .app-card:hover .app-card__arrow {
            transform: translateX(0);
            opacity: 1;
            border-color: var(--accent);
            background: var(--accent);
            color: var(--bg-black);
        }

        @media (max-width: 768px) {

            .app-card__desc,
            .app-card__arrow {
                transform: none;
                opacity: 1;
            }
        }
    </style>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-5RCKN115W5"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-5RCKN115W5');
    </script>
</head>

<body>

    <!-- ===== NAV ===== -->
    <nav class="nav">
        <div class="nav__logo"><a href="#">gladdesign.fun</a></div>
        <div class="nav__links">
            <a href="#apps" class="nav__link">APPS</a>
        </div>
    </nav>

    <!-- ===== HERO ===== -->
    <section class="hero" id="top">
        <div class="hero__bg-glow"></div>
        <div class="hero__content reveal">
            <p class="hero__eyebrow">Creative Toolkit Collection</p>
            <h1 class="hero__title">
                Explore the<br>
                <span class="hero__title--accent">Innovation.</span>
            </h1>
            <p class="hero__description">
                A curated collection of web and desktop applications designed to elevate your creative workflows and
                productivity.
            </p>
            <a href="#apps" class="btn btn--primary">
                Explore Apps
            </a>
        </div>
    </section>

    <!-- ===== GALLERY ===== -->
    <section class="gallery" id="apps">
        <div class="section-label reveal">
            <span class="section-label__number">01</span>
            <span class="section-label__text">PORTFOLIO</span>
        </div>

        <h2 class="section-title reveal">
            Featured<br>
            <em>Applications</em>
        </h2>

        <div class="gallery__grid">

            <!-- Card: MeMoMa -->
            <a href="memoma.html" class="app-card reveal" onclick="gtag('event', 'click_tool_link', { 'app_name': 'MeMoMa' })" style="animation-delay: 0.1s;">
                <div class="app-card__image-wrap">
                    <div class="app-card__image"
                        style="background: url('images/memoma-app-screenshot.png') center/cover no-repeat;">
                    </div>
                </div>
                <div class="app-card__overlay">
                    <div class="app-card__tag">Web App / Thinking Tool</div>
                    <h3 class="app-card__title">MeMoMa</h3>
                    <p class="app-card__desc">思考を整理する、100のチャンス<br>（完全無料・ブラウザツール）</p>
                    <div class="app-card__arrow">→</div>
                </div>
            </a>

            <!-- Card: Mastering Tool -->
            <a href="tools/audio-master/index.html" class="app-card reveal" target="_blank"
                onclick="gtag('event', 'click_tool_link', { 'app_name': 'Audio Master Pro' })"
                style="animation-delay: 0.2s;">
                <div class="app-card__image-wrap">
                    <div class="app-card__image"
                        style="background: url('images/audio-master.png') center/cover no-repeat;">
                    </div>
                </div>
                <div class="app-card__overlay">
                    <div class="app-card__tag">Desktop App / Mac</div>
                    <h3 class="app-card__title">Audio Master Pro</h3>
                    <p class="app-card__desc">音楽ファイルのマスタリングツール<br>（完全無料・デスクトップアプリ・Mac専用）</p>
                    <div class="app-card__arrow">→</div>
                </div>
            </a>

            <!-- Card: Prompt Nexus -->
            <a href="prompt-nexus.html" class="app-card reveal" onclick="gtag('event', 'click_tool_link', { 'app_name': 'Prompt Nexus' })">
                <div class="app-card__image-wrap">
                    <div class="app-card__image"
                        style="background: url('images/prompt-nexus.png') center/cover no-repeat;">
                    </div>
                </div>
                <div class="app-card__overlay">
                    <div class="app-card__tag">Web App / AI Tool</div>
                    <h3 class="app-card__title">Prompt Nexus</h3>
                    <p class="app-card__desc">チャット型生成AI用プロンプト支援ツール<br>（完全無料・ブラウザツール）</p>
                    <div class="app-card__arrow">→</div>
                </div>
            </a>

            <!-- Card: Separate-X -->
            <a href="separate-x.html" class="app-card reveal" onclick="gtag('event', 'click_tool_link', { 'app_name': 'Separate-X' })">
                <div class="app-card__image-wrap">
                    <div class="app-card__image"
                        style="background: url('images/separate-x.png') center/cover no-repeat;">
                    </div>
                </div>
                <div class="app-card__overlay">
                    <div class="app-card__tag">Web App / Utility</div>
                    <h3 class="app-card__title">Separate-X</h3>
                    <p class="app-card__desc">長文SNS投稿用テキスト自動分割ツール<br>（完全無料・ブラウザツール）</p>
                    <div class="app-card__arrow">→</div>
                </div>
            </a>

            <!-- Card: Kyo-soku Memo -->
            <a href="kyo-soku-memo.html" class="app-card reveal" onclick="gtag('event', 'click_tool_link', { 'app_name': '驚速メモ' })" style="animation-delay: 0.2s;">
                <div class="app-card__image-wrap">
                    <div class="app-card__image"
                        style="background: url('images/kyo-soku-memo.png') center/cover no-repeat;">
                    </div>
                </div>
                <div class="app-card__overlay">
                    <div class="app-card__tag">Web App / Utility</div>
                    <h3 class="app-card__title">驚速メモ</h3>
                    <p class="app-card__desc">ログイン不要・即書けるブラウザメモ帳<br>（完全無料・ブラウザツール）</p>
                    <div class="app-card__arrow">→</div>
                </div>
            </a>


            <!-- Card: Browser-Recorder -->
            <a href="browser-recorder.html" class="app-card reveal" onclick="gtag('event', 'click_tool_link', { 'app_name': 'Browser Recorder' })">
                <div class="app-card__image-wrap">
                    <div class="app-card__image"
                        style="background: url('images/browser-recorder.png') center/cover no-repeat;">
                    </div>
                </div>
                <div class="app-card__overlay">
                    <div class="app-card__tag">Web App / Utility</div>
                    <h3 class="app-card__title">Browser Recorder</h3>
                    <p class="app-card__desc">ブラウザ完結型・画面＆音声録音ツール<br>（完全無料・ブラウザツール）</p>
                    <div class="app-card__arrow">→</div>
                </div>
            </a>

            <!-- Card: Website Inspector Z -->
            <a href="website-inspector-z.html" class="app-card reveal" onclick="gtag('event', 'click_tool_link', { 'app_name': 'Website Inspector Z' })">
                <div class="app-card__image-wrap">
                    <div class="app-card__image"
                        style="background: url('images/website-inspector-z.png') center/cover no-repeat;">
                    </div>
                </div>
                <div class="app-card__overlay">
                    <div class="app-card__tag">Chrome Extension / Web Design Tool</div>
                    <h3 class="app-card__title">Website Inspector Z</h3>
                    <p class="app-card__desc">デザイン構造を解剖するモダン・インスペクター<br>（完全無料・Chrome拡張機能）</p>
                    <div class="app-card__arrow">→</div>
                </div>
            </a>

        </div>
    </section>

    <!-- ===== FOOTER ===== -->
    <footer class="footer"
        style="padding: 48px var(--side-pad); border-top: 1px solid rgba(255,255,255,0.05); margin-top: 100px;">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
            <div class="nav__logo">gladdesign.fun</div>
            <div style="font-size: 0.85rem; color: var(--text-muted); display: flex; gap: 24px;">
                <a href="privacy.html" style="color: var(--text-muted); text-decoration: none; transition: color 0.3s;"
                    onmouseover="this.style.color='var(--accent)'"
                    onmouseout="this.style.color='var(--text-muted)'">Privacy Policy / Disclaimer</a>
            </div>
        </div>
        <div style="font-size: 0.72rem; color: var(--text-muted); margin-top: 24px; text-align: right;">&copy; 2026
            gladdesign.fun. All rights reserved.
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>

</html>