/* ==========================================================================
   INTERAIQ homepage sections — Work, Services, and closing CTA.
   Built on the tokens in theme.css.
   Motion is enhanced by cinematic.js; every section reads complete without it.
   ========================================================================== */
@property --hov { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tilt { syntax: '<number>'; inherits: true; initial-value: 1; }

.iq-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sec { padding: var(--s-section) 0; border-bottom: 1px solid var(--c-line); }

/* Homepage section headers alternate their editorial anchor on desktop. */
.home-page .section-head-alt h2 { grid-column: 5 / span 7 !important; grid-row: 1; text-align: right; }
.home-page .section-head-alt .lede { grid-column: 1 / span 4 !important; grid-row: 1; text-align: left; }

/* ---------------------------------------------------------------- 01 Work */
.work-list { display: flex; flex-direction: column; gap: clamp(72px, 8vw, 120px); }
.proj { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; text-decoration: none; color: var(--c-text); }
.proj:hover { color: var(--c-text); }
.proj-stage, .proj-info { grid-row: 1; }
.proj.is-left .proj-stage { grid-column: 1 / span 8; }
.proj.is-left .proj-info { grid-column: 10 / span 3; }
.proj.is-right .proj-stage { grid-column: 5 / span 8; }
.proj.is-right .proj-info { grid-column: 1 / span 3; }

.proj-stage { position: relative; perspective: 1800px; }
.proj-glow { position: absolute; inset: 10% 4% -8%; background: radial-gradient(closest-side, rgba(79,107,255,.42), transparent); filter: blur(46px); opacity: .32; transition: opacity var(--d-slow) var(--ease-out); pointer-events: none; }
.proj.is-active .proj-glow, .proj:hover .proj-glow { opacity: .85; }

/* Resting perspective; flattens toward the viewer on hover/focus.
   --tilt is eased by scroll (cinematic.js); --hov by hover. */
.proj-tilt {
  --k: calc(var(--tilt) * (1 - var(--hov)));
  transform: rotateY(calc(var(--ry) * var(--k))) rotateX(calc(3deg * var(--k)));
  transform-style: preserve-3d;
  transition: --hov var(--d-slow) var(--ease-out);
}
.proj.is-left .proj-tilt { --ry: 7deg; }
.proj.is-right .proj-tilt { --ry: -7deg; }
.proj.is-active .proj-tilt, .proj:hover .proj-tilt { --hov: 1; }

.work-sec .media {
  position: relative; aspect-ratio: 16 / 10.4; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-line-2); border-radius: var(--r-window);
  box-shadow: var(--shadow-float), 0 0 0 1px rgba(0,0,0,.4);
}
.work-sec .proj.is-active .media { box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 1px var(--c-line-accent); }
.work-sec .proj .media .chrome { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); }
.chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(247,247,248,.18); display: block; }
.chrome i:first-child { background: var(--c-indigo); }
.chrome .url { margin: 0 auto; transform: translateX(-20px); padding: 3px 14px; border-radius: 999px; background: rgba(247,247,248,.06); font: 400 11px var(--f-mono); color: var(--c-text-3); }
.work-sec .vp { background: var(--c-surface); }
.reveal-bar { position: absolute; left: 0; right: 0; bottom: 0; background: var(--c-indigo-ui); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-weight: 600; font-size: 15px; transform: translateY(101%); transition: transform var(--d-base) var(--ease-out); }
.proj:hover .reveal-bar, .proj:focus-visible .reveal-bar { transform: none; }

.proj-kicker { display: flex; align-items: center; gap: 12px; color: var(--c-text-3); font-size: var(--t-label); }
.proj-num { color: var(--c-indigo-soft); }
.proj-kicker .proj-num::after { content: ""; display: inline-block; width: 24px; height: 1px; margin-left: 12px; vertical-align: middle; background: var(--c-line-2); }
.pname { font: 700 clamp(34px, 3.1vw, 50px)/.96 var(--f-display); letter-spacing: -.04em; margin: 20px 0 16px; }
.flag { display: inline-block; font: 500 var(--t-label) var(--f-mono); text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--c-line-accent); padding: 3px 8px; }
.pdesc { margin: 22px 0 24px; color: var(--c-text-2); font-size: 16px; }
.ptable { display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--c-line); font-size: 14px; }
.ptable span { padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.ptable span:nth-child(odd) { font: 500 var(--t-label) var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-3); padding: 12px 24px 10px 0; }
.proj-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding-bottom: 6px; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--c-line-2); transition: color var(--d-fast), border-color var(--d-fast); }
.proj-cta .arr { transition: transform var(--d-base) var(--ease-out); }
.proj:hover .proj-cta, .proj.is-active .proj-cta { color: var(--c-indigo-soft); border-color: currentColor; }
.proj:hover .proj-cta .arr, .proj.is-active .proj-cta .arr { transform: translateX(5px); }

