/* REFT: the shipping studio. Layered on site.css (tokens, nav, sections, cases, duo, GitHub, footer). */

/* ---------- hero ---------- */
.ship { padding-top: clamp(110px, 12vw, 150px); }
.ship .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.ship__kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--ink-2); }
.ship__pulse { width: 10px; height: 10px; border-radius: 50%; background: #8E8E8E; box-shadow: 0 0 0 0 rgba(142,142,142,.5); animation: shipPulse 2s ease-out infinite; }
@keyframes shipPulse { 70% { box-shadow: 0 0 0 10px rgba(142,142,142,0); } 100% { box-shadow: 0 0 0 0 rgba(142,142,142,0); } }
.ship h1 { font-size: clamp(52px, 7.4vw, 124px); }
.ship__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ship__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line-2); }
.ship__facts div { padding: 16px 16px 0 0; }
.ship__facts dt { color: var(--ink-3); font-size: 11px; margin-bottom: 8px; }
.ship__facts dd { margin: 0; color: var(--ink); font-size: clamp(13px, 1.1vw, 16px); font-weight: 500; letter-spacing: .04em; }

/* the deploy console */
.console { position: relative; border-radius: 22px; background: var(--dark); color: var(--paper); padding: 14px; box-shadow: 0 50px 100px -40px rgba(17,17,17,.55), 0 0 0 1px rgba(17,17,17,.1); }
.console__win { border-radius: 12px; overflow: hidden; background: #0B0B0B; border: 1px solid rgba(255,255,255,.08); }
.bframe__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #1B1B1B; border-bottom: 1px solid rgba(255,255,255,.07); }
.bframe__bar > i { width: 10px; height: 10px; border-radius: 50%; background: #373737; }
.bframe__url { flex: 1; min-width: 0; margin-left: 10px; padding: 5px 12px; border-radius: 7px; background: rgba(255,255,255,.06); color: #CACACA; font-size: 11.5px; letter-spacing: .04em; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console__status, .bframe__live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; color: #FFFFFF; background: rgba(142,142,142,.18); border: 1px solid rgba(142,142,142,.45); white-space: nowrap; }
.console__status b, .bframe__live b { width: 7px; height: 7px; border-radius: 50%; background: #8E8E8E; }
.console__status em { font-style: normal; }
.console__status[data-state="building"] { background: rgba(121,121,121,.16); border-color: rgba(121,121,121,.5); }
.console__status[data-state="building"] b { background: var(--accent); animation: blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.console__view { position: relative; aspect-ratio: 16 / 10; background: #0B0B0B; }
.console__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.02); transition: opacity .7s ease, transform 1.2s var(--ease), filter .7s ease; }
.console__view img.on { opacity: 1; transform: none; }
.console[data-building="true"] .console__view img.on { filter: blur(6px) brightness(.55); }
.console__log { min-height: 116px; margin: 12px 4px 0; font-size: 12px; line-height: 1.75; letter-spacing: .02em; text-transform: none; color: #A4A4A4; }
.console__log p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console__log .ok { color: #BFBFBF; } .console__log .run { color: #BEBEBE; } .console__log .cmd { color: var(--paper); } .console__log .url { color: #FFFFFF; }
.console__log .url a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.console__list { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.08); }
.console__list a { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.06); color: #E5E5E5; font-size: 12px; letter-spacing: .03em; text-transform: none; text-decoration: none; transition: color .2s ease, padding .3s var(--ease); }
.console__list li:last-child a { border-bottom: 0; }
.console__list a b { width: 7px; height: 7px; border-radius: 50%; background: #8E8E8E; flex: none; }
.console__list a span { margin-left: auto; color: #8A8A8A; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.console__list a:hover { color: var(--accent); padding-left: 10px; }
.console__list a.is-now { color: #FFFFFF; }
.console__list a.is-now span { color: #BFBFBF; }

/* ---------- case art: real screenshots in a browser frame ---------- */
.case__art .bframe { position: relative; background: var(--dark); }
.case__art .bframe img { display: block; width: 100%; height: clamp(260px, 30vw, 470px); object-fit: cover; object-position: top; }
.case__art .bframe .case__num { right: 18px; bottom: 6px; }

/* ---------- services ---------- */
.offer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.offer__card { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 340px; padding: 26px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.offer__card:hover { --ty: -6px; box-shadow: 0 40px 70px -34px rgba(17,17,17,.32); }
.offer__card h3 { margin: 0; font-weight: 800; font-variation-settings: "wdth" 92; font-size: clamp(28px, 2.6vw, 40px); line-height: .98; letter-spacing: -.035em; }
.offer__card p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.offer__card .work__tags { margin-top: auto; }
.offer__n { margin: 0; color: var(--accent); }
.offer__card--dark { background: var(--dark); color: var(--paper); border-color: var(--dark); }
.offer__card--dark p { color: #B5B5B5; }
.offer__card--dark .work__tags span { background: rgba(255,255,255,.08); color: #CACACA; }
@media (max-width: 1100px) { .offer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .offer { grid-template-columns: minmax(0, 1fr); } .offer__card { min-height: 0; } }

/* ---------- process ---------- */
.flow { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line-2); }
.flow::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--sp, 0) * 100%); background: var(--accent); }
.flow li { padding: 26px 18px 0 0; }
.flow__n { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--dark); color: var(--paper); font-size: 13px; }
.flow li:last-child .flow__n { background: var(--accent); color: #FFFFFF; }
.flow h3 { margin: 18px 0 8px; font-weight: 800; font-variation-settings: "wdth" 92; font-size: clamp(28px, 2.8vw, 42px); letter-spacing: -.035em; line-height: 1; }
.flow p { margin: 0; color: var(--ink-2); max-width: 26em; line-height: 1.5; }
@media (max-width: 900px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } }
@media (max-width: 520px) { .flow { grid-template-columns: minmax(0, 1fr); } }

/* ---------- contact lines ---------- */
.contact__lines { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; color: var(--ink-2); text-transform: none; letter-spacing: .04em; }
.contact__lines a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.contact__lines a:hover { color: var(--accent); border-color: var(--accent); }
.contact__lines i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

@media (max-width: 960px) {
  .ship .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ship__facts { margin-top: 36px; }
}
@media (max-width: 520px) {
  .ship__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ship__facts div:last-child { grid-column: 1 / -1; }
  .console { padding: 10px; border-radius: 18px; }
  .console__log { font-size: 11px; min-height: 104px; }
}
html.still .console__view img { transition: none; }

/* let grid children shrink to the viewport (long URLs and code lines otherwise widen the page on phones) */
.ship .hero__grid > *, .case > *, .case__body, .duo__grid > *, .duo__half, .more__grid > *, .repos > *, .offer > *, .flow > * { min-width: 0; }
.case__body, .more__card p, .repo p { overflow-wrap: anywhere; }
.duo__card--code { max-width: 100%; overflow-x: auto; }
/* the pre-reveal perspective tilt must never widen the page on phones */
html, body { overflow-x: clip; }

/* ---------- AI texture panel (sneaker) ---------- */
.show__ai-src { margin-left: 8px; padding: 3px 8px; border-radius: 999px; font-style: normal; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.show__ai-src[data-src="ai"] { background: rgba(121,121,121,.18); border: 1px solid rgba(121,121,121,.55); color: #BEBEBE; }
.show__ai-src[data-src="quick"] { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); color: #CACACA; }
.show__ai-label b { margin-left: auto; }
.show__ai-go { position: relative; overflow: hidden; }
.show__stage.is-painting .show__ai-go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%); animation: aiShimmer .9s linear infinite; }
@keyframes aiShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.show__stage.is-painting #show-canvas { filter: saturate(.6) brightness(.85); transition: filter .4s ease; }
.show__stage #show-canvas { transition: filter .6s ease; }
.show__stage.is-painted::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 120px rgba(121,121,121,.25); animation: aiFlash 1.1s ease-out forwards; }
@keyframes aiFlash { from { opacity: 1; } to { opacity: 0; } }
.show__ai-chips { scrollbar-width: none; }
@media (max-width: 700px) {
  .show__ai-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000000 85%, transparent); mask-image: linear-gradient(90deg, #000000 85%, transparent); }
  .show__ai-chips button:nth-child(n+4) { display: inline-flex; }
  .show__ai-chips button { flex: none; }
}

/* ---------- motion pass ---------- */
/* hero aurora: two soft colour fields drifting behind the copy and console */
.ship { position: relative; isolation: isolate; overflow: clip; }
.ship::before, .ship::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.ship::before { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: radial-gradient(circle, rgba(121,121,121,.20), transparent 65%); }
.ship::after { width: 40vw; height: 40vw; right: -10vw; bottom: -18vw; background: radial-gradient(circle, rgba(111,111,111,.14), transparent 65%); }
html.anim .ship::before { animation: aurora1 18s ease-in-out infinite alternate; }
html.anim .ship::after { animation: aurora2 22s ease-in-out infinite alternate; }
@keyframes aurora1 { to { transform: translate(14vw, 8vw) scale(1.15); } }
@keyframes aurora2 { to { transform: translate(-12vw, -6vw) scale(1.2); } }

/* the console floats */
html.anim .console.in { animation: consoleFloat 7s ease-in-out 1.2s infinite alternate; }
@keyframes consoleFloat { from { translate: 0 0; } to { translate: 0 -10px; } }

/* "ship." gets an underline that draws itself */
.ship h1 .serif { position: relative; display: inline-block; }
.ship h1 .serif::after { content: ""; position: absolute; left: 4%; right: 2%; bottom: .06em; height: .07em; border-radius: 99px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
html.anim.loaded .ship h1 .serif::after { animation: underline 1s var(--ease) 1.5s forwards; }
html.still .ship h1 .serif::after { transform: none; }
@keyframes underline { to { transform: scaleX(1); } }

/* project screenshots pan slowly, like someone scrolling the live site */
html.anim .case.in .bframe img { animation: shotPan 14s ease-in-out 1s infinite alternate; }
@keyframes shotPan { from { object-position: 50% 0%; } to { object-position: 50% 70%; } }
.case__art .bframe::after { content: ""; position: absolute; inset: 38px 0 0 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.25)); }

/* process: numbers pop as the line reaches them */
html.anim .flow li .flow__n { transform: scale(.6); opacity: 0; transition: transform .6s var(--spring), opacity .4s ease; transition-delay: calc(var(--d, 0ms) + 250ms); }
html.anim .flow li.in .flow__n { transform: none; opacity: 1; }
html.anim .flow li:last-child.in .flow__n { animation: shipPulse 2s ease-out 1.2s infinite; }

/* service cards: an edge of light sweeps across on hover */
.offer__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(121,121,121,.16) 50%, transparent 70%); background-size: 250% 100%; background-position: 120% 0; opacity: 0; transition: opacity .3s ease; }
.offer__card:hover::after { opacity: 1; animation: sweep 1.1s var(--ease) forwards; }
@keyframes sweep { to { background-position: -40% 0; } }
.offer__card h3 { transition: transform .5s var(--ease); }
.offer__card:hover h3 { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) { .ship::before, .ship::after, .console, .case .bframe img { animation: none !important; } }

/* team credit under a case title */
.case__credit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--ink); }
.case__credit span { color: var(--ink-3); }
.case__credit i { font-style: normal; color: var(--accent); }

/* ---------- monotone polish ---------- */
/* screenshots sit in greyscale; colour comes back when you engage with them */
.case__art .bframe img { filter: grayscale(1) contrast(1.06); transition: filter .8s var(--ease); }
.console__view img { filter: grayscale(1) contrast(1.06); }
@media (hover: hover) {
  .case:hover .bframe img, .console:hover .console__view img { filter: none; }
}
@media (hover: none) {
  .case.in .bframe img { filter: none; transition-delay: .6s; }
}
.console[data-building="true"] .console__view img.on { filter: grayscale(1) blur(6px) brightness(.55); }

/* cards flip black/white on hover */
.offer__card.reveal.in[data-tilt], .offer__card[data-tilt]:not(.reveal) { transition: transform .7s var(--ease), box-shadow .5s var(--ease), opacity .9s ease, border-color .3s ease, background-color .45s var(--ease), color .45s var(--ease); }
.offer__card.reveal.in[data-tilt].is-tilting, .offer__card[data-tilt]:not(.reveal).is-tilting { transition: transform .15s linear, box-shadow .5s var(--ease), border-color .3s ease, background-color .45s var(--ease), color .45s var(--ease); }
.offer__card p, .offer__card .offer__n, .offer__card .work__tags span { transition: color .45s var(--ease), background-color .45s var(--ease); }
@media (hover: hover) {
  .offer__card:not(.offer__card--dark):hover { background: var(--dark); color: var(--paper); border-color: var(--dark); }
  .offer__card:not(.offer__card--dark):hover p { color: #B5B5B5; }
  .offer__card:not(.offer__card--dark):hover .offer__n { color: #EDEDED; }
  .offer__card:not(.offer__card--dark):hover .work__tags span { background: rgba(255,255,255,.08); color: #CACACA; }
  .offer__card--dark:hover { background: var(--panel); color: var(--ink); border-color: var(--line); }
  .offer__card--dark:hover p { color: var(--ink-2); }
  .offer__card--dark:hover .offer__n { color: var(--ink); }
  .offer__card--dark:hover .work__tags span { background: var(--bg-2); color: var(--ink-2); }
}