/* ==========================================================================
   FIRST PRO — Scenes (V0.5): device stage, ticker, five worlds, in-house showcase.
   Shared by both directions; colours come from tokens (gold by default).
   ========================================================================== */

/* ---------- Devices (pure CSS frames around our own screens) ---------- */
.fp-device { position: relative; --fp-bezel: #1a1816; --fp-edge: rgba(255,255,255,0.22); }
.fp-device__screen { position: relative; overflow: hidden; background: #0d0c0b; }
.fp-device__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fp-device__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 28%, transparent 46%); pointer-events: none; }
/* Laptop */
.fp-device--laptop { width: 100%; aspect-ratio: 16 / 11; }
.fp-device--laptop .fp-device__lid { position: absolute; inset: 0 4% 9% 4%; padding: 2.2% 2.2% 2.2%; border-radius: 1.2rem 1.2rem 0.5rem 0.5rem; background: var(--fp-bezel); box-shadow: inset 0 0 0 1px var(--fp-edge), 0 40px 80px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.6); }
.fp-device--laptop .fp-device__screen { aspect-ratio: 16 / 10; border-radius: 0.6rem; }
.fp-device--laptop .fp-device__base { position: absolute; left: 0; right: 0; bottom: 3%; height: 6%; border-radius: 0 0 1.4rem 1.4rem / 0 0 1rem 1rem; background: linear-gradient(180deg, #2a2724 0%, #15130f 60%, #0b0a09 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 30px 50px -20px rgba(0,0,0,0.9); }
.fp-device--laptop .fp-device__notch { position: absolute; left: 50%; top: 0; width: 14%; height: 36%; transform: translateX(-50%); border-radius: 0 0 0.5rem 0.5rem; background: rgba(0,0,0,0.5); }
/* Phone */
.fp-device--phone { width: 100%; aspect-ratio: 390 / 844; border-radius: 12% / 5.6%; background: var(--fp-bezel); box-shadow: inset 0 0 0 1px var(--fp-edge), 0 40px 80px -24px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.6); }
/* The screen is inset with percentages of the phone's own box (top/bottom in % of height ≈ sides in % of width). */
.fp-device--phone .fp-device__screen { position: absolute; inset: 1.3% 2.8%; border-radius: 9.5% / 4.4%; }
.fp-device--phone .fp-device__screen img { object-position: center top; }
.fp-device--phone .fp-device__island { position: absolute; left: 50%; top: 4.2%; width: 26%; height: 2.8%; transform: translateX(-50%); border-radius: 999px; background: #000; }

/* ---------- Hero device stage (3D, pointer tilt via interactions.js --fp-rx/--fp-ry) ---------- */
.fp-stage3d { position: relative; z-index: 2; perspective: 160rem; perspective-origin: 50% 40%; --fp-tilt: 7; }
.fp-stage3d__scene { position: relative; width: 100%; aspect-ratio: 5 / 4; transform-style: preserve-3d; transform: rotateX(var(--fp-rx, 4deg)) rotateY(var(--fp-ry, -10deg)); transition: transform 600ms var(--fp-ease-out); will-change: transform; }
[dir="rtl"] .fp-stage3d__scene { transform: rotateX(var(--fp-rx, 4deg)) rotateY(var(--fp-ry, 10deg)); }
.fp-stage3d .fp-device--laptop { position: absolute; inset: 6% 0 auto 8%; width: 86%; transform: translateZ(10px); }
.fp-stage3d .fp-device--phone { position: absolute; left: -2%; bottom: 0; width: 26%; transform: translateZ(90px) rotateZ(-4deg); }
[dir="rtl"] .fp-stage3d .fp-device--laptop { inset: 6% 8% auto 0; }
[dir="rtl"] .fp-stage3d .fp-device--phone { left: auto; right: -2%; transform: translateZ(90px) rotateZ(4deg); }
.fp-stage3d__tag { position: absolute; display: grid; gap: 0.15rem; padding: 0.7rem 0.95rem; border-radius: 0.9rem; background: rgba(14,13,11,0.78); border: 1px solid var(--fp-glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--fp-paper); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.8); transform: translateZ(50px); font-size: 0.72rem; }
.fp-stage3d__tag strong { font-size: 0.85rem; font-weight: 600; }
.fp-stage3d__tag span { color: var(--fp-accent-2); }
.fp-stage3d__tag--1 { right: 0; top: -6%; }
.fp-stage3d__tag--2 { right: 4%; bottom: 12%; }
.fp-stage3d__tag--3 { left: 24%; bottom: -2%; }
[dir="rtl"] .fp-stage3d__tag--1 { right: auto; left: 0; }
[dir="rtl"] .fp-stage3d__tag--2 { right: auto; left: 4%; }
[dir="rtl"] .fp-stage3d__tag--3 { left: auto; right: 24%; }
.fp-stage3d__light { position: absolute; inset: -20% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--fp-glow) 0%, transparent 65%); filter: blur(10px); transform: translateZ(-40px); pointer-events: none; }
.fp-stage3d__floor { position: absolute; left: 10%; right: 10%; bottom: -8%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,0.75) 0%, transparent 70%); filter: blur(12px); transform: translateZ(-20px); pointer-events: none; }
html.fp-motion .fp-stage3d__scene, html.fp-ix .fp-stage3d__scene { animation: fp-stage-float 9s ease-in-out infinite; }
@keyframes fp-stage-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .fp-stage3d__scene { animation: none !important; transform: rotateX(4deg) rotateY(-8deg); transition: none; } }
@media (max-width: 63.99rem) { .fp-stage3d { width: 100%; max-width: 34rem; margin: var(--fp-space-4) auto 0; justify-self: center; } .fp-stage3d .fp-device--phone { left: 2%; } [dir="rtl"] .fp-stage3d .fp-device--phone { left: auto; right: 2%; } .fp-stage3d__tag--1 { right: 0; } .fp-stage3d__tag--3 { display: none; } }

