/* ============================================================
   HAVA.SI — panel inner layouts (free-flight stage)
   ============================================================ */
.label { margin-bottom: 1.1rem; }
.panel__in { width: min(1080px, 92vw); max-height: 90vh; }

/* ── free-flight focus ── neighbours are pushed away by the sharp opacity
   falloff in flight.js (vis()); NO blur filter and NO blanket will-change —
   both force Safari to re-rasterize huge layers every frame (= jank).
   WAAPI promotes elements to the compositor on its own while animating. */

/* lite reveal */
.rv { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--e-out), transform .8s var(--e-out); }
.rv.in { opacity: 1; transform: none; }

/* masked per-character heading reveal (rises out of a clip).
   padding gives room for diacritics (á š ž) + descenders (y j p); negative
   margins keep the layout/line-height unchanged. */
.char-wrap { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em 0 .22em; margin: -.16em 0 -.22em; }

.char { display: inline-block; }   /* no will-change: 80+ permanent layers killed Safari */
.word { display: inline-block; white-space: nowrap; }   /* lines break only between words */

/* ════ HERO ════ */
.hero__in { width: min(900px, 92vw); }
.hero__title { font-size: clamp(3rem, 8.5vw, 7.5rem); margin-bottom: 1.5rem; }
.hero__desc { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 520px; margin-bottom: 2.4rem; }
.hero__cta { display: flex; gap: .9rem; flex-wrap: wrap; }

/* ════ ABOUT ════ */
.about__in { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
.about__name { font-size: clamp(2.6rem, 6vw, 5rem); margin-block: .3rem 1.2rem; }
.about__lead p { max-width: 40ch; }
.about__lead strong { color: var(--text); font-weight: 500; }
.about__spec { display: flex; gap: 2.4rem; margin-top: 1.8rem; }
.about__spec b { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1; }
.about__spec span { display: block; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }
.about__clients .eyebrow { display: block; margin-bottom: 1.1rem; }

/* SULUM membership — slim credential plaque under the specs (same card
   language as the client grid: hairline border, crimson glow on hover) */
.about__member {
  display: inline-flex; align-items: center; gap: .95rem;
  margin-top: 1.8rem; padding: .8rem 1.2rem;
  border: 1px solid var(--border); border-radius: 14px; background: #0c0c10;
  text-decoration: none;
  transition: border-color .4s var(--e-out), box-shadow .4s var(--e-out), transform .4s var(--e-spring);
}
.about__member-lab { font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.about__member-logo { display: block; height: 13px; width: auto; opacity: .92; transition: opacity .35s, filter .35s; }
.about__member-arr { font-family: var(--f-mono); font-size: .8rem; color: var(--muted-2); transition: color .3s, transform .3s var(--e-spring); }
.about__member:hover, .about__member.is-pressed {
  border-color: color-mix(in srgb, var(--neon) 60%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--neon) 18%, transparent);
  transform: translateY(-2px);
}
.about__member.is-pressed { transform: scale(.97); }
.about__member:hover .about__member-logo, .about__member.is-pressed .about__member-logo { opacity: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--red) 55%, transparent)); }
.about__member:hover .about__member-arr, .about__member.is-pressed .about__member-arr { color: var(--red); transform: translate(2px, -2px); }

/* client cards — logo slot + name, spotlight follows cursor, neon on hover */
.cli-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.cli-card {
  position: relative; overflow: hidden; isolation: isolate; text-decoration: none;
  border: 1px solid var(--border); border-radius: 14px; background: #0c0c10;
  padding: 1.1rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .75rem;
  transition: border-color .4s, box-shadow .4s;
}
.cli-card:hover { border-color: color-mix(in srgb, var(--neon) 60%, transparent); box-shadow: 0 14px 36px color-mix(in srgb, var(--neon) 20%, transparent); }
.cli-card__logo {
  width: 100%; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #131318; box-shadow: inset 0 0 0 1px var(--border-2);
  transition: box-shadow .4s;
}
.cli-card:hover .cli-card__logo { box-shadow: inset 0 0 0 1px var(--neon), 0 0 22px color-mix(in srgb, var(--neon) 30%, transparent); }
.cli-card__logo img { display: block; max-width: 64%; max-height: 56%; width: auto; height: auto; object-fit: contain; }
.cli-card__name { font-family: var(--f-display); font-weight: 600; font-size: .88rem; color: var(--text-dim); text-align: center; line-height: 1.2; }

/* shared cursor spotlight — moved via transform (GPU composited = smooth, no repaint) */
.cli-card::before, .skill::before, .service::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--neon) 24%, transparent), transparent 70%);
  transform: translate3d(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)), 0);
  opacity: 0; transition: opacity .4s; z-index: -1; pointer-events: none; will-change: transform;
}
.cli-card:hover::before, .skill:hover::before, .service:hover::before { opacity: 1; }

