/* Claybird Labs — studio site */
:root{
  --clay:#B4532F;
  --clay-dark:#8C3F22;
  --clay-light:#E0906A;
  --clay-pale:#F7E5D9;
  --ink:#2A1A12;
  --muted:#6E5B51;
  --line:#EBDDD3;
  --cream:#FDF8F4;
  --white:#FFFFFF;
  --radius:16px;
  --shadow:0 12px 34px rgba(42,26,18,.09);
  --shadow-lift:0 18px 44px rgba(42,26,18,.13);
  --ease:cubic-bezier(.22,.75,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--cream);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}

/* ---------- Nav ---------- */
.nav{
  background:rgba(253,248,244,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  position:sticky;top:0;z-index:50;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.nav.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(42,26,18,.06);
}
.nav-inner{display:flex;align-items:center;gap:32px;height:70px}
.brand{
  display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.16rem;letter-spacing:-.02em;
  transition:opacity .2s var(--ease);
}
.brand:hover{opacity:.78}
.brand .light{font-weight:500;color:var(--clay)}
.brand svg{width:38px;height:38px;flex:none;transition:transform .5s var(--ease-out)}
.brand:hover svg{transform:translateX(3px) rotate(-6deg)}
.nav-links{display:flex;gap:28px;margin-left:auto}
.nav-links a{
  position:relative;color:var(--muted);font-size:.93rem;font-weight:500;
  padding:4px 1px;transition:color .2s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--clay);transform:scaleX(0);transform-origin:right;
  transition:transform .32s var(--ease-out);
}
.nav-links a:hover{color:var(--clay)}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.nav-links a.active{color:var(--ink)}

/* Reading progress — sits on the nav's bottom edge */
.progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--clay-light),var(--clay));
  transform:scaleX(0);transform-origin:left;
  will-change:transform;
}

/* Hamburger */
.menu-toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:34px;height:34px;position:relative;
}
.menu-toggle span{
  position:absolute;left:7px;right:7px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .35s var(--ease-out),opacity .2s linear;
}
.menu-toggle span:nth-child(1){top:11px}
.menu-toggle span:nth-child(2){top:16px}
.menu-toggle span:nth-child(3){top:21px}
.nav.open .menu-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav.open .menu-toggle span:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav.open .menu-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- Buttons ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--clay);color:#fff;font-weight:600;font-size:.96rem;
  padding:12px 22px;border-radius:11px;border:0;cursor:pointer;
  box-shadow:0 4px 14px rgba(180,83,47,.22);
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.28) 48%,transparent 76%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-out);
}
.btn:hover{background:var(--clay-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(180,83,47,.28)}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--white);border-color:var(--clay-light);box-shadow:0 8px 20px rgba(42,26,18,.07)}
.btn .arrow{display:inline-block;transition:transform .3s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- Hero ---------- */
.hero{padding:96px 0 78px;text-align:center;position:relative;overflow:hidden;isolation:isolate}
/* soft drifting glow */
.hero::before{
  content:"";position:absolute;z-index:-2;left:-15%;right:-15%;top:-45%;height:150%;
  background:
    radial-gradient(38% 44% at 24% 34%,rgba(224,144,106,.30),transparent 68%),
    radial-gradient(34% 40% at 78% 24%,rgba(180,83,47,.15),transparent 70%),
    radial-gradient(46% 44% at 56% 86%,rgba(247,229,217,.65),transparent 72%);
  animation:drift 24s ease-in-out infinite alternate;
  pointer-events:none;
}
/* faint grid, faded at the edges */
.hero::after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(180,83,47,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(180,83,47,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%,#000 20%,transparent 78%);
  mask-image:radial-gradient(72% 62% at 50% 42%,#000 20%,transparent 78%);
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,1.5%,0) scale(1.06)}
  100%{transform:translate3d(-2%,-1%,0) scale(1.02)}
}
.hero .mark{width:104px;height:104px;margin:0 auto 26px;display:block}
.hero h1{font-size:clamp(2.3rem,6vw,3.5rem);font-weight:800;letter-spacing:-.035em;line-height:1.08}
.hero h1 .light{font-weight:500;color:var(--clay)}
.hero p{max-width:600px;margin:20px auto 0;color:var(--muted);font-size:1.13rem}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.pill{
  display:inline-block;border:1.5px solid var(--clay-light);color:var(--clay-dark);
  font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;margin-bottom:24px;background:var(--white);
  box-shadow:0 2px 10px rgba(180,83,47,.07);
}
.pill .ping{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--clay);
  margin-right:8px;vertical-align:middle;position:relative;
}
.pill .ping::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--clay);
  animation:ping 2.6s var(--ease-out) infinite;
}
@keyframes ping{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(3.2);opacity:0}
}

/* Hero entrance (JS adds .ready once fonts/first paint settle) */
.js .hero .mark,
.js .hero .pill,
.js .hero h1,
.js .hero p,
.js .hero-cta{opacity:0}
.hero.ready .mark{animation:flyIn 1s var(--ease-out) both,bob 7s ease-in-out 1.1s infinite}
.hero.ready .pill{animation:rise .8s var(--ease-out) .16s both}
.hero.ready h1{animation:rise .8s var(--ease-out) .26s both}
.hero.ready p{animation:rise .8s var(--ease-out) .38s both}
.hero.ready .hero-cta{animation:rise .8s var(--ease-out) .5s both}
@keyframes flyIn{
  0%{opacity:0;transform:translate3d(-26px,10px,0) rotate(-9deg) scale(.9)}
  60%{opacity:1}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-9px) rotate(-2deg)}
}
@keyframes rise{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:none}
}