/* ---------- Ticker ---------- */
.fp-ticker { overflow: hidden; border-block: 1px solid var(--fp-glass-line); padding-block: 0.9rem; background: rgba(255,255,255,0.025); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fp-ticker__viewport { display: flex; width: max-content; }
.fp-ticker__track { list-style: none; display: flex; align-items: center; gap: 2.5rem; padding-inline-end: 2.5rem; margin: 0; white-space: nowrap; }
.fp-ticker__item { display: inline-flex; align-items: center; gap: 0.9rem; font-family: var(--fp-font-display); font-size: var(--fp-text-lg); color: var(--fp-paper); letter-spacing: -0.01em; }
.fp-ticker__item a { color: inherit; text-decoration: none; }
.fp-ticker__item a:hover { color: var(--fp-accent-2); }
.fp-ticker__num { font-family: var(--fp-font-mono); font-size: var(--fp-text-xs); color: var(--fp-accent-2); }
.fp-ticker__dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--fp-accent); box-shadow: 0 0 10px var(--fp-glow); }
html.fp-motion .fp-ticker__viewport, html.fp-ix .fp-ticker__viewport { animation: fp-ticker 46s linear infinite; }
[dir="rtl"] html.fp-motion .fp-ticker__viewport, [dir="rtl"] html.fp-ix .fp-ticker__viewport { animation-name: fp-ticker-rtl; }
.fp-ticker:hover .fp-ticker__viewport { animation-play-state: paused; }
@keyframes fp-ticker { to { transform: translateX(-50%); } }
@keyframes fp-ticker-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .fp-ticker { -webkit-mask-image: none; mask-image: none; } .fp-ticker__viewport { width: 100%; animation: none !important; } .fp-ticker__track { flex-wrap: wrap; white-space: normal; row-gap: 0.6rem; } .fp-ticker__track[aria-hidden] { display: none; } }

