/* TAMIYOUZ SIGNATURE MOTION II | Cinematic, accessible, source-image-preserving */ #tyz-portfolio { --tyz-premium-gold: #d6b47c; --tyz-premium-gold-light: #f1d8a8; --tyz-premium-curve: cubic-bezier(.16,1,.3,1); } #tyz-portfolio .tyz-pb-intro { position:relative; isolation:isolate; } #tyz-portfolio .tyz-pb-intro::before { content:""; position:absolute; z-index:-1; pointer-events:none; inset:0; background:radial-gradient(ellipse at 67% 43%, rgba(216,179,109,.13),transparent 43%), radial-gradient(ellipse at 75% 70%, rgba(16,57,86,.08),transparent 55%); animation:tyz-premium-breathe 8s ease-in-out infinite alternate; } #tyz-portfolio .tyz-pb-intro-copy h2 { text-wrap:balance; text-shadow:0 5px 30px rgba(24,44,62,.045); } #tyz-portfolio .tyz-pb-kicker { display:inline-flex; align-items:center; gap:14px; } #tyz-portfolio .tyz-pb-kicker::before { content:""; width:26px;height:1px; background:linear-gradient(90deg,transparent,#c9a16a); transform-origin:right; animation:tyz-premium-line-in 1.2s var(--tyz-premium-curve) backwards; } #tyz-portfolio .tyz-pb-book-cover{ transform-style:preserve-3d; backface-visibility:hidden; will-change:transform; background:radial-gradient(circle at 76% 18%,rgba(249,220,153,.19),transparent 30%), linear-gradient(135deg,#223550 0%,#0b1930 46%,#061225 100%); border:1px solid rgba(235,194,116,.55); box-shadow:-9px 0 0 #e0c99c,-13px 0 0 #20384d, 0 25px 68px rgba(3,14,30,.34),inset 10px 0 24px rgba(0,0,0,.28), inset -3px 0 0 rgba(236,201,138,.22); } #tyz-portfolio .tyz-pb-book-cover::after { content:"";position:absolute;inset:-35% -110%; height:auto;width:auto;pointer-events:none; border:0;border-radius:0;box-shadow:none; background:linear-gradient(110deg,transparent 39%,rgba(255,244,214,.015) 43%, rgba(255,231,179,.28) 49%,rgba(255,247,223,.065) 52%,transparent 58%); transform:translateX(-78%) rotate(-9deg); opacity:.56; transition:transform 1.25s cubic-bezier(.18,.77,.21,1),opacity 1.1s; } #tyz-portfolio .tyz-pb-cover-trigger:hover .tyz-pb-book-cover::after, #tyz-portfolio .tyz-pb-cover-trigger:focus-visible .tyz-pb-book-cover::after { transform:translateX(80%) rotate(-9deg);opacity:.9; } #tyz-portfolio .tyz-pb-cover-trigger:hover .tyz-pb-book-cover, #tyz-portfolio .tyz-pb-cover-trigger:focus-visible .tyz-pb-book-cover { transform:perspective(1200px) rotateY(-29deg) rotateX(8deg) translateY(-15px) scale(1.035); box-shadow:-12px 0 0 #e0c99c,-16px 0 0 #20384d, 0 53px 95px rgba(4,19,38,.42),inset 10px 0 22px rgba(0,0,0,.28), 0 0 0 1px rgba(219,174,101,.2); } #tyz-portfolio .tyz-pb-cover-symbol { animation:tyz-premium-gold-pulse 5s ease-in-out infinite; } #tyz-portfolio .tyz-pb-cover-under b {transition:transform .36s var(--tyz-premium-curve)} #tyz-portfolio .tyz-pb-cover-trigger:hover .tyz-pb-cover-under b{transform:translate(-7px,-6px) rotate(-15deg)} /* Card tilt follows pointer and retains a CSS-only fallback on touch. */ @media(hover:hover) and (pointer:fine){ #tyz-portfolio .tyz-pb-project button { transform:perspective(1100px) translateY(var(--tyz-card-lift,0px)) rotateX(var(--tyz-card-tilt-x,0deg)) rotateY(var(--tyz-card-tilt-y,0deg)); transform-style:preserve-3d; transition:transform .33s cubic-bezier(.18,.75,.22,1), border-color .3s,box-shadow .35s; } #tyz-portfolio .tyz-pb-project button:hover{ --tyz-card-lift:-8px; box-shadow:0 33px 70px rgba(12,26,46,.18),0 0 0 1px rgba(198,151,72,.25); } } #tyz-portfolio .tyz-pb-card-art::before{ content:"";position:absolute;z-index:2;inset:-25%; pointer-events:none; background:linear-gradient(105deg,transparent 40%,rgba(255,236,189,.1) 48%, rgba(255,229,172,.25) 50%,transparent 57%); transform:translateX(110%);transition:transform .85s cubic-bezier(.18,.65,.25,1); } #tyz-portfolio .tyz-pb-project button:hover .tyz-pb-card-art::before, #tyz-portfolio .tyz-pb-project button:focus-visible .tyz-pb-card-art::before { transform:translateX(-95%); } #tyz-portfolio .tyz-pb-project button:hover img{ transform:scale(1.11); filter:saturate(1.08) contrast(1.04); } #tyz-portfolio .tyz-pb-card-art img {transition:transform .9s var(--tyz-premium-curve),filter .8s} #tyz-portfolio .tyz-pb-gallery-count{ transition:box-shadow .5s,transform .5s,background .5s; backdrop-filter:blur(8px); } #tyz-portfolio .tyz-pb-project button:hover .tyz-pb-gallery-count{ background:rgba(18,31,46,.95); box-shadow:0 0 0 1px rgba(255,229,170,.35), 0 0 22px rgba(227,178,93,.45); transform:translateY(-2px); } /* All modal atmospherics are pseudo-elements: 0 additional image downloads. */ #tyz-portfolio .tyz-pb-modal-bg{ overflow:hidden; background:radial-gradient(ellipse at 50% 29%,#1d3552 0%,#08162b 50%,#020814 100%); opacity:1; } #tyz-portfolio .tyz-pb-modal-bg::before, #tyz-portfolio .tyz-pb-modal-bg::after{ content:"";position:absolute;inset:-28%;pointer-events:none; background: radial-gradient(ellipse 23% 29% at 25% 35%,rgba(220,165,82,.18),transparent 85%), radial-gradient(ellipse 28% 26% at 84% 67%,rgba(91,137,171,.16),transparent 90%); animation:tyz-premium-ambient 13s ease-in-out infinite alternate; filter:blur(25px); } #tyz-portfolio .tyz-pb-modal-bg::after{ inset:0;opacity:.13;filter:none; background-image:repeating-linear-gradient(96deg, transparent 0, transparent 13px,rgba(228,192,123,.25) 14px,transparent 15px); mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 75%); animation:tyz-premium-ambient 24s linear infinite alternate-reverse; } #tyz-portfolio .tyz-pb-modal[aria-hidden="false"] .tyz-pb-modal-bg{ animation:tyz-premium-backdrop .65s both; } #tyz-portfolio .tyz-pb-modal[aria-hidden="false"] .tyz-pb-book{ animation:tyz-premium-book-arrival 1.1s cubic-bezier(.14,.75,.16,1) both; } #tyz-portfolio .tyz-pb-modal[aria-hidden="true"].tyz-pb-premium-closing{ display:block; pointer-events:none; animation:tyz-premium-backdrop-out .34s ease-in forwards; } #tyz-portfolio .tyz-pb-modal[aria-hidden="true"].tyz-pb-premium-closing .tyz-pb-book { animation:tyz-premium-book-depart .34s ease-in both; } #tyz-portfolio .tyz-pb-book { transform-style:preserve-3d; box-shadow:0 55px 105px rgba(0,0,0,.38); } #tyz-portfolio .tyz-pb-book::before, #tyz-portfolio .tyz-pb-book::after{ content:"";position:absolute;pointer-events:none; left:1.2%;right:1.2%;bottom:-8px;height:16px; background:linear-gradient(180deg,#e7dcc6,#b9a589 64%,#594d47); border-radius:0 0 10px 10px;opacity:.75; transform:translateZ(-2px); box-shadow:0 16px 26px rgba(0,0,0,.23); } #tyz-portfolio .tyz-pb-book::after{ left:2.5%;right:2.5%;bottom:-13px;height:5px; background:linear-gradient(90deg,#887052,#e4d6bb 47%,#9f8968); opacity:.6;box-shadow:none; } #tyz-portfolio .tyz-pb-book-spine { background:linear-gradient(90deg,rgba(0,0,0,.31),rgba(0,0,0,.015) 34%, rgba(255,226,172,.12) 51%,rgba(0,0,0,.24) 86%); box-shadow:0 0 22px rgba(21,29,41,.12),0 0 2px rgba(217,176,95,.3); animation:tyz-premium-spine 6s ease-in-out infinite; } #tyz-portfolio .tyz-pb-flip-sheet { transform-style:preserve-3d; z-index:26; filter:drop-shadow(-12px 12px 18px rgba(6,15,32,.18)); will-change:transform; } #tyz-portfolio .tyz-pb-book[data-motion="next"] .tyz-pb-flip-sheet{ left:50%;transform-origin:0% 50%; } #tyz-portfolio .tyz-pb-book[data-motion="prev"] .tyz-pb-flip-sheet{ left:0;transform-origin:100% 50%; filter:drop-shadow(12px 12px 18px rgba(6,15,32,.18)); } #tyz-portfolio .tyz-pb-flip-front, #tyz-portfolio .tyz-pb-flip-back { overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:inset 0 0 18px rgba(93,63,33,.14), 0 15px 28px rgba(0,0,0,.13); } #tyz-portfolio .tyz-pb-flip-front::after, #tyz-portfolio .tyz-pb-flip-back::after { content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(33,23,14,.1),transparent 12%, rgba(255,253,243,.18) 56%,rgba(43,27,10,.18) 100%); mix-blend-mode:multiply; } #tyz-portfolio .tyz-pb-book[data-motion="next"] .tyz-pb-flip-front::after{ animation:tyz-premium-paper-light .98s ease-in-out both; } #tyz-portfolio .tyz-pb-book[data-motion="prev"] .tyz-pb-flip-front::after{ animation:tyz-premium-paper-light .98s ease-in-out reverse both; } #tyz-portfolio .tyz-pb-leaf { background-image:linear-gradient(90deg,rgba(85,53,25,.035),transparent 12%,transparent 86%,rgba(62,45,29,.05)); } #tyz-portfolio .tyz-pb-page-control button { position:relative;isolation:isolate;overflow:hidden; background:rgba(235,207,153,.06); border-color:rgba(238,203,137,.38); box-shadow:inset 0 1px 0 rgba(255,236,196,.08); transition:transform .35s var(--tyz-premium-curve), box-shadow .35s,border-color .35s,background .35s; } #tyz-portfolio .tyz-pb-page-control button::before { content:"";position:absolute;z-index:-1;inset:0; background:linear-gradient(115deg,transparent,rgba(250,216,149,.16),transparent); transform:translateX(-110%); transition:transform .56s var(--tyz-premium-curve); } #tyz-portfolio .tyz-pb-page-control button:hover::before{transform:translateX(105%)} #tyz-portfolio .tyz-pb-page-control button:not(:disabled):hover { transform:translateY(-3px); border-color:rgba(255,214,137,.7); box-shadow:0 12px 24px rgba(0,0,0,.22),0 0 20px rgba(219,170,88,.16); } #tyz-portfolio .tyz-pb-page-control button:not(:disabled):active {transform:translateY(0) scale(.96)} #tyz-portfolio [data-book-counter] { display:inline-block;min-width:96px;text-align:center; font-variant-numeric:tabular-nums; transition:filter .3s; } #tyz-portfolio [data-book-counter].tyz-pb-counter-pulse{ animation:tyz-premium-counter .4s cubic-bezier(.2,.9,.2,1); } #tyz-portfolio .tyz-pb-book-progress{height:3px;background:rgba(205,174,115,.15);border-radius:20px} #tyz-portfolio .tyz-pb-book-progress span{ background:linear-gradient(90deg,#94703c,#f2d79c,#c3954e); box-shadow:0 0 15px rgba(232,184,95,.45); } #tyz-portfolio .tyz-pb-modal-toolbar button { transition:border-color .3s,background .3s,transform .3s; } #tyz-portfolio .tyz-pb-modal-toolbar button:hover{ background:rgba(220,178,101,.18); border-color:rgba(255,228,177,.75); transform:translateY(-2px); } @keyframes tyz-premium-breathe {from{opacity:.48;transform:scale(.99)}to{opacity:1;transform:scale(1.04)}} @keyframes tyz-premium-line-in{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes tyz-premium-gold-pulse{0%,100%{text-shadow:0 0 17px rgba(218,171,88,.22)}50%{text-shadow:0 0 40px rgba(234,184,94,.62)}} @keyframes tyz-premium-ambient{0%{transform:translate(-2%,-1%) rotate(-3deg)}100%{transform:translate(3%,2%) rotate(4deg)}} @keyframes tyz-premium-backdrop{from{opacity:0;filter:brightness(1.3)}to{opacity:1;filter:brightness(1)}} @keyframes tyz-premium-backdrop-out{from{opacity:1}to{opacity:0}} @keyframes tyz-premium-book-arrival{ 0%{opacity:0;transform:perspective(1600px) translateY(86px) translateZ(-190px) rotateX(23deg) scale(.73); filter:blur(10px) drop-shadow(0 0 0 rgba(0,0,0,0))} 44%{opacity:1;transform:perspective(1600px) translateY(-18px) translateZ(45px) rotateX(-5deg) scale(1.045);filter:blur(0)} 73%{transform:perspective(1600px) translateY(7px) translateZ(8px) rotateX(1.5deg) scale(.994)} 100%{opacity:1;transform:none;filter:none} } @keyframes tyz-premium-book-depart{ from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(.88) translateY(38px) rotateX(8deg)} } @keyframes tyz-premium-paper-light{ 0%{opacity:.12;transform:translateX(-45%)} 50%{opacity:.8;transform:translateX(9%)} 100%{opacity:.16;transform:translateX(46%)} } @keyframes tyz-premium-spine{0%,100%{opacity:.8}50%{opacity:1}} @keyframes tyz-premium-counter{0%{opacity:.3;transform:translateY(8px);filter:blur(2px)} 100%{opacity:1;transform:none;filter:none}} /* Mobile: rich opening and book light, but avoid heavy pointer effects. */ @media(max-width:700px){ #tyz-portfolio .tyz-pb-book::before{bottom:-6px;height:10px} #tyz-portfolio .tyz-pb-book::after{bottom:-9px;height:4px} #tyz-portfolio .tyz-pb-modal-body{padding-bottom:max(20px,env(safe-area-inset-bottom))} #tyz-portfolio .tyz-pb-page-control button:hover{transform:none} } /* Reduced motion: no ambient loops, page turnover becomes immediate via book.js. */ @media(prefers-reduced-motion:reduce){ #tyz-portfolio .tyz-pb-intro::before, #tyz-portfolio .tyz-pb-kicker::before, #tyz-portfolio .tyz-pb-cover-symbol, #tyz-portfolio .tyz-pb-modal-bg::before, #tyz-portfolio .tyz-pb-modal-bg::after, #tyz-portfolio .tyz-pb-book-spine, #tyz-portfolio .tyz-pb-flip-front::after, #tyz-portfolio .tyz-pb-modal[aria-hidden="false"] .tyz-pb-modal-bg, #tyz-portfolio .tyz-pb-modal[aria-hidden="false"] .tyz-pb-book, #tyz-portfolio .tyz-pb-modal[aria-hidden="true"].tyz-pb-premium-closing, #tyz-portfolio .tyz-pb-modal[aria-hidden="true"].tyz-pb-premium-closing .tyz-pb-book, #tyz-portfolio [data-book-counter].tyz-pb-counter-pulse { animation:none!important; } #tyz-portfolio .tyz-pb-project button, #tyz-portfolio .tyz-pb-project button:hover, #tyz-portfolio .tyz-pb-book-cover, #tyz-portfolio .tyz-pb-book-cover::after, #tyz-portfolio .tyz-pb-page-control button, #tyz-portfolio .tyz-pb-card-art::before, #tyz-portfolio .tyz-pb-card-art img { transition:none!important; transform:none!important; } #tyz-portfolio .tyz-pb-modal[aria-hidden="true"].tyz-pb-premium-closing{display:none} } /* The unified WordPress header is a separate stacking context. Only promote the portfolio root while its modal is visible. */ #tyz-portfolio.tyz-pb-overlay-active { z-index:2147481000; } #tyz-portfolio.tyz-pb-overlay-active .tyz-pb-modal { z-index:2147482000; } /* True pointer-controlled page handling. The physical page tracks cursor/finger. */ #tyz-portfolio .tyz-pb-book{ cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; } #tyz-portfolio .tyz-pb-book img{-webkit-user-drag:none;pointer-events:none} #tyz-portfolio .tyz-pb-book[data-grabbing="true"]{ cursor:grabbing; } #tyz-portfolio .tyz-pb-book[data-grabbing="true"] .tyz-pb-flip-sheet{ pointer-events:none; filter:drop-shadow(calc(var(--tyz-turn-shade,0)*-22px) 14px 19px rgba(2,14,29,.28)) drop-shadow(2px 1px 4px rgba(44,30,12,.26)); } #tyz-portfolio .tyz-pb-flip-front, #tyz-portfolio .tyz-pb-flip-back{ border-top-right-radius:var(--tyz-paper-curl,0px); border-bottom-right-radius:var(--tyz-paper-curl,0px); } #tyz-portfolio .tyz-pb-flip-front::before, #tyz-portfolio .tyz-pb-flip-back::before{ content:"";position:absolute;pointer-events:none; z-index:9;inset:0; background:linear-gradient(90deg, rgba(53,35,14,.11),transparent 10%,rgba(255,254,248,.12) 48%, rgba(238,212,160,.25) 87%,rgba(35,23,13,.22)); opacity:calc(.15 + var(--tyz-turn-shade,0)*.72); transition:opacity .07s linear; border-radius:inherit; } #tyz-portfolio .tyz-pb-flip-sheet[data-dragging="true"]{ will-change:transform; } #tyz-portfolio .tyz-pb-leaf-page img{-webkit-user-drag:none} @media(hover:hover) and (pointer:fine){ #tyz-portfolio .tyz-pb-leaf:hover{box-shadow:inset 0 0 26px rgba(183,149,90,.1)} } @media(max-width:700px){ #tyz-portfolio .tyz-pb-book{touch-action:none} #tyz-portfolio .tyz-pb-leaf{padding:clamp(14px,4vw,22px)} } @media(prefers-reduced-motion:reduce){ #tyz-portfolio .tyz-pb-book{cursor:pointer} #tyz-portfolio .tyz-pb-flip-front::before, #tyz-portfolio .tyz-pb-flip-back::before{transition:none!important} }