/*
Theme Name: tagomago
Theme URI: https://tagomago.me
Author: Mauro Rebelo
Description: Clean, continuous, full-bleed personal theme for tagomago.me. Restrained typographic layout carried by a psychedelic image system. Built without page builders.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: All rights reserved
Text Domain: tagomago
*/

:root{
  --ink:#0c0e1a;
  --paper:#f2efe9;
  --muted:#9a93a4;
  --pink:#f2a007;
  --violet:#3a2a6b;
  --cyan:#17a2c6;
  --display:'Space Grotesk',sans-serif;
  --body:'Sora',sans-serif;
  --mono:'Space Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-weight:300;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* spine */
.spine{position:fixed;left:34px;top:0;bottom:0;width:2px;z-index:40;background:linear-gradient(180deg,var(--pink),var(--violet),var(--cyan),var(--pink));background-size:100% 400%;animation:spine 14s linear infinite;opacity:.55;pointer-events:none}
.spine::after{content:"";position:fixed;left:29px;width:12px;height:12px;border-radius:50%;background:var(--pink);box-shadow:0 0 18px 3px var(--pink);top:calc(var(--sp,0) * 1%);transition:top .1s linear;z-index:41}
@keyframes spine{to{background-position:0 -400%}}

/* top bar */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 34px 18px 70px;mix-blend-mode:difference}
.site-header .mark{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:14px;text-transform:lowercase}
.site-header nav{display:flex;gap:26px;font-family:var(--mono);font-size:12px;color:#fff}
.site-header nav a{opacity:.8;transition:opacity .2s}
.site-header nav a:hover{opacity:1}
@media(max-width:720px){.site-header nav{display:none}.site-header{padding-left:60px}.spine{left:22px}.spine::after{left:17px}}

/* section bed */
.bed{position:relative;min-height:100vh;display:flex;align-items:center;isolation:isolate;overflow:hidden}
.bed>.bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1.08)}
.bed>.scrim{position:absolute;inset:0;z-index:-1}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:120px 34px 120px 90px}
@media(max-width:720px){.wrap{padding:96px 26px 96px 46px}}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink)}

/* hero */
#hero .bg{animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.1) translate(0,0)}to{transform:scale(1.22) translate(-3%,-2%)}}
#hero .scrim{background:radial-gradient(120% 90% at 50% 40%,transparent 30%,rgba(12,14,26,.55) 78%,rgba(12,14,26,.92) 100%)}
#hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:100vh;justify-content:center;padding-left:34px}
#hero img.logo{width:min(560px,78vw);filter:drop-shadow(0 8px 40px rgba(0,0,0,.5));opacity:0;animation:rise 1.4s .2s cubic-bezier(.2,.7,.2,1) forwards}
.htag{font-family:var(--mono);font-size:clamp(11px,1.6vw,15px);letter-spacing:.1em;margin-top:26px;color:#fff;opacity:0;animation:rise 1.4s .5s cubic-bezier(.2,.7,.2,1) forwards}
.htag b{color:var(--pink);font-weight:700}
.hsub{font-family:var(--display);font-weight:500;font-size:clamp(15px,2.4vw,22px);letter-spacing:.02em;margin-top:20px;opacity:0;animation:rise 1.4s .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.scrolldot{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* four b's */
.four .panel .bg{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.four .panel:hover .bg{transform:scale(1.15)}
.four .panel .scrim{background:linear-gradient(90deg,rgba(12,14,26,.9) 0%,rgba(12,14,26,.55) 45%,rgba(12,14,26,.15) 100%)}
.four .panel{min-height:78vh}
.bnum{font-family:var(--mono);font-size:13px;color:var(--cyan);letter-spacing:.2em}
.btitle{font-family:var(--display);font-weight:700;font-size:clamp(44px,8vw,104px);line-height:.95;letter-spacing:-.02em;margin:10px 0 18px;color:#fff}
.bline{max-width:520px;font-size:clamp(16px,2vw,20px);color:#e7e5f0;font-weight:300}

/* quote */
#quote .scrim{background:rgba(244,241,233,.6)}
#quote .wrap{text-align:center;max-width:1000px;padding-left:34px}
.qmark{font-family:var(--display);font-weight:700;font-size:80px;color:var(--pink);line-height:.4}
#qtext{font-family:var(--display);font-weight:500;font-size:clamp(26px,4.6vw,52px);line-height:1.15;letter-spacing:-.01em;margin:22px auto;min-height:1.2em;transition:opacity .5s}
#qby{font-family:var(--mono);font-size:14px;letter-spacing:.14em;color:var(--muted);transition:opacity .5s}
#qby b{color:var(--pink)}

/* milestones */
#stats .scrim{background:linear-gradient(180deg,rgba(12,14,26,.85),rgba(12,14,26,.7))}
#stats .wrap{padding-top:90px;padding-bottom:90px}
#stats h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,58px);letter-spacing:-.02em;margin-bottom:6px}
#stats .sublab{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:48px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
@media(max-width:820px){.grid{grid-template-columns:repeat(3,1fr);row-gap:40px}}
@media(max-width:420px){.grid{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(32px,5vw,52px);color:#fff;line-height:1}
.stat .n .plus{color:var(--pink)}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:8px}

/* channels */
#channels{background:var(--ink)}
#channels .wrap{padding-top:110px;padding-bottom:110px}
.sec-eyebrow{margin-bottom:14px}
.sec-h{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,58px);letter-spacing:-.02em;margin-bottom:52px}
.chan{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
@media(max-width:720px){.chan{grid-template-columns:1fr}}
.chan a{background:var(--ink);padding:34px 30px;display:block;transition:background .3s,transform .3s;position:relative}
.chan a:hover{background:#131320}
.chan .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase}
.chan .t{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,30px);margin:10px 0 8px}
.chan .d{color:var(--muted);font-size:15px;max-width:34ch}
.chan .arrow{position:absolute;top:34px;right:30px;color:var(--pink);font-family:var(--mono);opacity:0;transform:translateX(-6px);transition:.3s}
.chan a:hover .arrow{opacity:1;transform:none}

/* hats */
#hats .scrim{background:linear-gradient(180deg,rgba(12,14,26,.72),rgba(12,14,26,.9))}
#hats .wrap{padding-top:110px;padding-bottom:110px}
.hats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:820px){.hats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.hats{grid-template-columns:1fr}}
.hat{border-top:2px solid var(--pink);padding-top:18px}
.hat .role{font-family:var(--display);font-weight:700;font-size:22px}
.hat .say{color:var(--muted);font-size:15px;margin-top:8px;font-style:italic}

/* footer */
.site-footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.08);padding:60px 34px 60px 90px}
@media(max-width:720px){.site-footer{padding-left:46px}}
.foot{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:center}
.foot .fmark{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:20px}
.foot .ftag{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.08em;margin-top:6px}
.social{display:flex;gap:22px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.social a{color:var(--muted);transition:color .2s}
.social a:hover{color:var(--pink)}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  #hero img.logo,.htag,.hsub{opacity:1}
}

/* light quote overrides */
#quote #qtext{color:#17131f}
#quote #qby{color:#6b6472}
#quote #qby b{color:#b9770a}