/* ---------- Five worlds (bento) ---------- */
.fp-services--worlds .fp-services__list { display: grid; gap: var(--fp-space-3); grid-template-columns: repeat(6, 1fr); }
.fp-services--worlds .fp-service { position: relative; overflow: clip; border-radius: var(--fp-radius-lg); border: 1px solid var(--fp-glass-line); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); --fp-tilt: 2; grid-column: span 6; transition: border-color 400ms var(--fp-ease-out), transform 400ms var(--fp-ease-out); }
.fp-services--worlds .fp-service:hover { border-color: color-mix(in srgb, var(--fp-world) 60%, transparent); }
.fp-services--worlds .fp-service::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at var(--fp-px, 70%) var(--fp-py, 20%), color-mix(in srgb, var(--fp-world) 22%, transparent) 0%, transparent 70%); opacity: 0; transition: opacity 500ms var(--fp-ease-out); pointer-events: none; }
.fp-services--worlds .fp-service:hover::before, .fp-services--worlds .fp-service.is-in::before { opacity: 1; }
.fp-services--worlds .fp-service__inner { position: relative; display: grid; gap: var(--fp-space-3); padding: clamp(1.25rem, 2.5vw, 2rem); height: 100%; }
.fp-services--worlds .fp-service__num { font-family: var(--fp-font-mono); font-size: var(--fp-text-xs); color: var(--fp-accent-2); letter-spacing: 0.1em; }
.fp-services--worlds .fp-service__art { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--fp-radius-md); overflow: hidden; background: radial-gradient(80% 70% at 50% 110%, color-mix(in srgb, var(--fp-world) 18%, transparent) 0%, transparent 70%), #0f0e0c; border: 1px solid rgba(255,255,255,0.08); }
.fp-services--worlds .fp-service__art .fp-world { width: 100%; height: 100%; display: block; }
.fp-services--worlds .fp-service__body { display: grid; gap: 0.6rem; align-content: start; }
.fp-services--worlds .fp-service__title { font-family: var(--fp-font-display); font-size: var(--fp-text-xl); font-weight: 500; letter-spacing: var(--fp-tracking-display); line-height: 1.1; }
.fp-services--worlds .fp-service__title a { color: inherit; text-decoration: none; }
.fp-services--worlds .fp-service__tagline { color: var(--fp-accent-2); font-size: var(--fp-text-md); }
.fp-services--worlds .fp-service__summary { color: #c9c3b8; font-size: var(--fp-text-sm); max-width: 48ch; }
.fp-services--worlds .fp-service__offers li { border-color: rgba(255,255,255,0.14); color: #e4ded2; background: rgba(255,255,255,0.04); }
.fp-services--worlds .fp-service__cta { color: var(--fp-accent-2); }
.fp-services--worlds .fp-service__actions { margin-top: auto; }
.fp-services--worlds .fp-service[data-fp-service="digital_marketing"] { --fp-world: var(--fp-accent); --fp-world-2: var(--fp-accent-2); }
.fp-services--worlds .fp-service[data-fp-service="branding_design"] { --fp-world: var(--fp-accent-2); --fp-world-2: #fff6df; }
.fp-services--worlds .fp-service[data-fp-service="web_ecommerce"] { --fp-world: var(--fp-cool); --fp-world-2: #e6ecf5; }
.fp-services--worlds .fp-service[data-fp-service="paid_advertising"] { --fp-world: var(--fp-accent); --fp-world-2: var(--fp-accent-2); }
.fp-services--worlds .fp-service[data-fp-service="promo_gifts"] { --fp-world: var(--fp-accent-2); --fp-world-2: #fff6df; }
@media (min-width: 48rem) { .fp-services--worlds .fp-service { grid-column: span 3; } }
@media (min-width: 64rem) {
	.fp-services--worlds .fp-service { grid-column: span 2; }
	.fp-services--worlds .fp-service:nth-child(1), .fp-services--worlds .fp-service:nth-child(2) { grid-column: span 3; }
	.fp-services--worlds .fp-service:nth-child(1) .fp-service__inner, .fp-services--worlds .fp-service:nth-child(2) .fp-service__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
	.fp-services--worlds .fp-service:nth-child(1) .fp-service__num, .fp-services--worlds .fp-service:nth-child(2) .fp-service__num { grid-column: 1 / -1; }
}

/* World art reveal (CSS; .is-in from interactions.js / GSAP) */
.fp-world .w-rise, .fp-world .w-pop, .fp-world .w-draw { transition: opacity 700ms var(--fp-ease-out), transform 900ms var(--fp-ease-out); transition-delay: calc(var(--w-i, 0) * 90ms); transform-box: fill-box; transform-origin: center; }
html.fp-ix .fp-service:not(.is-in) .fp-world .w-rise, html.fp-motion .fp-service:not(.is-in) .fp-world .w-rise { opacity: 0; transform: translateY(26px); }
html.fp-ix .fp-service:not(.is-in) .fp-world .w-pop, html.fp-motion .fp-service:not(.is-in) .fp-world .w-pop { opacity: 0; transform: scale(0.6); }
html.fp-ix .fp-service:not(.is-in) .fp-world .w-draw, html.fp-motion .fp-service:not(.is-in) .fp-world .w-draw { opacity: 0; }
.fp-world .w-pop > * { transition: opacity 600ms var(--fp-ease-out), transform 700ms var(--fp-ease-out); transition-delay: calc(var(--w-i, 0) * 90ms); transform-box: fill-box; transform-origin: center; }
html.fp-ix .fp-service:not(.is-in) .fp-world .w-pop > *, html.fp-motion .fp-service:not(.is-in) .fp-world .w-pop > * { opacity: 0; transform: scale(0.5); }
.fp-world .w-bars rect { transition: transform 900ms var(--fp-ease-out); transform-box: fill-box; transform-origin: bottom; }
html.fp-ix .fp-service:not(.is-in) .fp-world .w-bars rect, html.fp-motion .fp-service:not(.is-in) .fp-world .w-bars rect { transform: scaleY(0.1); }
.fp-services--worlds .fp-service:hover .fp-world .w-pop > * { transform: translateY(-3px); }

/* ---------- In-house showcase ---------- */
.fp-showcase { display: grid; gap: var(--fp-space-3); }
.fp-showcase__list { list-style: none; display: grid; gap: var(--fp-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.fp-showcase__card { position: relative; display: grid; gap: var(--fp-space-3); padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--fp-radius-lg); border: 1px solid var(--fp-glass-line); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); --fp-tilt: 3; overflow: clip; }
.fp-showcase__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 45% at var(--fp-px, 50%) var(--fp-py, 0%), var(--fp-glow) 0%, transparent 70%); opacity: 0; transition: opacity 500ms var(--fp-ease-out); pointer-events: none; }
.fp-showcase__card:hover::before { opacity: 0.8; }
.fp-showcase__media { position: relative; display: grid; place-items: center; padding: 1rem 0 0; min-height: 15rem; }
.fp-showcase__card--laptop .fp-device--laptop { width: 100%; }
.fp-showcase__card--phone .fp-device--phone { width: 38%; max-width: 12rem; transform: rotateZ(-3deg); }
.fp-showcase__body { display: grid; gap: 0.6rem; position: relative; }
.fp-showcase__title { font-family: var(--fp-font-display); font-size: var(--fp-text-xl); font-weight: 500; line-height: 1.12; letter-spacing: var(--fp-tracking-display); }
.fp-showcase__text { color: #c9c3b8; font-size: var(--fp-text-sm); }
.fp-showcase .fp-link { color: var(--fp-accent-2); }
.fp-showcase__note { font-size: var(--fp-text-xs); color: var(--fp-fg-faint); max-width: 70ch; }
@media (min-width: 64rem) { .fp-showcase__list { grid-template-columns: 1.2fr 0.8fr 1fr; } }

/* ---------- World art on service pages (framed dark panel on paper) ---------- */
.fp-svc__art--world { width: min(100%, 34rem); aspect-ratio: 4 / 3; border-radius: var(--fp-radius-lg); overflow: hidden; background: radial-gradient(80% 70% at 50% 110%, color-mix(in srgb, var(--fp-world, var(--fp-accent)) 22%, transparent) 0%, transparent 70%), #0f0e0c; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.45); filter: none; transform: rotateX(var(--fp-rx, 0deg)) rotateY(var(--fp-ry, 0deg)); transition: transform 500ms var(--fp-ease-out); --fp-world: var(--fp-accent); --fp-world-2: var(--fp-accent-2); }
.fp-svc__art--world .fp-world { width: 100%; height: 100%; display: block; }
.fp-svc__art--world[data-fp-service="web_ecommerce"] { --fp-world: var(--fp-cool); --fp-world-2: #e6ecf5; }
.fp-svc__art--world[data-fp-service="branding_design"], .fp-svc__art--world[data-fp-service="promo_gifts"] { --fp-world: var(--fp-accent-2); --fp-world-2: #fff6df; }
.fp-svc__hero { perspective: 120rem; }