/* ringa.lt — Open Runde, light, one accent. */

@font-face{font-family:'Open Runde';src:url('/fonts/OpenRunde-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Runde';src:url('/fonts/OpenRunde-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Open Runde';src:url('/fonts/OpenRunde-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --ground:#FCFCFB;
  --ink:#1E1E1C;
  --ink-62:rgba(30,30,28,.62);
  --ink-72:rgba(30,30,28,.72);
  --ink-45:rgba(30,30,28,.45);
  --ink-12:rgba(30,30,28,.12);
  --accent:#0E6E4E;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--ground);color-scheme:light;-webkit-text-size-adjust:100%}
body{
  background:var(--ground);color:var(--ink);
  font-family:'Open Runde',Inter,system-ui,-apple-system,sans-serif;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* fine grain, felt not seen */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.025;
  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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
button{font:inherit;background:none;border:0;padding:0;color:inherit;cursor:pointer}

.col{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:24px 32px 120px}

/* ---------- top line ---------- */
.topline{display:flex;align-items:center;justify-content:space-between;gap:16px;white-space:nowrap;font-size:15px}
.topline .name{font-weight:500}
.topline nav{display:flex;align-items:center;gap:12px}
.lang{display:inline-flex;align-items:center}
.lang a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 7px}
.lang a[aria-current]{font-weight:500}
.lang a:not([aria-current]){font-weight:400;color:var(--ink-45)}
.lang a:not([aria-current]):hover{color:var(--accent)}
.lang .dot{color:var(--ink-45)}
.write{display:inline-flex;align-items:center;min-height:44px;padding:0 2px 0 7px}

/* ---------- statement ---------- */
.statement{margin-top:19vh}
h1{font-size:34px;font-weight:500;line-height:1.15;letter-spacing:-.03em;margin:0;text-wrap:balance}
.hero-list{font-size:17px;font-weight:400;line-height:1.6;letter-spacing:-.005em;color:var(--ink-62);margin:26px 0 0;max-width:32em}
.hero-list .sep{color:var(--ink-45);padding:0 .1em}

/* ---------- portrait + bubble ---------- */
.portrait-wrap{margin-top:30vh}
.arch-stage{position:relative;width:360px;max-width:100%;margin:0 auto}
.arch{
  width:100%;aspect-ratio:3/4;overflow:hidden;
  border-radius:50% 50% 0 0 / 37.5% 37.5% 0 0;
  background:var(--ink-12);
}
.arch img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%}

/* comic bubble */
.bubble{
  position:absolute;
  top:5%;
  right:-58px;
  display:inline-block;
  padding:11px 16px 12px;
  background:#fff;
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:16px;
  font-size:16px;font-weight:500;letter-spacing:-.012em;line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transform:rotate(3deg);
  transform-origin:0% 100%;
  box-shadow:2px 3px 0 rgba(30,30,28,.14);
  z-index:3;
}
.bubble:hover{color:var(--accent);border-color:var(--accent)}
.bubble:hover .bubble-tail-fill{fill:#fff}
.bubble:hover .bubble-tail-line{stroke:var(--accent)}
/* tail: points down-left, toward his face */
.bubble-tail{position:absolute;left:14px;bottom:-15px;width:26px;height:17px;overflow:visible}
.bubble-tail-fill{fill:#fff}
.bubble-tail-line{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}

@media (max-width:720px){
  .bubble{right:auto;left:50%;top:-16px;transform:translateX(-42%) rotate(3deg)}
  .bubble-tail{left:20px}
}

/* ---------- sections ---------- */
.block{margin-top:30vh}
.eyebrow{font-size:14px;font-weight:500;color:var(--ink-45);margin:0}
.work{display:flex;flex-direction:column;gap:96px;margin-top:64px}
.work h3{font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.3;margin:0}
.body{font-size:17px;line-height:1.6;letter-spacing:-.005em;color:var(--ink-72);margin:14px 0 0;max-width:33em}
.spec{font-size:14px;color:var(--ink-45);margin:16px 0 0}
.stack{font-size:17px;line-height:1.6;letter-spacing:-.005em;color:var(--ink-72);margin:40px 0 0;max-width:34em}
.stack strong{font-weight:500;color:var(--ink)}

/* ---------- contact ---------- */
.contact-lead{font-size:20px;font-weight:500;letter-spacing:-.015em;margin:0}
.contact-row{display:flex;align-items:flex-end;flex-wrap:wrap;column-gap:26px;row-gap:18px;margin-top:34px}
.email{font-size:40px;font-weight:600;letter-spacing:-.035em;line-height:1.1;text-decoration:none;display:inline-block}
.email:hover{color:var(--accent)}
.copy{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin:0 0 -9px -10px;font-size:14px;color:var(--ink-45);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em}
.copy:hover{color:var(--accent)}
.copy .is-copied{color:var(--accent)}
.place{font-size:17px;line-height:1.75;letter-spacing:-.005em;color:var(--ink-62);margin:34px 0 0}
footer{margin-top:26vh;font-size:14px;color:var(--ink-45)}

/* ================= MOTION =================
   Everything below only engages when JS adds .js to <html>.
   No JS  ->  no hidden content, no loader. Content is visible by default. */

/* word-level reveal */
.js .reveal .w{display:inline-block;will-change:transform,filter,opacity}
.js .reveal:not(.in) .w{opacity:0;transform:translateY(18px);filter:blur(7px)}
.js .reveal.in .w{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1),filter .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
}
/* block-level reveal */
.js .rise{opacity:0;transform:translateY(14px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0ms)}
/* arch grows open */
.js .arch-stage .arch{clip-path:inset(0 0 0 0)}
.js .portrait-wrap:not(.in) .arch{transform:scale(1.06);opacity:0}
.js .portrait-wrap.in .arch{transform:none;opacity:1;transition:transform 1.1s cubic-bezier(.22,.61,.36,1),opacity .9s ease-out}
/* AFTERBURN: the loader performs the arch's entrance itself, so the page holds still.
   Must come AFTER .portrait-wrap.in .arch — identical specificity, later wins. */
.js .portrait-wrap.boot-hold .arch{transform:none;opacity:1;transition:none}
.js .portrait-wrap.boot-hold .bubble{opacity:0;animation:afBubbleHeal 1ms linear 3s forwards}
@keyframes afBubbleHeal{to{opacity:1}}
.js .portrait-wrap.in.bubble-now .bubble{animation-delay:.1s}
/* bubble pops after the portrait */
.js .portrait-wrap:not(.in) .bubble{opacity:0;transform:rotate(3deg) scale(.6)}
.js .portrait-wrap.in .bubble{
  opacity:1;
  animation:pop .5s cubic-bezier(.34,1.56,.64,1) .75s backwards;
}
@keyframes pop{
  0%{opacity:0;transform:rotate(3deg) scale(.5)}
  70%{opacity:1;transform:rotate(-2deg) scale(1.06)}
  100%{opacity:1;transform:rotate(3deg) scale(1)}
}
@media (max-width:720px){
  .js .portrait-wrap:not(.in) .bubble{transform:translateX(-42%) rotate(3deg) scale(.6)}
  @keyframes pop{
    0%{opacity:0;transform:translateX(-42%) rotate(3deg) scale(.5)}
    70%{opacity:1;transform:translateX(-42%) rotate(-2deg) scale(1.06)}
    100%{opacity:1;transform:translateX(-42%) rotate(3deg) scale(1)}
  }
}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .col{padding-left:22px;padding-right:22px}
  .block,.portrait-wrap{margin-top:22vh}
  h1{font-size:27px;letter-spacing:-.026em}
  h1 br{display:none}
  .hero-list{font-size:16.5px;margin-top:22px}
  .email{font-size:30px;letter-spacing:-.03em}
  .email br{display:none}
  .arch-stage{width:62vw}
  .body,.stack{font-size:16.5px}
}
@media (max-width:374px){.topline{font-size:14px}}

/* ---------- reduced motion: show everything, instantly ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal:not(.in) .w,
  .js .reveal.in .w{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .js .rise,.js .rise.in{opacity:1 !important;transform:none !important;transition:none !important}
  .js .portrait-wrap .arch,
  .js .portrait-wrap:not(.in) .arch{opacity:1 !important;transform:none !important;transition:none !important}
  .js .portrait-wrap .bubble,
  .js .portrait-wrap:not(.in) .bubble{opacity:1 !important;transform:rotate(3deg) !important;animation:none !important}
  #af{display:none !important}
}


/* ================= FLIGHT — the scroll is the launch =================
   Default (no JS / reduced motion): a normal static document.
   html.flight (added by flight.js) enables the choreography. */
.page{position:relative;z-index:1}
.wrap640{max-width:640px;margin:0 auto;padding:24px 32px 0}
footer.wrap640{padding-bottom:90px;font-size:14px;color:var(--ink-45)}

.f-hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:0 6vw}
.f-hero h1{font-size:clamp(44px,8vw,96px);font-weight:600;letter-spacing:-.04em;line-height:1.02;margin:0;max-width:11em}
.f-hint{margin-top:5vh;font-size:20px;color:var(--accent)}
.f-hint .dn{display:inline-block}
.flight .f-hint .dn{animation:fdn 1.6s ease-in-out infinite}
@keyframes fdn{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

.flight .track{height:560vh}
.flight .stage{position:sticky;top:0;height:100vh;overflow:hidden}

.layer{position:relative;margin:18vh 0;padding:0 4vw}
.flight .layer{position:absolute;left:0;right:0;top:0;margin:0;transform:translate3d(0,115vh,0);will-change:transform}
.layer .ix{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--accent);margin:0 0 6px 4px}
.layer .wd{font-size:var(--wfs,clamp(56px,15vw,205px));font-weight:600;letter-spacing:-.045em;line-height:.96;color:rgba(30,30,28,.10);white-space:nowrap}
.layer:nth-child(odd){text-align:left}
.layer:nth-child(even){text-align:right}
.layer:nth-child(even) .ix{margin:0 4px 6px 0}

.ship{width:min(300px,56vw);margin:10vh auto}
.flight .ship{position:absolute;left:50%;top:0;margin:0;transform:translate3d(-50%,115vh,0);will-change:transform;z-index:3}
.ship-tilt{will-change:transform}
.ship-bob{position:relative}
.flight .ship-bob{animation:fbob 4.2s ease-in-out infinite alternate}
@keyframes fbob{from{transform:translateY(-4px)}to{transform:translateY(4px)}}
.plume{position:absolute;left:50%;bottom:-92px;width:58px;height:96px;transform:translateX(-50%);
  transform-origin:50% 0;opacity:0;will-change:transform,opacity;display:none;z-index:-1}
.flight .plume{display:block}
.plume i{position:absolute;inset:0;border-radius:46% 46% 50% 50%/22% 22% 78% 78%;filter:blur(5px);
  background:
    radial-gradient(50% 34% at 50% 12%,#FFF6E8 0%,rgba(255,246,232,0) 70%),
    linear-gradient(#FFE9BF 0%,#FFB43C 30%,#F2761B 62%,rgba(242,118,27,0) 96%);
  animation:fflick .13s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes fflick{from{transform:scaleY(.93) scaleX(.97)}to{transform:scaleY(1.07) scaleX(1.03)}}

.alt{display:none}
.flight .alt{display:block;position:absolute;right:4.5vw;top:14vh;bottom:14vh;width:1px;background:var(--ink-12);z-index:4}
.alt-tick{position:absolute;right:-1px;width:3px;height:26px;background:var(--accent);will-change:transform;transform:translateY(100%)}
.alt-num{position:absolute;top:-34px;right:-6px;font-size:13px;font-weight:500;color:var(--ink-45);
  white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;min-width:90px}

.streaks{display:none}
.flight .streaks{display:block;position:absolute;inset:0;opacity:0;will-change:opacity;pointer-events:none;z-index:2}
.streaks i{position:absolute;top:-45vh;width:1px;background:rgba(30,30,28,.14);animation:fstr linear infinite}
@keyframes fstr{from{transform:translateY(0)}to{transform:translateY(190vh)}}

.orbit{max-width:640px;margin:0 auto;padding:22vh 32px 0}
.orbit.gap-top{padding-top:26vh}
.orbit.pad-bottom{padding-bottom:16vh}
.flight .work article{will-change:transform}
.flight .work article:nth-child(1){animation:ffloat 7s ease-in-out infinite alternate}
.flight .work article:nth-child(2){animation:ffloat 8.5s ease-in-out .9s infinite alternate}
@keyframes ffloat{from{transform:translateY(0)}to{transform:translateY(-9px)}}

.email.touchdown::after{content:"";position:absolute;inset:-14px -18px;border:1px solid var(--accent);
  border-radius:18px;opacity:0;animation:fring .8s cubic-bezier(.16,.9,.3,1) .1s}
@keyframes fring{0%{opacity:.55;transform:scale(.92)}100%{opacity:0;transform:scale(1.35)}}
.email{position:relative}

@media (max-width:560px){
  .f-hero h1{font-size:clamp(38px,11vw,60px)}
  .ship{width:46vw}
  .flight .alt{right:5vw}
  .plume{bottom:-70px;width:44px;height:74px}
}
@media (prefers-reduced-motion:reduce){
  .flight .f-hint .dn,.plume i,.flight .ship-bob,.flight .work article{animation:none !important}
}