/* ---------------------------------------------------------------- 02 Services */
.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.svc-card {
  position: relative; display: flex; flex-direction: column; min-height: 470px; padding: 26px 28px 32px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--c-surface), #0E0E11);
  border: 1px solid var(--c-line-accent); border-radius: var(--r-leaf);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out);
}
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 30%), rgba(79,107,255,.18), transparent 62%); opacity: 0; transition: opacity var(--d-base) var(--ease-out); }
.svc-card:hover { border-color: var(--c-line-accent-hi); transform: translateY(-6px); box-shadow: 0 34px 80px -46px rgba(79,107,255,.7); }
.svc-card:hover::before { opacity: 1; }
.svc-card.is-scroll-active { border-color: var(--c-line-accent-hi); transform: translateY(-6px); box-shadow: 0 34px 80px -46px rgba(79,107,255,.7); }
.svc-card.is-scroll-active::before { opacity: 1; }
.svc-visual { flex: none; height: 220px; display: grid; place-items: center; margin: 6px -6px 28px; }
.svc-n { color: var(--c-indigo-soft); }
.svc-card h3 { font: 700 var(--t-h3)/1 var(--f-display); letter-spacing: -.035em; margin: 14px 0 14px; }
.svc-card p { margin: 0; color: var(--c-text-2); font-size: 16px; line-height: 1.5; }

/* Geometric illustrations (petals + dot from the logo) */
.svc-art { width: 100%; max-width: 280px; height: auto; display: block; overflow: visible; }
.svc-art .ln { fill: none; stroke: var(--c-line-2); stroke-width: 1; }
.svc-art .ln-dot { fill: rgba(247,247,248,.2); }
.svc-art .ln-fill { fill: rgba(247,247,248,.14); }
.svc-art .sh { fill: var(--c-text); }
.svc-art .bar { fill: rgba(247,247,248,.2); }
.svc-art .dot { fill: var(--c-indigo); }
.svc-art .br { fill: none; stroke: var(--c-indigo-soft); stroke-width: 6; stroke-linecap: square; }
.svc-art .btnshape { fill: rgba(247,247,248,.12); transition: fill var(--d-base) var(--ease-out); }
.svc-art .ring { fill: none; stroke: var(--c-indigo-soft); stroke-width: 1.5; opacity: 0; }
.svc-art .cursor { fill: var(--c-text); stroke: var(--c-bg); stroke-width: 1.5; }
.svc-art .orbit { fill: none; stroke: var(--c-line-2); stroke-dasharray: 3 7; }
.svc-art .sat { fill: var(--c-indigo-soft); }
.svc-art :is(.sh, .bar, .dot, .br, .cursor, .orbit-g) { transform-box: fill-box; transform-origin: center; transition: transform var(--d-slow) var(--ease-out); }
.svc-art .bar { transform-origin: left center; }
.svc-art .orbit-g { transform-box: view-box; transform-origin: 120px 80px; transition-duration: var(--d-cine); }
.svc-art .cursor { transform-box: view-box; transform-origin: 0 0; }

