/* ==========================================================================
   TRANSFORMATION — like the reel « Peintre ? »: a real site of the Collection (Glacis) in a laptop, cut into
   its real layers. The laptop turns a little aside, the layers lift off the screen, change one by one into the
   client's (Clerc Peintres) and land back: the new site. (transfo.js plays it; tools: the reel's captures)
   ========================================================================== */
.tf { position: relative; perspective: 2400px; perspective-origin: 50% 40%; }
.tf-world { position: relative; transform-style: preserve-3d; transform: rotateX(4deg) rotateY(-10deg); will-change: transform; }
.tf-pc { position: relative; transform-style: preserve-3d; padding: 1.4% 1.4% 1.6%; border-radius: 22px 22px 10px 10px;
  background: radial-gradient(circle at 50% 7px, #2C2A31 1.4px, #121014 2.2px, transparent 2.8px), #1B191C;
  box-shadow: inset 0 0 0 1.5px #4A454D, inset 0 0 0 3px #0E0D0F, 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -24px rgba(0, 0, 0, .6); }
.tf-bar { position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 8px 8px 0 0; background: linear-gradient(#F7F4EE, #ECE7DE); border-bottom: 1px solid rgba(20, 18, 21, .1); }
.tf-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; } .tf-bar > i:nth-child(2) { background: #FEBC2E; } .tf-bar > i:nth-child(3) { background: #28C840; }
.tf-url { position: absolute; left: 50%; top: 50%; width: 220px; height: 20px; transform: translate(-50%, -50%); border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 18, 21, .07); }
.tf-url b { position: absolute; inset: 0; display: grid; place-items: center; color: #4a454c; font: 500 11.5px/1 var(--text, sans-serif); }
.tf-url .u2 { opacity: 0; }
.tf-scr { position: relative; aspect-ratio: 1.6; transform-style: preserve-3d; border-radius: 0 0 6px 6px; background: #F8F5EF; }
.tf-fond { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0 0 6px 6px; }
.tf-fond.p { opacity: 0; }
.tf-lay { position: absolute; transform-style: preserve-3d; will-change: transform; }
.tf-cut { position: absolute; inset: 0; display: block; overflow: hidden; }
.tf-cut img { position: absolute; left: 0; top: 0; height: auto; max-width: none; transition: filter .4s; }
.tf-cut img.p { opacity: 0; clip-path: inset(0 100% 0 0); }
.tf-l-photo .tf-cut { border-radius: 1.6% / 3.5%; }
.tf.is-up .tf-cut img { filter: drop-shadow(0 18px 22px rgba(20, 18, 21, .3)); }
.tf.is-up .tf-l-photo .tf-cut, .tf.is-up .tf-l-titre .tf-cut { overflow: visible; }
.tf-tagl { position: absolute; left: 4%; bottom: calc(100% + 8px); padding: 7px 14px 8px; border-radius: 99px; background: var(--framboise, #FF4D7E); color: #141215;
  font: 800 13px/1 var(--disp, var(--text, sans-serif)); font-variation-settings: "wdth" 110; white-space: nowrap; opacity: 0; box-shadow: 0 8px 20px rgba(20, 18, 21, .3); }
.tf-base { position: absolute; left: -5%; right: -5%; top: 100%; height: 18px; border-radius: 3px 3px 40% 40% / 3px 3px 100% 100%;
  background: linear-gradient(#A9A39C, #A9A39C) 50% 0 / 15% 30% no-repeat, linear-gradient(#EFEBE5, #D3CDC5 55%, #9E978F); box-shadow: 0 22px 34px -12px rgba(0, 0, 0, .5); }
.tf-state { position: relative; margin: 48px 0 0; height: 2.4em; font: 700 15px/1 var(--text, sans-serif); }
.tf-state span { position: absolute; left: 50%; top: 0; display: inline-flex; padding: 10px 16px; border-radius: 99px; white-space: nowrap; transform: translateX(-50%); transition: opacity .5s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.tf-s0 { background: rgba(246, 241, 231, .12); box-shadow: inset 0 0 0 1px currentColor; }
.tf-s1 { background: var(--framboise, #FF4D7E); color: #141215; opacity: 0; transform: translateX(-50%) scale(.6) !important; }
.tf.is-client .tf-s0 { opacity: 0; }
.tf.is-client .tf-s1 { opacity: 1; transform: translateX(-50%) scale(1) !important; }
@media (max-width: 899px) { .tf-bar { height: 22px; } .tf-url { width: 150px; height: 15px; } .tf-url b { font-size: 9px; } .tf-tagl { font-size: 11px; padding: 5px 10px 6px; } .tf-state { margin-top: 30px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .tf-world { transform: none; } }
/* the screen alone (no laptop base), turned further aside so the layers can be seen leaving it */
.tf-base { display: none; }
.tf-world { transform: rotateX(8deg) rotateY(-24deg); }
/* the pieces that leave the screen are outlined, so it reads at once what comes out; the one changing is bright */
.tf-lay::after { content: ""; position: absolute; inset: -5px; border-radius: 10px; box-shadow: 0 0 0 1.5px rgba(246, 241, 231, .55); opacity: 0; transition: opacity .4s, box-shadow .4s; pointer-events: none; }
.tf.is-up .tf-lay::after { opacity: 1; }
.tf.is-up .tf-lay.is-focus::after { box-shadow: 0 0 0 3px var(--framboise, #FF4D7E), 0 0 26px 2px rgba(255, 77, 126, .45); }
.tf-l-photo::after { border-radius: 14px; }

/* ---------- more 3D: a screen with a body (a back plate, its edge catching light), a glare sweeping the glass,
   the Arobaz ring far behind in the same space, a soft pool of light on the floor, and the whole thing floating ---------- */
.tf { perspective: 1800px; }
.tf-float { transform-style: preserve-3d; animation: tf-float 7s ease-in-out infinite; }
@keyframes tf-float { 0%, 100% { transform: translateY(0) rotateY(0deg) rotateX(0deg); } 50% { transform: translateY(-12px) rotateY(3deg) rotateX(-1.5deg); } }
.tf-back { position: absolute; inset: 0; border-radius: 24px 24px 12px 12px; transform: translateZ(-22px); background: linear-gradient(135deg, #2b2830, #0c0b0d 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 30px 50px 80px -20px rgba(0, 0, 0, .75); }
.tf-back::after { content: ""; position: absolute; top: 4%; bottom: 4%; left: 100%; width: 22px; transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #4A454D, #18161a); border-radius: 0 6px 6px 0; }
.tf-pc { box-shadow: inset 0 0 0 1.5px #5a545e, inset 0 0 0 3px #0E0D0F, 0 0 0 1px rgba(255, 255, 255, .14), -1px -1px 0 1px rgba(255, 255, 255, .08); }
.tf-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 0 0 6px 6px; overflow: hidden; transform: translateZ(1px);
  background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%); }
.tf-glare::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-12deg); animation: tf-sweep 7s ease-in-out infinite; }
@keyframes tf-sweep { 0%, 55% { left: -40%; } 85%, 100% { left: 130%; } }
.tf-ring { position: absolute; z-index: -1; right: -14%; top: -26%; width: 62%; aspect-ratio: 1; height: auto; color: var(--framboise, #FF4D7E); transform: translateZ(-260px) rotate(0deg); opacity: .95; animation: tf-ring 40s linear infinite; }
@keyframes tf-ring { to { transform: translateZ(-260px) rotate(360deg); } }
.tf-floor { position: absolute; left: 6%; right: 6%; top: 88%; height: 26%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 77, 126, .32), rgba(255, 77, 126, 0) 70%); filter: blur(6px); pointer-events: none; animation: tf-floor 7s ease-in-out infinite; }
@keyframes tf-floor { 50% { transform: scale(.92); opacity: .75; } }
.tf.is-up .tf-cut img { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45)); }
.tf.is-up .tf-lay::after { box-shadow: 0 0 0 1.5px rgba(246, 241, 231, .7), 0 0 18px rgba(246, 241, 231, .12); }
.tf-state { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .tf-float, .tf-glare::after, .tf-ring, .tf-floor { animation: none; } }
.tf-ring { right: -6%; top: -22%; width: 56%; }
.pe-tf .tf-ring { right: 6%; top: -16%; width: 50%; }
/* off screen, every loop stops (Safari keeps painting CSS animations otherwise) */
.tf.is-off .tf-float, .tf.is-off .tf-glare::after, .tf.is-off .tf-ring, .tf.is-off .tf-floor { animation-play-state: paused; }