/* matchoomnews.com - Frutiger Aero frosted-glass editorial */

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

:root{
    --signal-blue:#0066FF;
    --beacon-orange:#FF6B2B;
    --sky-white:#FAFCFF;
    --ink-black:#0A0A0A;
    --frost:#FFFFFF;
    --smoke:#1A1A1A;
    --soft-gray:#6B7280;
    --steel-gray:#9CA3AF;
    --lime:#A3E635;
}

html{font-size:16px;scroll-behavior:smooth}

body{
    background:var(--sky-white);
    color:var(--ink-black);
    font-family:'Source Sans 3','Source Sans Pro',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.05vw,1.1rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Nav */
.nav-bar{
    position:fixed;top:0;left:0;right:0;
    z-index:1000;
    display:flex;align-items:center;justify-content:space-between;
    padding:0.75rem 2rem;
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,0.3);
    transition:background 0.4s,transform 0.4s;
}

.nav-bar.dark-mode{
    background:rgba(10,10,10,0.8);
    border-bottom-color:rgba(255,255,255,0.06);
}

.nav-bar.dark-mode .nav-brand,
.nav-bar.dark-mode .nav-link{color:#fff}

.nav-brand{
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:1rem;
    letter-spacing:0.005em;
    color:var(--ink-black);
}

.nav-links{display:flex;gap:1.5rem}

.nav-link{
    font-family:'Roboto Slab',serif;
    font-weight:400;
    font-size:0.85rem;
    color:var(--ink-black);
    text-decoration:none;
    position:relative;
}

.nav-link::after{
    content:'';position:absolute;bottom:-2px;left:0;
    width:0;height:2px;
    background:var(--signal-blue);
    transition:width 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.nav-link:hover::after{width:100%}

/* Sections */
.section{
    min-height:100vh;
    width:100%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* Beacon */
.section-beacon{
    background:linear-gradient(180deg,#FAFCFF 0%,#F0F8FF 100%);
    padding:2rem;
}

.collage-bg{
    position:absolute;inset:0;
    pointer-events:none;
}

.collage-rect{position:absolute;border-radius:4px}
.c-rect-1{width:120px;height:80px;background:rgba(0,102,255,0.15);top:15%;left:20%;transform:rotate(5deg)}
.c-rect-2{width:80px;height:100px;background:rgba(255,107,43,0.15);top:60%;left:65%;transform:rotate(-8deg)}
.c-rect-3{width:100px;height:60px;background:rgba(163,230,53,0.12);top:30%;right:15%;transform:rotate(3deg)}

.collage-line{position:absolute;height:1px;background:var(--soft-gray);opacity:0.3}
.c-line-1{width:200px;top:45%;left:10%;transform:rotate(-12deg)}
.c-line-2{width:160px;top:70%;right:20%;transform:rotate(7deg)}

.collage-frag{
    position:absolute;
    font-family:'JetBrains Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.04em;
    color:var(--steel-gray);
    opacity:0.4;
}
.c-frag-1{top:25%;right:25%;transform:rotate(4deg)}
.c-frag-2{top:55%;left:30%;transform:rotate(-3deg)}
.c-frag-3{bottom:20%;left:55%;transform:rotate(6deg)}

.glass-panel{
    background:rgba(255,255,255,0.75);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.3);
    box-shadow:0 8px 32px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.1);
    border-radius:20px;
}

.hero-panel{
    width:60vw;max-width:700px;
    padding:80px 60px;
    text-align:center;
    position:relative;z-index:2;
    opacity:0;transform:scale(0.95);
    transition:opacity 0.6s cubic-bezier(0.34,1.56,0.64,1),transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

.hero-panel.spring-in{opacity:1;transform:scale(1)}

.hero-title{
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:clamp(3rem,6vw,6.5rem);
    letter-spacing:0.005em;
    line-height:1.15;
    color:var(--ink-black);
}

.hero-korean{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--soft-gray);
    margin-top:0.5rem;
}

/* Feed */
.section-feed{
    background:var(--ink-black);
    padding:80px 24px;
    flex-direction:column;
}

.circuit-lines{
    position:absolute;inset:0;
    pointer-events:none;
}

.circuit-h{
    position:absolute;top:50%;left:0;right:0;
    height:1px;
    background:rgba(163,230,53,0.15);
}

.circuit-node{
    position:absolute;
    width:4px;height:4px;border-radius:50%;
    background:rgba(163,230,53,0.3);
}
.cn-1{top:calc(50% - 2px);left:25%}
.cn-2{top:calc(50% - 2px);left:50%}
.cn-3{top:calc(50% - 2px);left:75%}

.feed-grid{
    max-width:1100px;width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    position:relative;z-index:2;
}

.feed-card{
    border-radius:12px;
    overflow:hidden;
    opacity:0;transform:translateY(40px);
    transition:opacity 0.55s cubic-bezier(0.34,1.56,0.64,1),transform 0.55s cubic-bezier(0.34,1.56,0.64,1);
}

.feed-card.revealed{opacity:1;transform:translateY(0)}

.glass-dark{
    background:rgba(26,26,26,0.7);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.card-collage{
    height:140px;
    position:relative;
    overflow:hidden;
    background:rgba(0,0,0,0.3);
}

.card-shape{position:absolute}
.cs-1{width:60px;height:60px;background:rgba(0,102,255,0.3);top:10px;left:20px;clip-path:polygon(20% 0%,100% 0%,80% 100%,0% 100%)}
.cs-2{width:40px;height:80px;background:rgba(255,107,43,0.25);top:30px;right:30px;transform:rotate(12deg)}
.cs-3{width:80px;height:50px;background:rgba(163,230,53,0.2);top:20px;left:10px;transform:rotate(-5deg)}
.cs-4{width:50px;height:50px;background:rgba(0,102,255,0.2);bottom:10px;right:20px;border-radius:50%}
.cs-5{width:70px;height:40px;background:rgba(255,107,43,0.3);top:15px;left:40px;clip-path:polygon(0% 0%,80% 20%,100% 100%,10% 80%)}
.cs-6{width:45px;height:70px;background:rgba(163,230,53,0.2);top:40px;right:15px;transform:rotate(8deg)}
.cs-7{width:55px;height:55px;background:rgba(0,102,255,0.25);top:10px;right:10px;border-radius:50%}
.cs-8{width:80px;height:30px;background:rgba(255,107,43,0.2);bottom:20px;left:15px;transform:rotate(-3deg)}
.cs-9{width:40px;height:90px;background:rgba(163,230,53,0.25);top:5px;left:50px;transform:rotate(6deg)}
.cs-10{width:60px;height:45px;background:rgba(0,102,255,0.2);bottom:10px;right:25px;clip-path:polygon(50% 0%,100% 100%,0% 100%)}
.cs-11{width:90px;height:35px;background:rgba(255,107,43,0.2);top:25px;left:10px;transform:rotate(-7deg)}
.cs-12{width:50px;height:60px;background:rgba(0,102,255,0.3);top:50px;right:10px;transform:rotate(4deg)}

.card-body{padding:24px}

.mono-label{
    font-family:'JetBrains Mono',monospace;
    font-weight:400;
    font-size:0.75rem;
    letter-spacing:0.04em;
    color:var(--steel-gray);
}

.card-headline{
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:clamp(1.1rem,1.3vw,1.3rem);
    color:#fff;
    margin:0.5rem 0;
    line-height:1.25;
}

.card-text{
    font-size:0.95rem;
    color:var(--steel-gray);
    line-height:1.65;
}

/* Lens */
.section-lens{
    background:var(--sky-white);
    padding:80px 24px;
}

.lens-grid{
    max-width:1100px;width:100%;
    display:grid;
    grid-template-columns:2fr 3fr;
    gap:60px;
    align-items:center;
}

.lens-collage{
    position:relative;
    min-height:400px;
    opacity:0;transform:translateX(-30px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.lens-collage.revealed{opacity:1;transform:translateX(0)}

.lens-shape{position:absolute;border-radius:4px}
.ls-1{width:120px;height:120px;background:rgba(0,102,255,0.12);top:0;left:10%;transform:rotate(4deg)}
.ls-2{width:80px;height:160px;background:rgba(255,107,43,0.1);top:20%;right:5%;transform:rotate(-6deg)}
.ls-3{width:150px;height:80px;background:rgba(163,230,53,0.1);bottom:10%;left:0;transform:rotate(2deg)}
.ls-4{width:60px;height:60px;background:rgba(0,102,255,0.08);bottom:30%;right:20%;border-radius:50%}

.lens-line{position:absolute;height:1px;background:var(--soft-gray);opacity:0.2}
.ll-1{width:140px;top:40%;left:5%;transform:rotate(-10deg)}
.ll-2{width:100px;bottom:25%;right:10%;transform:rotate(5deg)}

.glass-accent{
    position:absolute;
    top:35%;left:15%;
    padding:20px 28px;
    background:rgba(255,255,255,0.6);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.3);
    transform:rotate(-3deg);
}

.lens-editorial{
    opacity:0;transform:translateY(20px);
    transition:opacity 0.6s ease 0.2s,transform 0.6s ease 0.2s;
}

.lens-editorial.revealed{opacity:1;transform:translateY(0)}

.section-heading{
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:clamp(1.5rem,2.5vw,2.4rem);
    color:var(--ink-black);
    margin-bottom:1.5rem;
    letter-spacing:0.005em;
    line-height:1.15;
}

.body-text{
    margin-bottom:1.25rem;
    color:#2A2A2A;
}

/* Signal */
.section-signal{
    background:linear-gradient(180deg,#FAFCFF 0%,#F5F0EB 100%);
    padding:80px 24px;
    flex-direction:column;
}

.circuit-bg{
    position:absolute;inset:0;
    opacity:0.03;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h20v-20h20v20h20M30 0v10M30 50v10' stroke='%230A0A0A' fill='none' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size:60px 60px;
    pointer-events:none;
}

.signal-content{
    max-width:600px;width:100%;
    text-align:center;
    position:relative;z-index:2;
    opacity:0;transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.signal-content.revealed{opacity:1;transform:translateY(0)}

.signal-panel{
    padding:48px 40px;
    margin-bottom:2rem;
    position:relative;
    background:rgba(255,255,255,0.8);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.signal-text{
    font-family:'Roboto Slab',serif;
    font-weight:400;
    font-size:clamp(1.1rem,1.5vw,1.4rem);
    color:var(--ink-black);
    line-height:1.65;
}

.signal-collage{
    position:absolute;
    top:-20px;right:-20px;
    width:60px;height:60px;
}

.signal-shape{position:absolute;border-radius:4px}
.ss-1{width:30px;height:30px;background:rgba(0,102,255,0.12);top:0;left:0;transform:rotate(8deg)}
.ss-2{width:20px;height:40px;background:rgba(163,230,53,0.1);bottom:0;right:0;transform:rotate(-5deg)}

.signal-domain{
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.4rem);
    color:var(--ink-black);
    letter-spacing:0.005em;
}

.signal-korean{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:400;
    font-size:1rem;
    color:var(--soft-gray);
    margin-top:0.25rem;
}

/* Data streams (Feed section) */
.data-stream{
    position:absolute;
    height:1px;
    background:repeating-linear-gradient(to right,rgba(163,230,53,0.2) 0px,rgba(163,230,53,0.2) 4px,transparent 4px,transparent 12px);
    animation:stream-move 8s linear infinite;
    pointer-events:none;
}

@keyframes stream-move{
    from{transform:translateX(-100%)}
    to{transform:translateX(100%)}
}

/* Responsive */
@media(max-width:768px){
    .nav-links{display:none}
    .hero-panel{width:90vw;padding:48px 24px}
    .feed-grid{grid-template-columns:1fr}
    .lens-grid{grid-template-columns:1fr;gap:2rem}
    .lens-collage{min-height:200px}
    .glass-accent{display:none}
}

@media(prefers-reduced-motion:reduce){
    .hero-panel,.feed-card,.lens-collage,.lens-editorial,.signal-content{
        opacity:1;transform:none;transition:none;
    }
    .data-stream{animation:none}
    .nav-link::after{transition:none}
}