/* Shelby Cinca: shared site system (v3, all-dark) */

@font-face{
  font-family:'0xProto Mono';
  src: url('fonts/0xProtoNerdFontMono-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'0xProto Mono';
  src: url('fonts/0xProtoNerdFontMono-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'0xProto';
  src: url('fonts/0xProtoNerdFontPropo-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'0xProto';
  src: url('fonts/0xProtoNerdFontPropo-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'0xProto';
  src: url('fonts/0xProtoNerdFontPropo-Italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Big Blue Terminal';
  src: url('fonts/BigBlueTermPlusNerdFontMono-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --blue: #3d3dff;
  --blue-deep: #1414b8;
  --bg: #08080a;
  --bg-raised: #101013;
  --text: #f1f0ec;
  --text-dim: #8f8f99;
  --rule: rgba(255,255,255,0.10);
  --gutter: 24px;
  --maxw: 1120px;
  --hero-name-size: clamp(48px, 11.5vw, 148px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family:'0xProto', ui-sans-serif, system-ui, sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

::selection{ background: var(--blue); color: #ffffff; }

.mono{ font-family:'0xProto Mono', ui-monospace, monospace; }
a{ color:inherit; }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }
img{ max-width:100%; display:block; }

.wrap{ max-width:var(--maxw); width:100%; margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- client-side page transitions ---------- */

#view{ position:relative; }

#view.view-exit-left{ animation: viewExitLeft 0.22s ease-in both; }
#view.view-exit-right{ animation: viewExitRight 0.22s ease-in both; }
#view.view-enter-right{ animation: viewEnterRight 0.32s cubic-bezier(.22,.61,.36,1) both; }
#view.view-enter-left{ animation: viewEnterLeft 0.32s cubic-bezier(.22,.61,.36,1) both; }

@keyframes viewExitLeft{ to{ transform:translateX(-8%); } }
@keyframes viewExitRight{ to{ transform:translateX(8%); } }
@keyframes viewEnterRight{ from{ transform:translateX(10%); } to{ transform:translateX(0); } }
@keyframes viewEnterLeft{ from{ transform:translateX(-10%); } to{ transform:translateX(0); } }

@media (prefers-reduced-motion: reduce){
  #view.view-exit-left, #view.view-exit-right, #view.view-enter-right, #view.view-enter-left{ animation:none !important; }
}

/* a quick color flash on navigation: a fast pass through hue kept mostly in
   the blue/purple band (not a full rainbow sweep), snapping back to normal.
   filter-based, applied to .section-inner (the content: text, photos,
   badges, logos) rather than #view itself, since the near-black section
   backgrounds carry their own tiny blue bias that rotates into green at
   these angles if included. Leads with sepia() rather than relying on
   saturate() alone: saturate() only amplifies color bias a pixel already
   has, which is nothing on a perfectly neutral white (e.g. the hero's pure
   #ffffff text); sepia() injects a warm tone unconditionally regardless of
   the input, giving hue-rotate something to work with either way. */
@keyframes rainbowFlash{
  0%{ filter: sepia(0) saturate(1) hue-rotate(0deg) brightness(1); }
  22%{ filter: sepia(0.85) saturate(8) hue-rotate(240deg) brightness(1.85); }
  100%{ filter: sepia(0) saturate(1) hue-rotate(360deg) brightness(1); }
}
#view.view-landing .section-inner{
  animation: rainbowFlash 0.3s ease-out both;
}

/* the hero is persistent (it never slides like #view does), so on
   navigation it gets its own, much gentler cue instead of the content's
   color flash: a fast, low brightness fade plus an actual ripple drop
   (see js/site.js pingHeroRipple), which reads as "the water noticed"
   rather than a jarring color shift on an already-saturated blue surface. */
@keyframes heroLandFade{
  0%{ filter: brightness(1.22); }
  100%{ filter: brightness(1); }
}
.hero.flash-rainbow{
  animation: heroLandFade 0.35s ease-out both;
}

/* on top of that whole-hero fade, the white text specifically also gets the
   same blue/purple rainbow shift the content uses, since text (near-neutral
   to start) takes the color shift cleanly, unlike the already-blue
   background behind it */
.hero.flash-rainbow .hero-name,
.hero.flash-rainbow .hero-title,
.hero.flash-rainbow .pillnav a{
  animation: rainbowFlash 0.34s ease-out both;
}

@media (prefers-reduced-motion: reduce){
  #view.view-landing .section-inner, .hero.flash-rainbow,
  .hero.flash-rainbow .hero-name, .hero.flash-rainbow .hero-title, .hero.flash-rainbow .pillnav a{
    animation:none !important;
  }
}

/* ---------- ticker ---------- */

.ticker{
  background: var(--bg);
  color: var(--text);
  overflow:hidden;
  white-space:nowrap;
  border-bottom: 1px solid var(--blue);
}
.ticker-track{
  display:inline-block;
  font-family:'Big Blue Terminal', 'Courier New', monospace;
  font-size:15px;
  letter-spacing:0.06em;
  padding: 6px 0;
  animation: ticker 26s linear infinite;
}
.ticker-track span{ padding: 0 1.4em; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ---------- hero ---------- */

.hero{
  background: var(--blue) url('images/hero-blue.png');
  background-size: cover;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 18px var(--gutter);
  font-family:'0xProto Mono', monospace;
  font-size:12px;
  letter-spacing:0.1em;
  max-width:var(--maxw);
  margin-inline:auto;
  position:relative;
  z-index:2;
}
.hero-top a{ text-decoration:none; }
.hero-top a:hover{ text-decoration:underline; }

.hero-top-right{
  display:flex;
  align-items:center;
  gap: 16px;
}

.sound-toggle{
  font-family:'0xProto Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.55);
  color: #ffffff;
  padding: 5px 10px;
  cursor:pointer;
  line-height:1;
}
.sound-toggle:hover{ background: rgba(255,255,255,0.14); }
.sound-toggle[aria-pressed="true"]{
  background: #ffffff;
  color: var(--blue);
  border-color: #ffffff;
}

.hero-main{
  max-width:var(--maxw);
  margin-inline:auto;
  padding: 30px var(--gutter) 46px var(--gutter);
  position:relative;
  z-index:2;
}

.hero-identity{
  display:flex;
  flex-wrap: wrap;
  align-items:flex-start;
  gap: clamp(12px, 2.4vw, 28px) 24px;
}

.hero-portrait{
  position:relative;
  top: 6px;
  height: 250px;
  width: 250px;
  flex-shrink:0;
  border: 2px solid #ffffff;
  overflow:hidden;
}

.hero-portrait img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-portrait .sharp{ image-rendering:auto; }

.hero-portrait .pixel{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: pixel-reveal 1s ease-in forwards;
}

@keyframes pixel-reveal{
  0%{ opacity:1; }
  35%{ opacity:1; }
  100%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .hero-portrait .pixel{ animation:none; opacity:0; }
}

.hero-name{
  font-family:'Big Blue Terminal', 'Courier New', monospace;
  font-weight:400;
  text-transform:uppercase;
  font-size: var(--hero-name-size);
  line-height:0.92;
  letter-spacing:-0.01em;
  margin:0;
  min-width:0;
}

.hero-title{
  font-family:'Big Blue Terminal', 'Courier New', monospace;
  font-weight:400;
  text-transform:uppercase;
  font-size: clamp(20px, 3.4vw, 34px);
  line-height:1.1;
  letter-spacing:0.02em;
  margin: 10px 0 28px 0;
  opacity:0.92;
}

.pillnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-family:'0xProto Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.06em;
}
.pillnav a{
  display:inline-block;
  border: 1.5px solid #ffffff;
  border-radius:999px;
  padding: 8px 18px;
  text-decoration:none;
  text-transform:uppercase;
}
.pillnav a[aria-current="page"]{
  background: #ffffff;
  color: var(--blue);
}
.pillnav a:not([aria-current="page"]):hover{
  background: rgba(255,255,255,0.14);
}

/* ---------- sections ---------- */

.section{
  padding: 60px var(--gutter);
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
.section.raised{ background: var(--bg-raised); position:relative; overflow:hidden; }
.section-inner{ max-width: 720px; margin-inline:auto; position:relative; z-index:1; }
.section-inner.wide{ max-width: var(--maxw); }

.starfield-holder{
  position:absolute;
  inset:0;
  z-index:0;
  opacity: 0.7;
  pointer-events:none;
}
.starfield-holder canvas{ display:block; width:100% !important; height:100% !important; }

h2.section-title{
  font-family:'Big Blue Terminal', 'Courier New', monospace;
  font-weight:400;
  text-transform:uppercase;
  font-size: clamp(26px, 5vw, 42px);
  line-height:1;
  margin: 0 0 28px 0;
  letter-spacing:0;
  color: var(--text);
}
h2.section-title.small{ font-size:22px; margin-top:48px; }

.section-logo{
  width:72px;
  height:72px;
  margin-bottom:16px;
  border: 2px solid rgba(255,255,255,0.22);
}

p{ margin:0 0 20px 0; color: var(--text); }
p:last-child{ margin-bottom:0; }

.lede{ font-size:19px; color: var(--text-dim); }

.section-meta{
  font-family:'0xProto Mono', monospace;
  font-size:12.5px;
  color: var(--text-dim);
  margin: 0 0 18px 0;
}

.pull{
  font-style:italic;
  font-size:21px;
  color: var(--text);
  margin: 28px 0;
  padding-left: 18px;
  border-left: 2px solid var(--blue);
}

/* images */

figure{ margin: 28px 0; }
figure img{ border: 2px solid rgba(255,255,255,0.22); }
figcaption{
  font-family:'0xProto Mono', monospace;
  font-size:12.5px;
  color: var(--text-dim);
  margin-top:8px;
  line-height:1.5;
}

/* catalog grid (graphic design) */

.catalog{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  margin-top: 32px;
}
@media (max-width: 760px){ .catalog{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .catalog{ grid-template-columns: 1fr; } }
.catalog figure{ margin:0; }
.catalog img{ width:100%; aspect-ratio: 3/2; object-fit: cover; border: 2px solid rgba(255,255,255,0.22); }

/* photo gallery (portrait crops, e.g. the Love Hultén photos) */

.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
@media (max-width: 760px){ .gallery{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .gallery{ grid-template-columns: 1fr; } }
.gallery figure{ margin:0; }
.gallery img{ width:100%; aspect-ratio: 3/4; object-fit: cover; border: 2px solid rgba(255,255,255,0.22); }

/* fixed 2-up, for pairs of photos with mixed orientations: match on height,
   not width, so a landscape and a portrait shot sit on the same baseline
   instead of one towering over the other */
.gallery.two-up{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:24px;
}
.gallery.two-up figure{ margin:0; flex:none; max-width:100%; }
.gallery.two-up img{
  width:auto;
  height:clamp(160px, 24vw, 270px);
  max-width:100%;
  aspect-ratio:auto;
  object-fit:contain; /* safety net: if max-width clamps it on a narrow screen, scale down cleanly instead of stretching */
  border: 2px solid rgba(255,255,255,0.22);
}

.gallery-caption{
  font-family:'0xProto Mono', monospace;
  font-size:12.5px;
  color: var(--text-dim);
  margin: 14px 0 0 0;
  line-height:1.5;
}

/* equation strip */

.equation{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap: 22px;
  margin: 8px 0 0 0;
  font-family:'0xProto Mono', monospace;
}
.eq-circle{
  width:140px; height:140px;
  border-radius:50%;
  border: 1.5px solid var(--blue);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-size:12px;
  letter-spacing:0.05em;
  padding: 10px;
  text-transform:uppercase;
  color: var(--text);
}
.eq-sign{ font-size:28px; color: var(--blue); }
.eq-box{
  border: 1.5px solid var(--blue);
  padding: 20px 26px;
  text-align:center;
  font-size:12px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  max-width:160px;
  color: var(--text);
}

/* terminal block */
.term{
  border: 1px solid var(--blue);
  margin-top: 36px;
  background: var(--bg-raised);
}
.term-bar{
  background: var(--blue);
  color: #ffffff;
  font-family:'0xProto Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.08em;
  padding: 7px 12px;
  text-transform:uppercase;
}
.term-body{ padding: 22px; }
.term-body p{ color: var(--text); }
.term-body p.mono{ font-size:12.5px; color:#9a9aff; margin-top:16px; }

.clientlist{
  columns: 2;
  column-gap: 32px;
  font-size:14px;
  letter-spacing:0.03em;
  color: var(--text-dim);
}
.clientlist p{ margin:0 0 10px 0; break-inside: avoid; }
@media (max-width: 480px){ .clientlist{ columns: 1; } }

/* badges: solid blue chip */

.badges{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{
  font-family:'0xProto Mono', monospace;
  font-size:12px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background: var(--blue);
  border: 1.5px solid var(--blue);
  color: #ffffff;
  border-radius:999px;
  padding: 7px 16px;
}

/* outbound project banner (e.g. littlemachines.fun) */

.banner-link{
  display:flex;
  align-items:center;
  gap: 16px;
  margin-top: 20px;
  padding: 14px 18px;
  border: 1.5px solid var(--blue);
  background: var(--bg-raised);
  text-decoration:none;
  color: var(--text);
}
.banner-link:hover{ background: rgba(61,61,255,0.14); }
.banner-icon{
  width:52px; height:52px;
  flex-shrink:0;
  border-radius:50%;
  border: 1.5px solid var(--blue);
  object-fit:cover;
}
.banner-text{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.banner-text strong{
  font-family:'Big Blue Terminal', 'Courier New', monospace;
  font-weight:400;
  font-size:18px;
  letter-spacing:0.02em;
}
.banner-text span{
  font-family:'0xProto Mono', monospace;
  font-size:12.5px;
  color: var(--text-dim);
}
.banner-arrow{ font-size:20px; color: var(--blue); flex-shrink:0; }

/* footer */

footer.section{ padding-top:40px; padding-bottom:40px; }
.footer-row{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  font-family:'0xProto Mono', monospace; font-size:12px; letter-spacing:0.05em;
  color: var(--text-dim);
}
.footer-row a{ text-decoration:underline; text-underline-offset:3px; color: var(--text-dim); }
.footer-row a:hover{ color: var(--blue); }