/*
Theme Name: dev2devs
Theme URI: https://dev2devs.com
Author: dev2devs
Description: Custom scroll-choreographed one-page portfolio theme for dev2devs.com - Flutter & Flutter Web developer. GSAP-powered pinned scenes, horizontal project gallery, dark/light theme flip. All content editable via Appearance > Customize.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dev2devs
*/

/* WP admin bar offset for fixed nav */
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}

:root{
  --bg:#0b0c10;
  --ink:#f1efe9;
  --dim:rgba(241,239,233,.55);
  --line:rgba(241,239,233,.16);
  --blue:#3f8cff;
  --font-x:"Unbounded",sans-serif;
  --font-h:"Archivo",sans-serif;
  --font-m:"JetBrains Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-h);
  font-size:17px;line-height:1.6;
  overflow-x:hidden;
  transition:background .1s linear;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--blue);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;user-select:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
.mono{font-family:var(--font-m)}

/* ---------- grain ---------- */
.grain{position:fixed;inset:-100px;z-index:120;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-30px,20px)}40%{transform:translate(20px,-30px)}60%{transform:translate(-20px,-20px)}80%{transform:translate(30px,30px)}}

/* ---------- cursor ---------- */
.cur{position:fixed;top:0;left:0;z-index:140;width:44px;height:44px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;pointer-events:none;
  transform:translate(-50%,-50%) scale(.22);display:none;will-change:transform}
@media(pointer:fine){.cur{display:block}}