/* Website Design: the layout settles into place */
.svc-card[data-svc="design"]:hover .a1 { transform: translate(-4px, -3px) scale(1.06); }
.svc-card[data-svc="design"].is-scroll-active .a1 { transform: translate(-4px, -3px) scale(1.06); }
.svc-card[data-svc="design"]:hover .a2 { transform: scaleX(1.1); }
.svc-card[data-svc="design"].is-scroll-active .a2 { transform: scaleX(1.1); }
.svc-card[data-svc="design"]:hover .a3 { transform: scaleX(1.45); }
.svc-card[data-svc="design"].is-scroll-active .a3 { transform: scaleX(1.45); }
.svc-card[data-svc="design"]:hover .a4 { transform: rotate(-90deg); }
.svc-card[data-svc="design"].is-scroll-active .a4 { transform: rotate(-90deg); }
.svc-card[data-svc="design"]:hover .a5 { transform: translate(-12px, -60px) scale(.62); }
.svc-card[data-svc="design"].is-scroll-active .a5 { transform: translate(-12px, -60px) scale(.62); }
/* Front-End Development: brackets open, lines write, cursor follows */
.svc-card[data-svc="dev"]:hover .b1 { transform: translateX(-8px); }
.svc-card[data-svc="dev"].is-scroll-active .b1 { transform: translateX(-8px); }
.svc-card[data-svc="dev"]:hover .b2 { transform: translateX(8px); }
.svc-card[data-svc="dev"].is-scroll-active .b2 { transform: translateX(8px); }
.svc-card[data-svc="dev"]:hover .c2 { transform: scaleX(1.3); }
.svc-card[data-svc="dev"].is-scroll-active .c2 { transform: scaleX(1.3); }
.svc-card[data-svc="dev"]:hover .c4 { transform: scaleX(1.7); transition-delay: .08s; }
.svc-card[data-svc="dev"].is-scroll-active .c4 { transform: scaleX(1.7); transition-delay: .08s; }
.svc-card[data-svc="dev"]:hover .cur { transform: translate(-6px, 40px); animation: blink 1s steps(1) .6s infinite; }
.svc-card[data-svc="dev"].is-scroll-active .cur { transform: translate(-6px, 40px); animation: blink 1s steps(1) .6s infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* UI/UX Design: the cursor finds the button */
.svc-card[data-svc="ux"]:hover .cursor { transform: translate(-50px, -2px); }
.svc-card[data-svc="ux"].is-scroll-active .cursor { transform: translate(-50px, -2px); }
.svc-card[data-svc="ux"]:hover .btnshape { fill: var(--c-indigo); transition-delay: .45s; }
.svc-card[data-svc="ux"].is-scroll-active .btnshape { fill: var(--c-indigo); transition-delay: .45s; }
.svc-card[data-svc="ux"]:hover .ring { animation: ring .9s var(--ease-out) .5s; }
.svc-card[data-svc="ux"].is-scroll-active .ring { animation: ring .9s var(--ease-out) .5s; }
.svc-card[data-svc="ux"]:hover .u1 { transform: translateX(-3px); }
.svc-card[data-svc="ux"].is-scroll-active .u1 { transform: translateX(-3px); }
.svc-card[data-svc="ux"]:hover .u2 { transform: translateX(3px); }
.svc-card[data-svc="ux"].is-scroll-active .u2 { transform: translateX(3px); }
@keyframes ring { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.9); } }
.svc-art .ring { transform-box: fill-box; transform-origin: center; }
/* Website Maintenance: one turn of the orbit, the mark stays in shape */
.svc-card[data-svc="care"]:hover .orbit-g { transform: rotate(90deg); }
.svc-card[data-svc="care"].is-scroll-active .orbit-g { transform: rotate(90deg); }
.svc-card[data-svc="care"]:hover .m1 { animation: breathe-a .9s var(--ease-out); }
.svc-card[data-svc="care"].is-scroll-active .m1 { animation: breathe-a .9s var(--ease-out); }
.svc-card[data-svc="care"]:hover .m2 { animation: breathe-b .9s var(--ease-out); }
.svc-card[data-svc="care"].is-scroll-active .m2 { animation: breathe-b .9s var(--ease-out); }
.svc-card[data-svc="care"]:hover .m3 { animation: breathe-c .9s var(--ease-out); }
.svc-card[data-svc="care"].is-scroll-active .m3 { animation: breathe-c .9s var(--ease-out); }
.svc-card[data-svc="care"]:hover .m4 { animation: breathe-d .9s var(--ease-out); }
.svc-card[data-svc="care"].is-scroll-active .m4 { animation: breathe-d .9s var(--ease-out); }
@keyframes breathe-a { 40% { transform: translate(-5px, -5px); } }
@keyframes breathe-b { 40% { transform: translate(-5px, 5px); } }
@keyframes breathe-c { 40% { transform: translate(5px, 5px); } }
@keyframes breathe-d { 40% { transform: translate(5px, -5px) scale(1.08); } }

