/* Tamiyouz Ultra Premium V2 — visible-by-default cinematography. */
:root{--tyz-u2-metal:#dfb67c;--tyz-u2-frame:rgba(212,162,94,.53)}
html[data-tyz-theme="dark"]{--tyz-u2-metal:#ebca97;--tyz-u2-frame:rgba(238,202,151,.58)}
/* Metallic light follows the pointer around a card edge. No content overlays. */
.tyz-u2-surface{position:relative;isolation:isolate}
.tyz-u2-surface>.tyz-u2-edge{position:absolute;inset:0;z-index:4;pointer-events:none;border:1px solid rgba(213,162,96,.12);border-radius:inherit;
background:radial-gradient(320px circle at var(--tyz-u2-x,50%) var(--tyz-u2-y,50%),rgba(255,226,173,.64),rgba(211,149,65,.2) 36%,transparent 78%) border-box;
opacity:0;transition:opacity .32s ease;
-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude}
@media(hover:hover) and (pointer:fine){.tyz-u2-surface:is(:hover,:focus-within)>.tyz-u2-edge{opacity:1}}
/* Cinematic lens: one reveal per image, never blanking underlying photographs. */
.tyz-u2-scene{position:relative;isolation:isolate}
.tyz-u2-scene>.tyz-u2-lens{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit;
background:linear-gradient(122deg,rgba(6,19,38,.04),transparent 47%,rgba(228,184,118,.045))}
.tyz-u2-scene>.tyz-u2-lens:before{content:"";position:absolute;top:-60%;bottom:-60%;left:-50%;width:36%;opacity:0;
transform:translate3d(0,0,0) skewX(-24deg);
background:linear-gradient(90deg,transparent,rgba(255,239,202,.045) 25%,rgba(255,238,202,.25) 50%,rgba(255,238,202,.045) 75%,transparent)}
@keyframes tyzU2Shine{0%{opacity:0;transform:translate3d(0,0,0) skewX(-24deg)}
16%{opacity:.73}70%{opacity:.55}
100%{opacity:0;transform:translate3d(580%,0,0) skewX(-24deg)}}
@keyframes tyzU2Tone{from{filter:brightness(.91) saturate(.92)}to{filter:brightness(1) saturate(1)}}
@media(prefers-reduced-motion:no-preference){
.tyz-u2-scene.tyz-u2-seen>.tyz-u2-lens:before{animation:tyzU2Shine 1.6s cubic-bezier(.17,.75,.3,1) 1 both}
.tyz-u2-scene.tyz-u2-seen img{animation:tyzU2Tone 1.14s cubic-bezier(.22,1,.36,1) both}}
/* Service icon elevation and editorial project captions. */
#tyz-home-v21 .tyz-service__icon{transition:translate .45s cubic-bezier(.22,1,.36,1),filter .45s ease}
#tyz-home-v21 .tyz-xp-project-card__more,
#tyz-home-v21 .tyz5-bento-grid .tyz-service>a{transition:letter-spacing .34s ease,color .3s ease}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
#tyz-home-v21 .tyz-service:hover .tyz-service__icon{translate:0 -4px;filter:drop-shadow(0 7px 12px rgba(211,158,91,.23))}
#tyz-home-v21 .tyz-xp-project-card:hover .tyz-xp-project-card__more,
#tyz-home-v21 .tyz-service:hover>a{letter-spacing:.012em}}
#tyz-home-v21 .tyz-xp-project-card__index{box-shadow:0 6px 20px rgba(3,14,27,.12),inset 0 1px rgba(255,242,217,.15)}
/* Small magnetic response without overriding existing :hover transform */
.tyz-u2-magnetic{translate:var(--tyz-u2-mx,0px) var(--tyz-u2-my,0px);
transition:translate .23s cubic-bezier(.18,.82,.24,1)}
.tyz-u2-magnetic:is(:focus-visible,:active){translate:0 0!important}
@media(max-width:767px){.tyz-u2-edge,.tyz-u2-lens{display:none!important}.tyz-u2-magnetic{translate:0 0!important}}
@media(prefers-reduced-motion:reduce){
.tyz-u2-edge,.tyz-u2-lens{display:none!important}
.tyz-u2-scene img,.tyz-u2-scene.tyz-u2-seen img{animation:none!important;filter:none!important}
.tyz-u2-magnetic{translate:0 0!important;transition:none!important}
#tyz-home-v21 .tyz-service__icon{translate:0 0!important;transition:none!important}}
@media print{.tyz-u2-edge,.tyz-u2-lens{display:none!important}.tyz-u2-magnetic{translate:0 0!important}}
