/* ==========================================================================
   Inner pages, art layer (loads after art-services.css).
   About, services, FAQ, contact, free audit, thank-you, 404 and the closing contact block on every
   page but the home one. One rendered object per page (assets/img/art/pg-*.webp, the 3D icon family at
   sculpture scale: smoked graphite and clear glass, chrome, small blue anodized accents, cyan rim from
   the upper left) replaces the doodle on the hero slab. Everything here is scoped to body:not(.home)
   or to pg-only classes, so the home page keeps its own rules in home.css.
   ========================================================================== */

/* ---------- Base (home.css carries the same two lines, but only loads on the front page) ---------- */
:where(body:not(.home)) .tb-art { position: relative; display: block; pointer-events: none; user-select: none; }
:where(body:not(.home)) .tb-art img { display: block; width: 100%; height: auto; }
:where(body:not(.home)) .tb-art[data-reveal] { transform: translateY(40px) scale(.95); transition: opacity 1.2s var(--tb-ease), transform 1.5s var(--tb-m-out, var(--tb-ease)); }
:where(body:not(.home)) .tb-art[data-reveal].is-in { transform: none; }

/* ---------- Hero slab: the object stands in front of the slab, larger than its face ---------- */
.tb-plate--pgart .tb-pg-plate__art {
	position: absolute; z-index: 1; left: 50%; top: 47%; width: 100%;
	translate: -50% -50%;
}
/* Light from the upper left: the object throws its shadow down and to the right, onto the slab. */
.tb-pg-plate__art img { filter: drop-shadow(12px 20px 14px rgba(0, 6, 30, .55)) drop-shadow(30px 52px 46px rgba(0, 6, 30, .42)); }
.tb-hero--inner .tb-plate--pgart .tb-plate__chip { z-index: 2; }

/* Per page: size and seat on the slab. */
.tb-plate--pg-pg-about-gyro .tb-pg-plate__art { width: 100%; top: 45%; }
.tb-plate--pg-pg-services-grid .tb-pg-plate__art { width: 84%; left: 66%; top: 42%; } /* on the part of the bleeding slab that stays on the page */
.tb-plate--pg-pg-faq-ask .tb-pg-plate__art { width: 90%; top: 47%; }
.tb-plate--pg-pg-contact-mail .tb-pg-plate__art { width: 88%; top: 42%; }
.tb-plate--pg-pg-thanks-seal .tb-pg-plate__art { width: 96%; top: 48%; }
.tb-plate--pg-pg-404-broken .tb-pg-plate__art { width: 118%; left: 58%; top: 50%; rotate: -8deg; }

@media (prefers-reduced-motion: no-preference) {
	/* Rises onto the slab with the plate's own entrance; transform only, so it is never caught invisible. */
	.tb-pg-plate__art img { animation: tb-pg-rise 1.6s var(--tb-ease) .25s both, tb-pg-float 7s ease-in-out 2s infinite; }
	@keyframes tb-pg-rise { from { transform: translate3d(0, 34px, 0) scale(.93); } }
	@keyframes tb-pg-float { 50% { transform: translate3d(0, -8px, 0); } }
}

@media (max-width: 960px) {
	/* The slab drops under the copy: leave headroom for the object rising above it. */
	.tb-plate--pgart { margin-top: 48px; }
	.tb-plate--pg-pg-services-grid .tb-pg-plate__art { left: 50%; }
	.tb-plate--pg-pg-404-broken .tb-pg-plate__art { width: 118%; left: 50%; }
}
@media (max-width: 640px) {
	.tb-plate--pgart { margin-top: 36px; }
	/* Thank-you and 404 are only a hero: their small slab now shows on phones too, slimmer. */
	.tb-plate--pgart.tb-plate--sm { width: min(62%, 230px); }
}

/* ---------- Services index: each row carries its service's 3D icon instead of a doodle ---------- */
.tb-index__icon3d { display: block; width: 100%; max-width: 104px; justify-self: center; pointer-events: none; }
.tb-index__icon3d .tb-icon3d { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(6px 10px 8px rgba(0, 0, 0, .5)) drop-shadow(14px 24px 22px rgba(0, 0, 0, .3)); transition: transform .6s var(--tb-ease); }
.tb-room--blue .tb-index__icon3d .tb-icon3d { filter: drop-shadow(0 0 .5px rgba(255, 255, 255, .5)) drop-shadow(6px 10px 10px rgba(0, 18, 80, .42)) drop-shadow(14px 24px 24px rgba(0, 14, 70, .3)); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tb-index__row:hover .tb-index__icon3d .tb-icon3d { transform: translateY(-6px) rotate(-4deg) scale(1.06); }
}
@media (max-width: 640px) {
	.tb-index__icon3d { grid-column: 3; grid-row: 1 / span 2; align-self: start; width: 64px; }
}

/* ---------- Closing contact block: the glass chat bubble perched on the form's top corner ---------- */
body:not(.home) .tb-contact.tb-field--blue .tb-contact__form { overflow: visible; }
body:not(.home) .tb-contact__form-head { position: relative; }
body:not(.home) .tb-contact__art { position: absolute; z-index: 2; inset-inline-end: clamp(-112px, -6.2vw, -56px); top: clamp(-124px, -8vw, -84px); width: clamp(120px, 11.8vw, 170px); rotate: 6deg; }
body:not(.home) .tb-contact__art img { filter: drop-shadow(10px 16px 14px rgba(0, 0, 0, .6)) drop-shadow(26px 44px 40px rgba(0, 0, 0, .45)); }
@media (max-width: 640px) {
	/* Phones: no room above the card (the channel list sits right there), so the bubble stays in the head. */
	body:not(.home) .tb-contact__art { position: static; flex: none; width: 92px; margin: -18px -6px -18px 0; }
}

/* ---------- Free audit: a glass magnifier over a dashboard tile, on the form's outer top corner ---------- */
.tb-audit__form { position: relative; overflow: visible; }
.tb-audit__art { position: absolute; z-index: 2; inset-inline-end: max(clamp(-64px, -3.6vw, -28px), calc(16px - var(--tb-gutter))); /* never past the screen edge */ top: clamp(-112px, -7vw, -76px); width: clamp(150px, 15vw, 220px); rotate: -4deg; }
.tb-audit__art img { filter: drop-shadow(10px 16px 14px rgba(0, 10, 50, .5)) drop-shadow(26px 44px 40px rgba(0, 10, 50, .4)); }
@media (prefers-reduced-motion: no-preference) {
	.tb-audit__art img { animation: tb-pg-rise 1.6s var(--tb-ease) .4s both, tb-pg-float 7s ease-in-out 2.2s infinite; }
}
@media (max-width: 960px) {
	.tb-audit__form { margin-top: 60px; }
	.tb-audit__art { inset-inline-end: calc(14px - var(--tb-gutter)); top: -84px; width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
	body:not(.home) .tb-art[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Baked shadows (iOS WebKit fix) ----------
   iPhone WebKit painted CSS drop-shadow() on these large alpha images in two passes: first the image's
   rectangle as a dark gradient box, then the real contour shadow a second later. The contact + ambient
   shadows are now baked into every file in assets/img/art and assets/img/icons, on a canvas 1.786x the
   object (a transparent margin that holds the shadow). So: no runtime filter at all, and `scale` brings
   the object back to its exact previous size and position. Re-baking: scratchpad bake step, K = 1.786. */
img[src*="/assets/img/art/"],
img[src*="/assets/img/icons/"] { filter: none !important; scale: 1.786; }