/* ---------- Scroll reveal ---------- */
.js [data-reveal]{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms);
  will-change:opacity,transform;
}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- Sections ---------- */
section{padding:78px 0;scroll-margin-top:70px}
.section-head{max-width:620px;margin-bottom:40px}
.section-head h2{font-size:clamp(1.7rem,3.6vw,2.25rem);font-weight:800;letter-spacing:-.03em}
.section-head p{color:var(--muted);margin-top:12px;font-size:1.04rem}
.alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- App grid ---------- */
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.app-card{
  position:relative;isolation:isolate;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:14px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.app-card::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius);
  background:radial-gradient(120% 90% at 50% 0%,var(--clay-pale),transparent 62%);
  opacity:0;transition:opacity .4s var(--ease);
}
.app-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--clay-light)}
.app-card:hover::before{opacity:.7}
.app-card .icon{
  width:52px;height:52px;border-radius:13px;display:grid;place-items:center;
  background:var(--clay-pale);color:var(--clay-dark);flex:none;
  transition:transform .4s var(--ease-out),background .3s var(--ease),color .3s var(--ease);
}
.app-card:hover .icon{transform:translateY(-2px) scale(1.06) rotate(-4deg);background:var(--clay);color:#fff}
.app-card .icon svg{width:27px;height:27px}
.app-card h3{font-size:1.22rem;font-weight:750;letter-spacing:-.02em}
.app-card p{color:var(--muted);font-size:.97rem;flex:1}
.tag{
  display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:var(--clay-pale);color:var(--clay-dark);
}
.tag.soon{background:#EFE9E4;color:var(--muted)}
.app-card .more{color:var(--clay);font-weight:600;font-size:.95rem}
.app-card .more i{font-style:normal;display:inline-block;transition:transform .35s var(--ease-out)}
.app-card:hover .more i{transform:translateX(5px)}
.app-card.placeholder{border-style:dashed;background:transparent}
/* Once the grid is three across (3*290 + 2*22 gutters + 48 padding = 962px), the
   placeholder spans the row instead of sitting in it as a fourth app — with three
   apps it would otherwise be stranded alone in an empty row. Below that the grid
   is two across, where it fills the second row on its own, so leave it be. */
@media (min-width:962px){
  .app-card.placeholder{grid-column:1/-1}
}
.app-card.placeholder:hover{transform:none;box-shadow:none;border-color:var(--line)}
.app-card.placeholder:hover::before{opacity:0}
.app-card.placeholder:hover .icon{transform:none;background:var(--clay-pale);color:var(--clay-dark)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
.about-grid p+p{margin-top:16px}
.facts{list-style:none;display:flex;flex-direction:column;gap:14px}
.facts li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:.98rem}
.facts .dot{
  width:7px;height:7px;border-radius:50%;background:var(--clay-light);
  margin-top:9px;flex:none;transition:transform .3s var(--ease-out),background .3s var(--ease);
}
.facts li:hover .dot{transform:scale(1.55);background:var(--clay)}

/* ---------- Contact ---------- */
.contact-box{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:44px 40px;text-align:center;box-shadow:var(--shadow);
}
.contact-box::before{
  content:"";position:absolute;left:50%;top:-60%;width:120%;height:120%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(42% 46% at 50% 50%,rgba(224,144,106,.20),transparent 70%);
  animation:drift 20s ease-in-out infinite alternate;
}
.contact-box>*{position:relative}
.contact-box h2{font-size:1.9rem;font-weight:800;letter-spacing:-.03em}
.contact-box p{color:var(--muted);margin:12px auto 26px;max-width:460px}
.mail{
  position:relative;font-size:1.16rem;font-weight:700;color:var(--clay);
  display:inline-block;padding-bottom:3px;
}
.mail::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--clay-light);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.mail:hover::after{transform:scaleX(1)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#D9C9BF;padding:44px 0 34px;margin-top:8px}
.footer-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.footer .brand{color:#fff;font-size:1.05rem}
.footer .brand .light{color:var(--clay-light)}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{
  position:relative;color:#D9C9BF;font-size:.92rem;transition:color .2s var(--ease);
}
.footer-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out);
}
.footer-links a:hover{color:#fff}
.footer-links a:hover::after{transform:scaleX(1);transform-origin:left}
.copyright{width:100%;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin-top:8px;font-size:.86rem;color:#A89388}

/* ---------- Responsive ---------- */
@media (max-width:840px){
  .about-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:720px){
  .nav-links{
    position:absolute;top:70px;left:0;right:0;background:var(--cream);
    box-shadow:0 14px 28px rgba(42,26,18,.08);
    flex-direction:column;gap:0;padding:0 24px;margin-left:0;
    border-bottom:1px solid transparent;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .42s var(--ease-out),opacity .28s var(--ease),padding .42s var(--ease-out),border-color .3s var(--ease);
  }
  .nav.open .nav-links{
    max-height:260px;opacity:1;pointer-events:auto;
    padding:8px 24px 18px;border-bottom-color:var(--line);
  }
  .nav-links a{
    padding:13px 0;border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;transition:transform .35s var(--ease-out),opacity .35s var(--ease-out),color .2s var(--ease);
  }
  .nav.open .nav-links a{transform:none;opacity:1}
  .nav.open .nav-links a:nth-child(1){transition-delay:.06s}
  .nav.open .nav-links a:nth-child(2){transition-delay:.12s}
  .nav.open .nav-links a:nth-child(3){transition-delay:.18s}
  .nav-links a::after{display:none}
  .menu-toggle{display:block}
  .hero{padding:64px 0 56px}
  section{padding:60px 0}
  .contact-box{padding:34px 22px}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .js .hero .mark,.js .hero .pill,.js .hero h1,.js .hero p,.js .hero-cta{opacity:1}
  .app-card:hover{transform:none}
  .btn:hover{transform:none}
}