/* ══════════════════════════════════
   The Someone's Tale — Global Styles
   ══════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:auto;background:#0d1528;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:none;overflow-x:hidden;}
canvas#gl{position:fixed;top:0;left:0;will-change:transform;opacity:0;}
.fv-canvas-wrap{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0;}

/* Custom cursor */
.cursor{position:fixed;z-index:9999;pointer-events:none;mix-blend-mode:difference;will-change:transform;top:0;left:0;}
.cursor-dot{width:6px;height:6px;background:#e8e8e3;border-radius:50%;transform:translate(-50%,-50%);}
.cursor-ring{width:36px;height:36px;border:1px solid rgba(232,232,227,0.25);border-radius:50%;transform:translate(-50%,-50%);transition:transform 0.15s ease-out,width 0.3s,height 0.3s,border-color 0.25s;}
.cursor-ring.hover{width:56px;height:56px;border-color:rgba(232,232,227,0.5);}

.fv-wrap{position:relative;height:100vh;width:100%;overflow:hidden;}
.ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.ui a,.ui button{pointer-events:auto;}

/* Content wrap — background darkens on scroll */
.content-wrap{position:relative;z-index:2;background:#0d1528;}

/* Sections */
.sec{position:relative;padding:15vh 56px;border-top:1px solid rgba(255,255,255,0.04);}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6vh;}
.lbl{font-family:'Inter',sans-serif;font-size:10px;font-weight:300;letter-spacing:1.5px;text-transform:uppercase;color:rgba(232,232,227,0.15);}
.num{font-family:'Inter',sans-serif;font-size:10px;color:rgba(232,232,227,0.1);letter-spacing:0.5px;}

/* About — 2 column */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:6vw;align-items:start;text-align:left;}
.about-catch{
    font-family:'Jost',sans-serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:400;
    line-height:1.15;letter-spacing:-0.02em;color:#e8e8e3;text-align:left;margin:0;
}
.about-catch em{font-style:italic;color:rgba(232,232,227,0.25);font-weight:300;}
.about-text{
    font-family:'Jost',sans-serif;font-size:clamp(0.85rem,1.2vw,1rem);font-weight:300;
    line-height:2.0;color:rgba(232,232,227,0.28);
}
.about-text p{margin:0 0 1.5em;}
.about-text p:last-child{margin-bottom:0;}

/* Character animation — glass refraction */
.char{
    display:inline-block;
    opacity:0;
    filter:blur(8px);
    transition:opacity 0.6s ease-out,filter 1.2s ease-out;
}
.char.clear{
    opacity:1;
    filter:blur(0px);
}