/* ---------------------------------------------------------------- 07 Closing CTA */
.closing-cta { position: relative; overflow: hidden; background: var(--c-bg); color: var(--c-text); padding: var(--s-section) 0 0; }
.cta-aura { position: absolute; right: -10vw; top: 0; width: 60vw; height: 60vw; background: radial-gradient(closest-side, rgba(79,107,255,.22), transparent); pointer-events: none; }
.cta-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; padding-bottom: clamp(96px, 10vw, 144px); }
.cta-copy { grid-column: 1 / span 7; }
.cta-h { font-size: clamp(56px, 8.2vw, 136px); line-height: .86; letter-spacing: -.06em; margin: 28px 0 0; color: var(--c-text); }
.cta-sub { font-size: clamp(36px, 4.6vw, 76px); line-height: 1; margin: 20px 0 0; color: transparent; -webkit-text-stroke: 1.5px var(--c-indigo-soft); }
.cta-p { margin: 40px 0 32px; font-size: 20px; color: var(--c-text-2); max-width: 520px; }
.cta-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.cta-symbol { grid-column: 9 / span 4; }
.cta-mark .pc { transition: none; }
.cta-mark { width: 100%; max-width: 380px; display: block; margin-left: auto; overflow: visible; filter: drop-shadow(0 40px 60px rgba(79,107,255,.28)); }
.mega { display: flex; justify-content: space-between; align-items: center; gap: 24px; position: relative; overflow: hidden; background: var(--c-indigo); color: #fff; text-decoration: none; padding: 48px var(--gutter); font: 700 clamp(36px, 5.4vw, 88px)/1 var(--f-display); letter-spacing: -.045em; }
.mega::before { content: ""; position: absolute; inset: 0; background: var(--c-text); transform: translateY(101%); transition: transform .55s var(--ease-out); }
.mega > * { position: relative; }
.mega:hover { color: var(--c-bg); }
.mega:hover::before { transform: none; }
.mega .arr { transition: transform .55s var(--ease-out); }
.mega:hover .arr { transform: translateX(16px); }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-card { min-height: 420px; }
  .proj.is-left .proj-stage, .proj.is-right .proj-stage { grid-column: 1 / -1; grid-row: 1; }
  .proj.is-left .proj-info, .proj.is-right .proj-info { grid-column: 1 / span 8; grid-row: 2; padding-top: 32px; }
  .proj-tilt { --ry: 0deg !important; }
}
@media (max-width: 980px) {
}
@media (max-width: 860px) {
  .work-list { gap: 96px; }
  .proj.is-left .proj-info, .proj.is-right .proj-info { grid-column: 1 / -1; padding-top: 16px; }
  .proj-tilt { transform: none; }
  .proj-glow { opacity: .4; }
  .reveal-bar { transform: none; padding: 12px 16px; font-size: 14px; }
  .chrome .url { transform: none; }
  .svc-card { min-height: 0; }
  .svc-visual { aspect-ratio: 3 / 2; }
  .cta-copy, .cta-symbol { grid-column: 1 / -1; }
  .home-page .section-head-alt h2, .home-page .section-head-alt .lede { grid-column: 1 / -1 !important; grid-row: auto; text-align: left; }
  .cta-symbol { order: -1; }
  .cta-mark { max-width: 150px; margin: 0 0 8px; }
  .cta-h { font-size: clamp(50px, 14vw, 92px); }
  .cta-actions .btn { flex: 1 1 100%; justify-content: center; }
  .mega { padding: 32px 20px; font-size: clamp(32px, 9vw, 48px); }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Touch devices should activate service visuals from scroll visibility, not tap-persisted :hover. */
@media (hover: none) {
  .svc-card:not(.is-scroll-active):hover { border-color: var(--c-line-accent); transform: none; box-shadow: none; }
  .svc-card:not(.is-scroll-active):hover::before { opacity: 0; }
  .svc-card:not(.is-scroll-active):hover .svc-art * { transform: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .proj-tilt, .svc-card, .svc-art *, .assemble .pc, .glyph .pc { transition: none !important; animation: none !important; }
  .svc-card:hover .svc-art :is(.sh, .bar, .dot, .br, .cursor, .orbit-g) { transform: none !important; }
}