/* ── touch press: tapping a card gives the same glow + lift as desktop hover
   (.is-pressed is added by initTouchPress() — reliable on iOS) ── */
.cli-card.is-pressed, .skill.is-pressed, .service.is-pressed {
  border-color: color-mix(in srgb, var(--neon) 60%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--neon) 22%, transparent);
  transform: translateY(-6px) scale(1.015);
  transition: transform .22s var(--e-out), box-shadow .22s var(--e-out), border-color .22s var(--e-out);
}
.cli-card.is-pressed::before, .skill.is-pressed::before, .service.is-pressed::before { opacity: 1; }
.cli-card.is-pressed .cli-card__logo { box-shadow: inset 0 0 0 1px var(--neon), 0 0 22px color-mix(in srgb, var(--neon) 30%, transparent); }
.service.is-pressed .srv__cta { color: var(--neon); transform: translateX(6px); }

/* ════ SKILLS ════ */
.skills__head { margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.skills__head h2 { margin-top: .3rem; }
.skills__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.skill {
  position: relative; overflow: hidden; isolation: isolate; will-change: transform;
  border: 1px solid var(--border); border-radius: 14px; background: #0c0c10;
  padding: clamp(1.3rem, 2vw, 1.9rem);
  transition: border-color .4s, box-shadow .4s;
}
.skill:hover { border-color: color-mix(in srgb, var(--neon) 60%, transparent); box-shadow: 0 16px 40px color-mix(in srgb, var(--neon) 18%, transparent); }
.skill__n { display: block; font-size: var(--t-label); letter-spacing: .2em; color: var(--red); margin-bottom: 1rem; }
.skill h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.skill p { font-size: var(--t-small); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chips--tags { margin-top: 1.8rem; }
.tags-lab { display: block; color: var(--red); margin-top: clamp(2rem, 5vh, 3rem); margin-bottom: .9rem; }
.chips--toolkit { margin-top: 0; }

/* toolkit — editorial tool list (replaces pill tags) */
.toolkit { margin-top: clamp(2rem, 5vh, 3.2rem); }
.toolkit__lab { display: block; color: var(--neon); margin-bottom: 1rem; }
.toolkit__list { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 0; list-style: none; }
.toolkit__list li {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(1rem, 1.8vw, 1.5rem);
  color: var(--muted); letter-spacing: -.01em; transition: color .3s var(--e-out);
  display: inline-flex; align-items: baseline;
}
.toolkit__list li:not(:last-child)::after {
  content: '·'; color: var(--red); margin: 0 .7rem; font-size: .8em; opacity: .6;
}
.toolkit__list li:hover { color: var(--text); }
.chip { padding: .45rem .95rem; border: 1px solid var(--border-2); border-radius: 99px; font-size: var(--t-small); color: var(--muted); transition: border-color .3s, color .3s, transform .3s var(--e-spring), background .3s; }
.chip:hover { border-color: var(--red); color: var(--text); background: color-mix(in srgb, var(--red) 6%, transparent); transform: translateY(-2px); }

/* ════ SERVICES ════ */
.services__head { margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.services__head h2 { margin-top: .3rem; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.services__grid--4 { grid-template-columns: repeat(2, 1fr); }
.service {
  position: relative; display: flex; flex-direction: column; gap: .8rem;
  overflow: hidden; isolation: isolate; will-change: transform;
  border: 1px solid var(--border); border-radius: 14px; background: #0c0c10;
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
  transition: border-color .4s, box-shadow .4s;
}
.service:hover { border-color: color-mix(in srgb, var(--neon) 60%, transparent); box-shadow: 0 16px 40px color-mix(in srgb, var(--neon) 18%, transparent); }
.srv__ic { width: 32px; height: 32px; color: var(--red); display: block; }
.srv__ic svg { width: 100%; height: 100%; }
.srv__num {
  position: absolute; top: clamp(1.3rem, 2.1vw, 1.9rem); right: clamp(1.3rem, 2.1vw, 1.9rem);
  font-family: var(--f-mono); font-size: .82rem; letter-spacing: .22em; color: var(--muted-2);
}
.service h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.service p { font-size: var(--t-small); color: var(--muted); flex: 1; }
.srv__cta { font-size: var(--t-small); font-weight: 500; color: var(--red); margin-top: auto; transition: transform .3s var(--e-spring), color .25s; }
.srv__cta:hover { color: var(--neon); transform: translateX(6px); }
/* whole service card is clickable (JS-driven, see main.js) */
.service { cursor: pointer; }
.service:hover .srv__cta { color: var(--neon); transform: translateX(6px); }

/* ════ WORK (compact grid — wide feature banner + row of tiles) ════ */
.work__head { margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem); }
.work__head h2 { margin-top: .3rem; }
.work__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.work__item { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: #0c0c10; transition: border-color .3s; aspect-ratio: 4 / 5; }
.work__item--feature { grid-column: 1 / -1; aspect-ratio: 5 / 1; }   /* = the 2200x440 banner, uncropped */
.work__item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) brightness(.85); transition: transform .6s var(--e-out), filter .4s; }
.work__item:hover { border-color: var(--red); }
.work__item:hover img { filter: grayscale(0) brightness(1); }
.work__badge { position: absolute; top: .55rem; left: .55rem; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 4px; background: rgba(7,7,9,.6); border: 1px solid var(--border-2); color: var(--muted); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.work__item:hover .work__badge { opacity: 1; }
.work__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .1rem; padding: .9rem; background: linear-gradient(to top, rgba(7,7,9,.92), transparent 60%); opacity: 0; transition: opacity .3s; }
.work__item:hover .work__overlay { opacity: 1; }
.work__overlay h3 { font-size: .9rem; }
.work__overlay span { font-family: var(--f-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

/* desktop hover: a crimson scan-line sweeps down the tile once… */
.work__item::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; z-index: 2;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--red) 95%, transparent), transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--red) 65%, transparent);
  opacity: 0; pointer-events: none;
}
.work__item:hover::before { animation: workScan 1.05s var(--e-smooth); }
@keyframes workScan {
  0%   { top: 0; opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { top: calc(100% - 2px); opacity: 0; }
}
/* …and a mono hex readout fades in top-right (HUD language) */
.work__item::after {
  content: attr(data-hex); position: absolute; top: .6rem; right: .6rem; z-index: 2;
  font-family: var(--f-mono); font-size: .55rem; letter-spacing: .16em;
  color: color-mix(in srgb, var(--neon-soft) 95%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--red) 50%, transparent);
  opacity: 0; transition: opacity .35s var(--e-out); pointer-events: none;
}
.work__item:hover::after { opacity: 1; }

