/* Calibra Technologies — calibra.tech */

@font-face{font-family:'Bricolage Grotesque';src:url('fonts/BricolageGrotesque-Variable.ttf') format('truetype');font-weight:200 800;font-display:swap;}
@font-face{font-family:'Schibsted Grotesk';src:url('fonts/SchibstedGrotesk-Variable.ttf') format('truetype');font-weight:400 900;font-display:swap;}
@font-face{font-family:'Reddit Mono';src:url('fonts/RedditMono-Variable.ttf') format('truetype');font-weight:200 900;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap;}

:root{
  --void:#0C0E10;
  --paper:#F4F1EA;
  --signal:#FF4D00;
  --ultraviolet:#5B3DF5;
  --ink:#16161A;
  --surface:#14171B;
  --border:rgba(244,241,234,.1);
  --text:rgba(244,241,234,.92);
  --body:rgba(244,241,234,.72);
  --muted:rgba(244,241,234,.55);
  --disp:'Bricolage Grotesque',sans-serif;
  --sans:'Schibsted Grotesk',sans-serif;
  --mono:'Reddit Mono',monospace;
  --ease:cubic-bezier(.22,.9,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* ---------- custom cursor — Paper arrow, Signal on anything clickable ---------- */
body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpolygon points='5,2 5,19 9.6,14.8 12.5,21.5 15.4,20.2 12.5,13.6 18.6,13.6' fill='%23F4F1EA' stroke='%230C0E10' stroke-width='1.4'/%3E%3C/svg%3E") 5 2, auto;}
a,button,.btn,.marquee{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpolygon points='5,2 5,19 9.6,14.8 12.5,21.5 15.4,20.2 12.5,13.6 18.6,13.6' fill='%23FF4D00' stroke='%23F4F1EA' stroke-width='1.4'/%3E%3C/svg%3E") 5 2, pointer;}
body{background:var(--void);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--signal);color:#fff;}

#starfield{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;}
.nav,main,.footer,.marquee{position:relative;z-index:1;}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:22px clamp(20px,4vw,56px);transition:background .4s var(--ease),padding .4s var(--ease),backdrop-filter .4s;}
.nav.scrolled{background:rgba(12,14,16,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.nav-logo{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em;}
.nav-logo svg{margin-top:-6px;transition:transform .4s var(--ease);}
.nav-logo:hover svg{transform:rotate(90deg);}
.nav-links{display:flex;gap:clamp(18px,3vw,40px);font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.nav-links a{position:relative;transition:color .2s;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--signal);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);}
.nav-links a:hover{color:var(--text);}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}

/* ---------- type helpers ---------- */
.signal{color:var(--signal);font-style:normal;}
.lbl{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:block;}
.mono-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.greek{font-family:var(--sans);font-weight:700;color:var(--text);}

/* ---------- hero + boot animations ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0 clamp(20px,4vw,56px);position:relative;}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;}
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(52px,10.5vw,158px);line-height:.97;letter-spacing:-.035em;}
.hero .mask{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;}
.hero .line{display:block;transform:translateY(112%);animation:riseup 1s var(--ease) forwards;}
.hero .l1{animation-delay:.15s;}
.hero .l2{animation-delay:.3s;}
@keyframes riseup{to{transform:translateY(0);}}
.boot{opacity:0;transform:translateY(18px);animation:bootin .8s var(--ease) forwards;}
.boot.b2{animation-delay:.75s;}
.boot.b3{animation-delay:.95s;}
.kicker.boot{animation-delay:.05s;}
@keyframes bootin{to{opacity:1;transform:none;}}
/* GSAP hero intro — .js pre-hides; script.js removes .js when GSAP is absent or motion is reduced,
   which hands the hero back to the CSS boot animations above */
.js .hero .line{animation:none;transform:none;visibility:hidden;}
.js .kicker.boot,.js .hero-sub.boot,.js .hero .btn.boot,.js .scroll-hint{animation:none;opacity:0;}
/* padded char boxes (with compensating margins) give glyph ink headroom when the
   browser rasterizes an animating char to a layer — Safari clips ink at box edges.
   No will-change: a permanent layer would clip overhanging glyphs at rest. */
.hero .ch{padding:.1em;margin:-.1em;}
.hero .dot{position:relative;display:inline-block;}
.hero-sub{margin-top:32px;font-size:clamp(16px,1.6vw,21px);color:var(--body);}
.hero .btn{margin-top:40px;}
.scroll-hint{position:absolute;bottom:34px;left:clamp(20px,4vw,56px);width:2px;height:52px;background:var(--border);overflow:hidden;}
.scroll-hint span{display:block;width:2px;height:16px;background:var(--signal);animation:drip 2.2s infinite;}
@keyframes drip{0%{transform:translateY(-18px)}70%{transform:translateY(54px)}100%{transform:translateY(54px)}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:18px 0;background:rgba(20,23,27,.35);}
.marquee-track{display:flex;align-items:center;gap:38px;width:max-content;animation:ticker 28s linear infinite;
  font-family:var(--mono);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.marquee-track i{width:10px;height:10px;background:var(--signal);display:inline-block;flex:none;}
.marquee-track i:nth-of-type(3n){background:var(--ultraviolet);}
@keyframes ticker{to{transform:translateX(-50%);}}
.marquee:hover .marquee-track{animation-play-state:paused;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--signal);color:#fff;font-weight:700;font-size:15px;
  padding:14px 24px;border-radius:8px;transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(255,77,0,.35);}
.btn svg{transition:transform .25s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn.ghost{background:transparent;border:1px solid rgba(244,241,234,.3);color:var(--text);}
.btn.ghost:hover{border-color:var(--signal);color:var(--signal);box-shadow:none;}
.btn.big{font-family:var(--disp);font-size:clamp(14px,2.2vw,26px);padding:18px clamp(16px,3vw,34px);max-width:100%;}

/* ---------- sections ---------- */
.section{padding:clamp(90px,12vh,150px) clamp(20px,4vw,56px);max-width:1280px;margin:0 auto;}
.section-head{margin-bottom:clamp(48px,7vh,84px);}
.section-head h2,.contact h2{font-family:var(--disp);font-weight:700;font-size:clamp(40px,6.5vw,88px);line-height:1.02;letter-spacing:-.03em;margin-top:14px;}

/* ---------- app rows ---------- */
.app-row{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(36px,6vh,64px) 0;border-top:1px solid var(--border);}
.app-row.flip .app-media{order:2;}
.app-row.flip .app-copy{order:1;}
.app-media{position:relative;will-change:transform;}
.app-title{display:flex;align-items:center;gap:16px;margin:16px 0 10px;}
.app-icon-a{width:56px;height:56px;flex:none;border-radius:13px;background:linear-gradient(#F6F1E8,#EFE8D9);
  display:inline-flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;
  font-size:38px;line-height:1;letter-spacing:-.05em;color:#1A1A19;box-shadow:0 4px 24px rgba(0,0,0,.5);
  padding-bottom:6px;}
.app-icon-a i{font-style:normal;color:#B85B3F;}
.app-copy h3{font-family:var(--disp);font-weight:700;font-size:clamp(44px,5.5vw,76px);letter-spacing:-.03em;line-height:1;}
.app-row.flip h3{margin:16px 0 10px;}
.app-lede{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2vw,24px);color:var(--text);margin-bottom:14px;}
.app-copy p{color:var(--body);max-width:52ch;}
.app-actions{display:flex;align-items:center;gap:20px;margin-top:28px;flex-wrap:wrap;}
.wip-chip{position:absolute;top:18px;left:18px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--ultraviolet);color:#fff;padding:8px 14px;border-radius:6px;}

/* ---------- phone (real Apart screenshot) ---------- */
.apart-media{display:flex;justify-content:center;padding:34px 0;}
.phone{width:min(300px,72%);border-radius:44px;padding:12px;background:#0A0A0B;
  border:1px solid rgba(244,241,234,.16);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(184,91,63,.22);
  transform:rotate(-2.5deg);transition:transform .5s var(--ease),box-shadow .5s var(--ease);animation:hover-float 7s ease-in-out infinite;}
.phone:hover{transform:rotate(0deg) scale(1.02);box-shadow:0 34px 90px rgba(0,0,0,.65),0 0 80px rgba(184,91,63,.32);}
.phone img{border-radius:33px;}
.phone .screen{position:relative;border-radius:33px;overflow:hidden;}

/* ---- live overlays on the Apart screenshot ---- */
.ov{position:absolute;pointer-events:none;}
/* histamine beaker bubbles */
.bubbles{left:12%;top:31.8%;width:16%;height:5.2%;overflow:hidden;}
.bubbles i{position:absolute;bottom:-8%;border-radius:50%;background:rgba(246,241,232,.75);
  animation:bubble-rise 3.6s ease-in infinite;}
.bubbles i:nth-child(1){left:18%;width:9%;aspect-ratio:1;animation-delay:0s;}
.bubbles i:nth-child(2){left:46%;width:7%;aspect-ratio:1;animation-delay:1.1s;}
.bubbles i:nth-child(3){left:66%;width:10%;aspect-ratio:1;animation-delay:2s;}
.bubbles i:nth-child(4){left:32%;width:6%;aspect-ratio:1;animation-delay:2.8s;animation-duration:3s;}
@keyframes bubble-rise{
  0%{transform:translateY(0);opacity:0;}
  12%{opacity:.85;}
  78%{opacity:.7;}
  100%{transform:translateY(-620%);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .bubbles i{animation:none;opacity:.6;transform:translateY(-300%);}
}
@keyframes hover-float{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* ---------- pixel art panels ---------- */
.pixel-panel{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;
  aspect-ratio:4/3.4;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pixel-panel.uv-glow::before{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 60% at 70% 30%,rgba(91,61,245,.16),transparent 70%);}
.px-art{width:78%;height:auto;position:relative;}
.float-a{animation:hover-float 8s ease-in-out infinite;}
.float-b{animation:hover-float 9s ease-in-out infinite reverse;}
.blink{animation:blink 2.6s steps(1) infinite;}
.blink.d2{animation-delay:.9s;}
.blink.d3{animation-delay:1.7s;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.carry{animation:carry 5s ease-in-out infinite;}
@keyframes carry{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,-10px)}}

/* ---------- studio ---------- */
.studio-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;}
.studio-lede{font-family:var(--disp);font-weight:600;font-size:clamp(22px,2.6vw,32px);line-height:1.3;color:var(--text);margin-bottom:20px;}
.studio-copy p{color:var(--body);}
.studio-media{will-change:transform;}
.studio-media .pixel-panel{aspect-ratio:4/4.2;}
.values{list-style:none;margin-top:36px;display:grid;gap:16px;}
.values li{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:baseline;border-top:1px solid var(--border);padding-top:16px;}
.values b{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--text);}
.values span{color:var(--body);font-size:15px;}

/* ---------- contact / footer ---------- */
.contact-sub{color:var(--body);margin:22px 0 34px;font-size:18px;}
.footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:32px clamp(20px,4vw,56px);border-top:1px solid var(--border);}
.footer-logo{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.02em;}
.footer-logo svg{margin-top:-5px;}
.footer-meta{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}

/* ---------- scroll reveals (staggered) ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal-group > *{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * .09s);}
.reveal-group.in > *{opacity:1;transform:none;}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-group > *,.boot,.hero .line{opacity:1;transform:none;transition:none;animation:none;}
  .scroll-hint span,.marquee-track,.phone,.float-a,.float-b,.blink,.carry{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .app-row,.studio-grid{grid-template-columns:1fr;}
  .app-row.flip .app-media{order:0;}
  .app-row.flip .app-copy{order:1;}
  .values li{grid-template-columns:1fr;gap:4px;}
  .nav-links{gap:16px;}
  .phone{transform:none;}
}