/* ---------- loader ---------- */
.load{position:fixed;inset:0;z-index:200;display:flex}
.load .slat{flex:1;background:#08090c;transform-origin:top}
.load-num{position:fixed;left:4vw;bottom:4vh;z-index:201;font-family:var(--font-x);font-weight:900;
  font-size:clamp(70px,14vw,180px);line-height:1;color:var(--ink);letter-spacing:-.02em}
.load-tag{position:fixed;right:4vw;bottom:5vh;z-index:201;font-family:var(--font-m);font-size:12px;
  letter-spacing:.3em;color:var(--dim);text-transform:uppercase;writing-mode:vertical-rl}
body.ready .load,body.ready .load-num,body.ready .load-tag{pointer-events:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:110;display:flex;align-items:center;justify-content:space-between;
  padding:22px 4vw;mix-blend-mode:difference;color:#fff}
.nav .brand{font-family:var(--font-x);font-weight:700;font-size:15px;letter-spacing:.02em}
.nav .brand b{font-weight:900}
.nav .mid{font-family:var(--font-m);font-size:11px;letter-spacing:.25em;text-transform:uppercase;opacity:.7}
.nav .talk{font-family:var(--font-m);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5);padding:10px 20px;border-radius:100px;transition:background .3s,color .3s}
.nav .talk:hover{background:#fff;color:#000}
@media(max-width:700px){.nav .mid{display:none}}

/* ---------- chapter dots ---------- */
.dots{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:110;display:flex;flex-direction:column;gap:14px;mix-blend-mode:difference}
.dots a{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.6);transition:background .3s,transform .3s;display:block}
.dots a.on{background:#fff;transform:scale(1.4)}
@media(max-width:900px){.dots{display:none}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 4vw 40px;position:relative}
.hero .kick{font-family:var(--font-m);font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-bottom:4vh;display:flex;align-items:center;gap:14px}
.hero .kick::before{content:"";width:44px;height:1px;background:var(--ink);opacity:.5}
.h-line{font-family:var(--font-h);font-weight:900;text-transform:uppercase;
  font-size:clamp(52px,11.5vw,170px);line-height:.92;letter-spacing:-.03em;display:block;overflow:hidden;white-space:nowrap}
.h-line .ch{display:inline-block;will-change:transform}
.h-line .thin{font-weight:400;letter-spacing:-.01em}
.h-line .x{font-family:var(--font-x);font-weight:900;font-size:.82em;vertical-align:baseline;letter-spacing:0}
.h-line .badge{display:inline-flex;align-items:center;gap:9px;vertical-align:middle;
  font-family:var(--font-m);font-size:clamp(10px,1vw,13px);font-weight:500;letter-spacing:.2em;
  border:1px solid var(--line);border-radius:100px;padding:.6em 1.1em;margin:0 .25em;transform:translateY(-.5em)}
.h-line .badge i{width:7px;height:7px;border-radius:50%;background:#41d97e;box-shadow:0 0 12px #41d97e;animation:pp 2s infinite}
@keyframes pp{50%{opacity:.35}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:6vh;flex-wrap:wrap}
.hero-foot p{max-width:44ch;color:var(--dim);font-size:clamp(15px,1.25vw,18px)}
.hero-foot p b{color:var(--ink);font-weight:600}
.hero-facts{font-family:var(--font-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:right;line-height:2.2}
.hero-facts b{color:var(--ink);font-weight:500}
.hero .cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:var(--font-m);font-size:10px;letter-spacing:.4em;color:var(--dim)}

/* ---------- film ---------- */
.film{position:relative}
.film-pin{height:100svh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.film-title{position:absolute;top:11vh;left:0;width:100%;text-align:center;font-family:var(--font-m);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim)}
.phone{position:relative;width:clamp(230px,24vh,300px);aspect-ratio:320/661;border-radius:38px;padding:10px;
  background:linear-gradient(160deg,#23252e,#0e0f14 60%);border:1px solid rgba(241,239,233,.22);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.phone::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:32%;height:15px;background:#07080b;border-radius:0 0 11px 11px;z-index:5}
.phone .scr{position:absolute;inset:10px;border-radius:29px;overflow:hidden}
.phone .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.film .cap{position:absolute;top:50%;transform:translateY(-50%);width:38vw;pointer-events:none}
.film .cap.l{left:4vw;text-align:left}
.film .cap.r{right:4vw;text-align:right}
.film .cap .stack{position:relative;height:1.2em;font-family:var(--font-h);font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,4.6vw,64px);letter-spacing:-.02em;line-height:1}
.film .cap .stack span{position:absolute;top:0;left:0;width:100%;opacity:0}
.film .cap .sub{position:relative;height:1.6em;font-family:var(--font-m);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:14px}
.film .cap .sub span{position:absolute;top:0;left:0;width:100%;opacity:0}
.film-count{position:absolute;bottom:8vh;left:0;width:100%;display:flex;justify-content:center;gap:10px;font-family:var(--font-m);font-size:12px;letter-spacing:.2em;color:var(--dim)}
.film-count b{color:var(--ink);font-weight:500}
.film-bar{position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);width:min(300px,50vw);height:1px;background:var(--line)}
.film-bar i{display:block;height:100%;width:0;background:var(--ink)}
@media(max-width:900px){
  .film .cap{width:88vw;top:auto;transform:none}
  .film .cap.l{left:6vw;top:12vh}
  .film .cap.r{right:6vw;bottom:16vh;text-align:right}
    .phone{width:clamp(200px,52vw,250px)}
}

/* ---------- flip strip ---------- */
.flip{position:relative;padding:22vh 0;overflow:hidden}
.flip .roll{white-space:nowrap;font-family:var(--font-h);font-weight:900;text-transform:uppercase;
  font-size:clamp(70px,15vw,220px);line-height:1;letter-spacing:-.03em;will-change:transform}
.flip .roll span{-webkit-text-stroke:1.5px var(--ink);color:transparent;padding-right:.6em}
.flip .roll span.fill{color:var(--ink);-webkit-text-stroke:0}

/* ---------- gallery ---------- */
.gal{position:relative}
.track{display:block}
.panel{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:var(--pbg);color:var(--pink)}
.panel-in{display:grid;grid-template-columns:1.1fr .9fr;gap:4vw;align-items:center;width:100%;padding:9vh 6vw}
.panel .tag{font-family:var(--font-m);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;opacity:.65;display:flex;gap:18px;align-items:center;margin-bottom:2.4vh}
.panel .tag i{width:8px;height:8px;border-radius:50%;background:#41d97e;box-shadow:0 0 12px #41d97e;animation:pp 2s infinite;display:inline-block}
.panel h3{font-family:var(--font-h);font-weight:900;text-transform:uppercase;font-size:clamp(44px,7vw,108px);line-height:.94;letter-spacing:-.03em;margin-bottom:2.2vh}
.panel h3 .out{-webkit-text-stroke:1.5px var(--pink);color:transparent}
.panel .desc{max-width:52ch;font-size:clamp(15px,1.3vw,18.5px);opacity:.82;margin-bottom:2.6vh}
.panel .rows{font-family:var(--font-m);font-size:12.5px;letter-spacing:.04em;line-height:2;opacity:.75;margin-bottom:3vh}
.panel .rows b{opacity:1;font-weight:500;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:2px;color:var(--pac)}
.panel .go{display:inline-flex;align-items:center;gap:16px;font-family:var(--font-h);font-weight:800;font-size:clamp(18px,1.8vw,26px);letter-spacing:-.01em;position:relative;padding-bottom:6px}
.panel .go::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.panel .go:hover::after{transform:scaleX(1)}
.panel .go .a{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;transition:transform .45s cubic-bezier(.22,1,.36,1),background .3s,color .3s}
.panel .go:hover .a{transform:rotate(-40deg);background:var(--pink);color:var(--pbg);border-color:var(--pink)}
.panel .shots{position:relative;display:flex;justify-content:center;align-items:center;min-height:44vh}
.panel .shots .phone{box-shadow:0 50px 110px -35px rgba(0,0,0,.6)}
.panel .shots .phone img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:cover;object-position:top;border-radius:29px}
.panel .shots .p1{transform:rotate(-8deg) translateX(14%)}
.panel .shots .p2{transform:rotate(7deg) translate(-14%,6%);z-index:2}
.panel .shots .solo{transform:rotate(-4deg)}
.panel .big-idx{position:absolute;right:-1vw;bottom:-4vh;font-family:var(--font-x);font-weight:900;font-size:clamp(120px,22vw,320px);line-height:1;opacity:.06;pointer-events:none;user-select:none}
@media(max-width:900px){
  .panel-in{grid-template-columns:1fr;padding:12vh 6vw;gap:6vh}
  .panel .shots{min-height:0}
  .panel .shots .phone{width:clamp(170px,40vw,230px)}
}

/* ---------- stack ---------- */
.stackp{padding:18vh 4vw 14vh}
.sec-kick{font-family:var(--font-m);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:3vh;display:flex;align-items:center;gap:14px}
.sec-kick::before{content:"";width:44px;height:1px;background:var(--ink);opacity:.5}
.sec-h{font-family:var(--font-h);font-weight:900;text-transform:uppercase;font-size:clamp(40px,6.5vw,98px);letter-spacing:-.03em;line-height:.96;margin-bottom:8vh}
.rowlist{border-top:1px solid var(--line)}
.rowl{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:26px 6px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;cursor:default}
.rowl .nm{font-family:var(--font-h);font-weight:800;font-size:clamp(24px,3.6vw,52px);letter-spacing:-.02em;line-height:1.05;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.rowl .rt{font-family:var(--font-m);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;transition:color .3s}
.rowl::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.22,1,.36,1);z-index:0}
.rowl>*{position:relative;z-index:1}
.rowl:hover::after{transform:scaleY(1)}
.rowl:hover .nm{transform:translateX(18px);color:var(--bg)}
.rowl:hover .rt{color:var(--bg)}

/* ---------- services ---------- */
.serv{padding:14vh 4vw 18vh}
.serv-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 5vw}
.srow{padding:30px 4px;border-bottom:1px solid var(--line);display:flex;gap:22px;align-items:baseline}
.srow .sn{font-family:var(--font-x);font-weight:700;font-size:12px;color:var(--dim);min-width:2.4em}
.srow h4{font-family:var(--font-h);font-weight:800;font-size:clamp(19px,1.9vw,27px);letter-spacing:-.01em;margin-bottom:6px}
.srow p{font-size:15px;color:var(--dim);max-width:40ch}
@media(max-width:800px){.serv-grid{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:16vh 4vw 6vh;position:relative}
.contact .sec-h{margin-bottom:5vh}
.mail{display:inline-block;font-family:var(--font-h);font-weight:900;text-transform:lowercase;
  font-size:clamp(26px,5.6vw,84px);letter-spacing:-.02em;line-height:1.1;margin-bottom:7vh;position:relative}
.mail .lt{display:inline-block;transition:transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i)*22ms)}
.mail:hover .lt{transform:translateY(-.18em)}
.mail::after{content:"";position:absolute;left:0;bottom:-8px;width:100%;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.mail:hover::after{transform:scaleX(1)}
.c-links{display:flex;gap:14px;flex-wrap:wrap}
.c-links a{font-family:var(--font-m);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);padding:14px 26px;border-radius:100px;transition:background .3s,color .3s,border-color .3s}
.c-links a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:10vh;
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* util reveal default states are set by JS; keep page usable without JS */