/* ════ CONTACT (centered CTA — no form, no data collected) ════ */
.contact__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; max-width: 720px; }
.contact__title { font-size: clamp(2.6rem, 6vw, 5rem); }
.contact__lead { color: var(--muted); max-width: 44ch; }
.contact__big { padding: 1.1rem 2.4rem; font-size: 1rem; margin-top: .4rem; }
.contact__links { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: .6rem; }
.contact__link { display: inline-flex; align-items: center; gap: .7rem; padding: .7rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--t-small); color: var(--text-dim); transition: border-color .3s, color .3s, transform .3s var(--e-spring); }
.contact__link:hover { border-color: var(--red); color: var(--text); transform: translateY(-2px); }
.contact__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--elevated); color: var(--neon); }
.contact__ic svg { width: 15px; height: 15px; }
.contact__foot { font-size: var(--t-label); color: var(--muted-2); letter-spacing: .04em; margin-top: 1rem; }
.footer__mark { font-family: var(--f-display); font-weight: 700; }

/* ════ END SCREEN ════ */
.panel--end .panel__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.end__logo { width: clamp(72px, 12vw, 116px); height: auto; }
.end__logo path { fill: #fff; }
.end__msg { color: var(--muted); line-height: 1.9; letter-spacing: .04em; }
.end__msg br { display: block; }
.end__loop { display: inline-block; margin-top: .8rem; color: var(--neon); letter-spacing: .12em; }
.end__links { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
/* numbers scattered over the FULL screen, depth via size/opacity + parallax */
.end__nums { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; margin: -50vh 0 0 -50vw; pointer-events: none; z-index: -1; will-change: transform; overflow: hidden; }
.end__nums--front { z-index: 5; }
.end__nums span { position: absolute; font-family: var(--f-mono); letter-spacing: .12em; color: color-mix(in srgb, var(--neon-soft) 90%, transparent); white-space: nowrap; }
.end__nums span.hot { color: color-mix(in srgb, var(--neon) 95%, transparent); }

.end__title { color: var(--text); }
.end__logo { animation: endPulse 3.4s var(--e-smooth) infinite; }
@keyframes endPulse {
  0%, 100% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--red) 40%, transparent)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 42px color-mix(in srgb, var(--neon) 85%, transparent)); transform: scale(1.05); }
}
/* radar pulse rings behind the logo */
.end__radar { position: absolute; left: 50%; top: 30%; width: 0; height: 0; pointer-events: none; z-index: -1; }
.end__radar span { position: absolute; left: 0; top: 0; border: 1px solid color-mix(in srgb, var(--red) 50%, transparent); border-radius: 50%; transform: translate(-50%, -50%); animation: radar 4.5s ease-out infinite; }
.end__radar span:nth-child(2) { animation-delay: 1.5s; }
.end__radar span:nth-child(3) { animation-delay: 3s; }
@keyframes radar {
  0% { width: 60px; height: 60px; opacity: .7; }
  100% { width: 740px; height: 740px; opacity: 0; }
}