/* News ticker */
.ticker-wrap{overflow:hidden;border-top:1px solid rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.04);padding:14px 0;position:relative;}
.ticker{display:flex;gap:5rem;white-space:nowrap;animation:tickerSlide 35s linear infinite;}
.ticker span{font-family:'Jost',sans-serif;font-size:13px;font-weight:300;color:rgba(232,232,227,0.2);}
.ticker .dot{color:rgba(107,122,153,0.4);margin:0 0.3em;}
@keyframes tickerSlide{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* Work — horizontal scroll gallery */
#work{position:relative;z-index:1;}
.work-link{display:block;text-decoration:none;color:inherit;cursor:pointer;}
.work-title-wrap{position:relative;margin-bottom:5vh;}
.work-title{font-family:'Jost',sans-serif;font-size:clamp(3rem,8vw,7rem);font-weight:400;letter-spacing:-0.03em;line-height:0.9;color:#e8e8e3;}
.work-sub{font-family:'Jost',sans-serif;font-size:clamp(0.8rem,1.2vw,1rem);font-weight:300;font-style:italic;color:rgba(232,232,227,0.25);margin-top:1.5rem;}
.work-scroll{overflow:visible;margin:0 -56px;padding:0 56px;}
.work-track{display:flex;gap:1.5vw;will-change:transform;}
.work-img{flex-shrink:0;width:clamp(240px,30vw,380px);overflow:hidden;border-radius:1px;position:relative;}
.work-img img{
    width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
    filter:url(#ribGlass) brightness(0.8) saturate(0.75);
    transition:filter 1s cubic-bezier(0.23,1,0.32,1);
}
/* Rib highlight — light catching on crests */
.work-img::after{
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
    background:
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 10px,
            rgba(200,215,255,0.07) 11px,
            rgba(255,255,255,0.04) 12px,
            transparent 13px
        );
    opacity:1;
    transition:opacity 1s cubic-bezier(0.23,1,0.32,1);
}
/* Hover — glass removed */
.work-img:hover img{
    filter:brightness(1) saturate(1);
}
.work-img:hover::after{
    opacity:0;
}
/* SP — no hover, show images clearly */
@media(max-width:768px){
    .work-img img{filter:brightness(0.85) saturate(0.9);}
    .work-img::after{display:none;}
}
.work-img .img-num{position:absolute;bottom:8px;left:10px;font-family:'Inter',sans-serif;font-size:9px;color:rgba(255,255,255,0.3);letter-spacing:0.5px;}
.work-more{
    display:inline-block;margin-top:4vh;
    font-family:'Jost',sans-serif;font-size:0.85rem;font-weight:300;
    color:rgba(232,232,227,0.3);
    border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:4px;
    transition:all 0.3s;
}
.work-link:hover .work-more{color:#e8e8e3;border-color:rgba(232,232,227,0.3);}

/* Consulting */
.con-intro{font-family:'Jost',sans-serif;font-size:clamp(1.3rem,2.8vw,2.2rem);font-weight:300;line-height:1.35;color:rgba(232,232,227,0.7);max-width:650px;margin-bottom:6vh;}
.con-intro span{color:rgba(232,232,227,0.25);}
.con-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;}
.con-card{padding:3.5rem 3rem;border:1px solid rgba(255,255,255,0.03);position:relative;overflow:hidden;transition:background 0.5s;}
.con-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(107,122,153,0.04);transform:scaleY(0);transform-origin:bottom;transition:transform 0.5s cubic-bezier(0.23,1,0.32,1);}
.con-card:hover::before{transform:scaleY(1);}
.con-card h4{font-family:'Jost',sans-serif;font-size:1.1rem;font-weight:400;margin-bottom:1rem;position:relative;z-index:1;color:#e8e8e3;}
.con-card p{font-size:0.75rem;font-weight:300;color:rgba(232,232,227,0.25);line-height:1.7;position:relative;z-index:1;}
.con-card .con-n{position:absolute;top:1.5rem;right:1.5rem;font-family:'Marcellus',serif;font-size:2rem;color:rgba(255,255,255,0.02);z-index:1;}
.con-clients{font-family:'Inter',sans-serif;font-size:10px;font-weight:300;letter-spacing:1px;color:rgba(232,232,227,0.1);margin-top:4vh;}

/* Contact */
.contact-title{font-family:'Marcellus',serif;font-size:clamp(2.5rem,6vw,5rem);line-height:1.0;letter-spacing:-0.02em;color:#e8e8e3;margin-bottom:3vh;}
.contact-links{display:flex;gap:4rem;margin-top:2vh;}
.contact-links a{
    font-family:'Jost',sans-serif;font-size:1.1rem;font-weight:300;
    color:rgba(232,232,227,0.6);text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:4px;
    transition:all 0.3s;
}
.contact-links a:hover{color:#e8e8e3;border-color:rgba(232,232,227,0.3);}

/* Footer */
.footer{position:relative;padding:10vh 56px 4vh;border-top:1px solid rgba(255,255,255,0.04);overflow:hidden;}
.footer-ghost{font-family:'Marcellus',serif;font-size:clamp(4rem,10vw,12rem);color:rgba(255,255,255,0.015);line-height:0.85;letter-spacing:-0.03em;margin-bottom:4vh;}
.footer-bar{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:rgba(232,232,227,0.1);}
.footer-bar a{color:rgba(232,232,227,0.1);text-decoration:none;transition:color 0.3s;}
.footer-bar a:hover{color:rgba(232,232,227,0.4);}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(40px);transition:all 1s cubic-bezier(0.23,1,0.32,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* Nav */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:210;
    display:flex;justify-content:space-between;align-items:center;
    padding:28px 48px;
    opacity:1;transition:opacity 0.8s ease-out;
}
html.is-loading .nav{opacity:0;pointer-events:none;}
.nav-logo{
    font-family:'Marcellus',serif;font-size:13px;
    color:#e8e8e3;text-decoration:none;letter-spacing:1px;white-space:nowrap;
}
.nav-links{display:flex;gap:36px;}
.nav-links a{
    font-family:'Inter',sans-serif;font-size:11px;font-weight:300;
    letter-spacing:1px;text-transform:uppercase;
    color:rgba(232,232,227,0.3);text-decoration:none;
    position:relative;overflow:hidden;display:inline-block;
}
/* Nav hover — text slides up, duplicate slides in */
.nav-links a span{display:block;transition:transform 0.4s cubic-bezier(0.23,1,0.32,1);}
.nav-links a span.nav-dup{position:absolute;top:100%;left:0;color:rgba(232,232,227,0.8);}
.nav-links a:hover span.nav-main{transform:translateY(-100%);}
.nav-links a:hover span.nav-dup{transform:translateY(-100%);}

/* Hamburger toggle — SP only */
.nav-toggle{
    display:none;flex-direction:column;justify-content:center;gap:6px;
    width:32px;height:32px;background:none;border:none;cursor:pointer;
    padding:0;position:relative;z-index:1;
}
.nav-toggle span{
    display:block;width:100%;height:1px;background:rgba(232,232,227,0.5);
    transition:transform 0.4s cubic-bezier(0.23,1,0.32,1),opacity 0.3s;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Nav overlay — fullscreen SP menu */
.nav-overlay{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:#0d1528;
    z-index:200;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;
    opacity:0;pointer-events:none;
    transition:opacity 0.5s cubic-bezier(0.23,1,0.32,1);
}
.nav-overlay.open{opacity:1;pointer-events:auto;}
.nav-overlay a{
    font-family:'Jost',sans-serif;font-size:1.4rem;font-weight:400;
    letter-spacing:0.05em;text-transform:uppercase;
    color:rgba(232,232,227,0.6);text-decoration:none;
    transition:color 0.3s;
}
.nav-overlay a:hover{color:#e8e8e3;}

/* Title — fixed above loader during load */
.title-block{
    position:fixed;bottom:0;left:0;right:0;padding:0 36px;z-index:60;pointer-events:none;
}
.title-svg{display:block;width:100%;height:auto;}
.title-svg text,.title-svg-sp text{
    font-family:'Marcellus',serif;
    letter-spacing:-0.01em;
}
.title-svg-sp{display:none;overflow:visible;}

/* Scroll — animated line */
.scroll{
    position:absolute;bottom:20px;right:48px;
    display:flex;align-items:center;gap:10px;opacity:0;
}
.scroll-text{
    font-family:'Inter',sans-serif;font-size:8px;font-weight:300;
    letter-spacing:1.5px;text-transform:uppercase;color:rgba(232,232,227,0.12);
}
.scroll-line{width:24px;height:1px;background:rgba(232,232,227,0.06);position:relative;overflow:hidden;}
.scroll-line::after{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:rgba(232,232,227,0.25);
    animation:scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse{0%{left:-100%;}50%{left:100%;}100%{left:100%;}}

/* Loader overlay */
.loader{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:#0d1528;z-index:55;pointer-events:none;
    will-change:opacity;
}
html.is-loading{overflow:hidden;}

/* ══════════════════════════════════
   Responsive — Tablet
   ══════════════════════════════════ */
@media(max-width:768px){
    .sec{padding:10vh 20px;}
    .about-grid{grid-template-columns:1fr;gap:4vh;}
    .work-scroll{margin:0 -20px;padding:0 20px;}
    .work-img{width:clamp(200px,65vw,280px);}
    .con-grid{grid-template-columns:1fr;}
    .contact-links{flex-direction:column;gap:1.5rem;}
    .footer{padding:8vh 20px 3vh;}

    body{cursor:auto;}
    .cursor{display:none;}
    .nav{padding:16px 20px;}
    .nav-logo{font-size:16px;letter-spacing:1.5px;}
    .nav-links{display:none;}
    .nav-toggle{display:flex;}
    .title-block{padding:0 16px 24px;bottom:0;}
    .title-svg{display:none;}
    .title-svg-sp{display:block;width:calc(100% - 32px);height:auto;}
    .scroll{right:20px;bottom:14px;}
}

/* ══════════════════════════════════
   Responsive — Mobile
   ══════════════════════════════════ */
@media(max-width:480px){
    .sec{padding:8vh 16px;}
    .about-catch{font-size:clamp(1.5rem,6vw,2rem);}
    .about-text{font-size:0.8rem;}
    .work-title{font-size:clamp(2.5rem,12vw,3.5rem);}
    .con-intro{font-size:clamp(1.1rem,4vw,1.3rem);}
    .con-card{padding:2.5rem 2rem;}
    .contact-title{font-size:clamp(2rem,8vw,3rem);}
    .contact-links{gap:1rem;}
    .contact-links a{font-size:0.95rem;}
    .footer{padding:6vh 16px 3vh;}
    .footer-ghost{font-size:clamp(3rem,15vw,5rem);}
}