/* ============================================================ UMEA LAB — expérience scroll type "Watches & Wonders" Vert velours, blanc, noir ; casquettes en couleur. ============================================================ */ @font-face { font-family: "Dahlia"; src: url("../fonts/Dahlia-BoldCondensed.otf") format("opentype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Naskh"; src: url("../fonts/Naskh.ttf") format("truetype"); font-display: swap; } :root { /* Trois couleurs : vert velours foncé, blanc, noir. (échantillonnés dans la photo d'accueil) */ --velours: #0b2320; /* vert velours foncé */ --velours-deep: #051413; /* le creux des plis */ --velours-lit: #0e4a3c; /* le velours éclairé : sert d'accent */ /* du blanc (fonds) au noir (encre) */ --g-950: #ffffff; --g-900: #fafafa; --g-850: #f2f2f3; --g-800: #e4e4e6; /* bordures */ --g-700: #d3d3d6; --g-600: #adadb2; --g-500: #86868c; --g-400: #56565c; /* texte secondaire */ --g-300: #2e2e33; --g-200: #19191c; --g-100: #111114; /* texte courant */ --g-50: #0a0a0c; /* noir : titres */ /* le pied de page : marron cuir, dans le ton des cadres */ --brun: #2c1a13; --brun-deep: #1d100b; --brun-lit: #5c3d2a; /* accent de la marque */ --red: var(--velours-lit); --red-deep: var(--velours); /* Mouvement : deux courbes pour tout le site, et rien d'autre. La première pour ce qui entre en scène (départ franc, longue traîne), la seconde pour les objets d'interface. */ --ease-scene: cubic-bezier(0.22, 0.61, 0.24, 1); --ease-doux: cubic-bezier(0.4, 0, 0.2, 1); --display: "Dahlia", "Arial Narrow", sans-serif; --body: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { /* Aucun calage : le scroll est entièrement libre, la page ne glisse jamais toute seule vers l'écran suivant. C'est la barre de progression, à droite, qui dit où l'on en est. */ scroll-snap-type: none; /* Sans ça, un débordement de quelques pixels (arrondi de police, cadre collé à un bord) élargit tout le viewport horizontal sur mobile : bande blanche visible en haut et sur tout le flanc droit. « clip » et non « hidden » : hidden (sans overflow-y déclaré à côté) promeut silencieusement l'axe vertical en scroll auto, ce qui casse position:sticky pour tout ce qui suit dans la page (la galerie mobile, notamment) — clip ne crée pas de conteneur de défilement. */ overflow-x: clip; } body { /* Le fond du n'est jamais visible en usage normal (chaque écran pose sa propre couleur), sauf à deux endroits sur iOS : le rebond élastique en haut/bas de page, et la zone sous l'encoche. Safari peint ces deux zones avec CETTE couleur, pas avec celle de l'écran affiché — un fond blanc y créait donc des bandes blanches alors que le site est entièrement sombre. --velours-deep plutôt que --velours : la photo d'accueil est plus sombre sur ses bords (vignette) que le vert plat de la charte, échantillonné à l'écran c'est --velours-deep qui s'en rapproche. */ background: var(--velours-deep); color: var(--g-100); font-family: var(--body); transition: background-color 0.4s ease; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* voir le commentaire sur html : clip, pas hidden, pour ne pas casser position:sticky plus bas dans la page */ overflow-x: clip; } ::selection { background: var(--red); color: #fff; } img, svg { max-width: 100%; display: block; } /* ---------- Freins à la récupération des visuels ---------- À dire clairement : on NE PEUT PAS empêcher la copie d'une image affichée dans un navigateur. Une capture d'écran suffit toujours, et les fichiers restent lisibles dans l'onglet réseau. Ce qui suit ne sert qu'à écarter les gestes faciles — glisser-déposer, clic droit « enregistrer l'image », appui long sur mobile. La vraie protection est ailleurs : en-têtes anti-hotlinking (.htaccess) et définition servie juste suffisante pour l'écran, jamais les fichiers d'atelier. */ img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } a { color: inherit; text-decoration: none; } .red { color: var(--red); } .cap-svg { width: 100%; height: auto; aspect-ratio: 800 / 620; } /* ---------- Chrome fixe (nav, compteur, points) ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; /* + l'encoche : en haut en portrait, sur les côtés en paysage. Sans ça, la marque déborde sous la découpe et le fond du (blanc) se voit dans la zone que le safe-area réserve. */ padding-top: calc(22px + env(safe-area-inset-top, 0px)); padding-right: calc(clamp(20px, 4vw, 48px) + env(safe-area-inset-right, 0px)); padding-bottom: 22px; padding-left: calc(clamp(20px, 4vw, 48px) + env(safe-area-inset-left, 0px)); pointer-events: none; } .nav > * { pointer-events: auto; } /* Le monogramme « ul » dans l'angle haut droit — raccourci vers le contact. Même dessin que l'icône d'onglet. */ .mark { grid-column: 3; justify-self: end; font-family: var(--display); font-size: 24px; letter-spacing: 0.08em; color: var(--red); transition: transform 0.3s ease, opacity 0.3s ease; } .mark:hover { transform: translateY(-2px); opacity: 0.75; } /* nom de la marque, centré en haut */ .logo { grid-column: 2; justify-self: center; font-family: var(--display); font-size: 37px; letter-spacing: 0.045em; color: var(--red); /* même traitement que sur l'écran de chargement : le tracé est épaissi, la seule graisse de Dahlia ne suffisant pas */ -webkit-text-stroke: 0.9px currentColor; paint-order: stroke fill; transition: transform 0.3s ease; } .logo:hover { transform: scale(1.06); } /* ---------- Invitation au survol ---------- Elle ne paraît que sur la galerie et disparaît pour de bon au premier effleurement : une invitation qui insiste serait une gêne. */ .invite { position: fixed; left: 50%; bottom: clamp(26px, 4.6vh, 46px); transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 11px; padding: 9px 17px 9px 12px; border-radius: 999px; background: rgba(5, 20, 19, 0.42); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(9px); color: rgba(255, 255, 255, 0.9); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease-doux), visibility 0.6s, transform 0.6s var(--ease-scene); } /* visible seulement dans la galerie, et seulement tant qu'on n'a pas compris — la classe « comprise » est posée en JS au premier survol */ body.sur-galerie:not(.survol-compris) .invite { opacity: 1; visibility: visible; } /* au doigt, l'invitation reste : c'est la même interaction, on la nomme seulement autrement (le texte est posé en JS) */ /* le petit curseur qui tourne : il montre le geste au lieu de le dire */ .invite-rond { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); flex: 0 0 auto; } .invite-point { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); animation: rondeSurvol 3.4s var(--ease-doux) infinite; } /* le point décrit un petit tour, comme une main qui balaie le tirage */ @keyframes rondeSurvol { 0%, 100% { transform: translate(-4px, 3px); } 25% { transform: translate(4px, 3px); } 50% { transform: translate(4px, -3px); } 75% { transform: translate(-4px, -3px); } } .counter { position: fixed; left: calc(clamp(20px, 4vw, 48px) + env(safe-area-inset-left, 0px)); bottom: calc(30px + env(safe-area-inset-bottom, 0px)); z-index: 100; font-family: var(--display); font-size: 15px; letter-spacing: 0.14em; color: var(--g-400); } .counter b { color: var(--g-50); font-weight: 700; font-size: 22px; } .counter .sep { color: var(--red); margin: 0 6px; } /* ---------- Barre de progression (flanc droit) ---------- Un filet blanc qui se remplit au fil du scroll ; un éclat le parcourt en boucle pour qu'il scintille même à l'arrêt. */ .progres { position: fixed; right: calc(clamp(16px, 2.4vw, 34px) + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 100; height: min(46vh, 380px); padding: 10px 8px; /* la zone cliquable déborde du filet */ cursor: pointer; } .progres-piste { position: relative; width: 2px; height: 100%; border-radius: 2px; background: rgba(255, 255, 255, 0.22); overflow: visible; } .progres-jauge { position: absolute; inset: 0 0 auto 0; height: 0%; /* piloté en JS */ border-radius: 2px; background: #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.55); transition: height 0.18s linear; } /* la tête de la jauge : un point qui palpite */ .progres-jauge::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; border-radius: 50%; background: #ffffff; transform: translate(-50%, 50%); box-shadow: 0 0 12px rgba(255, 255, 255, 0.9); animation: pouls 3.6s ease-in-out infinite; } /* l'éclat qui descend le long du filet, sur toute sa hauteur : c'est lui qui fait scintiller la barre même à l'arrêt */ .progres-eclat { position: absolute; left: -1px; top: -34%; pointer-events: none; width: 4px; height: 34%; border-radius: 4px; background: linear-gradient(rgba(255, 255, 255, 0), #ffffff, rgba(255, 255, 255, 0)); filter: blur(1.5px); animation: scintille 5.4s ease-in-out infinite; } @keyframes scintille { 0% { top: -34%; opacity: 0; } 22% { opacity: 0.95; } 78% { opacity: 0.95; } 100% { top: 100%; opacity: 0; } } @keyframes pouls { 0%, 100% { box-shadow: 0 0 8px rgba(255, 255, 255, 0.55); opacity: 0.85; } 50% { box-shadow: 0 0 16px rgba(255, 255, 255, 1); opacity: 1; } } /* sur les écrans clairs, le blanc ne se verrait plus : on lui donne une ombre portée et une piste sombre */ body:not(.on-dark) .progres-piste { background: rgba(0, 0, 0, 0.14); } body:not(.on-dark) .progres-jauge { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22), 0 0 10px rgba(0, 0, 0, 0.28); } body:not(.on-dark) .progres-jauge::after { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 12px rgba(0, 0, 0, 0.3); animation: none; } /* sur fond clair, l'éclat blanc ne se verrait pas : il passe en sombre */ body:not(.on-dark) .progres-eclat { background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); } body.at-end .progres { opacity: 0; visibility: hidden; } .progres { transition: opacity 0.5s ease, visibility 0.5s; } /* sur l'écran de contact, le rebond élastique / la zone sous l'encoche doivent montrer le marron du pied de page, pas le vert du reste. --brun-deep plutôt que --brun : le pied de page n'est pas un aplat, son dégradé assombrit précisément les bords — --brun-deep est le ton qu'on y trouve réellement, --brun tout court y paraît trop clair. */ body.at-end { background: var(--brun-deep); } /* Une fois le chargement fini, le chrome ne surgit pas d'un bloc : il se pose dans l'ordre où l'œil le lit. */ .nav, .counter, .progres, .scroll-cue { opacity: 0; transition: opacity 0.9s var(--ease-doux); } body.loaded .nav { opacity: 1; transition-delay: 0.25s; } body.loaded .counter { opacity: 1; transition-delay: 0.42s; } /* L'ACCUEIL NE PORTE AUCUN TEXTE. Seuls « us. » et le nom restent — le bouton de commande et le compteur attendent l'écran suivant, et le repère de défilement n'est plus qu'un trait. */ body.a-l-accueil .counter { opacity: 0; visibility: hidden; } body.loaded .progres { opacity: 1; transition-delay: 0.58s; } body.loaded .scroll-cue { opacity: 1; transition-delay: 0.74s; } .scroll-cue { position: fixed; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); right: calc(clamp(20px, 4vw, 48px) + env(safe-area-inset-right, 0px)); z-index: 100; display: flex; align-items: center; transition: opacity 0.5s; } .scroll-cue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--red), transparent); animation: drip 1.8s ease-in-out infinite; } @keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } body.at-end .scroll-cue, body:not(.a-l-accueil) .scroll-cue { opacity: 0; visibility: hidden; } /* ---------- Slides ---------- */ .slide { position: relative; min-height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: var(--slide-bg, var(--g-950)); } /* décor : halos flous colorés */ .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; z-index: -2; transform: translateZ(0); } .grain-line { position: absolute; inset: auto 0 0 0; height: 1px; background: var(--g-800); } /* motifs flottants du décor */ .floaters { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .floaters svg { position: absolute; opacity: 0; transition: opacity 1.2s ease 0.5s; animation: floatDrift 9s ease-in-out infinite; } .slide.active .floaters svg { opacity: 0.85; } .floaters svg:nth-child(2n) { animation-duration: 12s; animation-delay: -3s; } .floaters svg:nth-child(3n) { animation-duration: 15s; animation-delay: -6s; } @keyframes floatDrift { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(14px, -26px) rotate(8deg); } } /* contenu du slide */ .slide-inner { position: relative; width: min(860px, 92vw); text-align: center; padding: 90px 0 70px; } .slide .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--g-400); opacity: 0; transform: translateY(20px); transition: all 0.7s ease 0.1s; } .slide .kicker .n { color: var(--red); } .slide.active .kicker { opacity: 1; transform: none; } .slide .desc { max-width: 460px; margin: 10px auto 0; color: var(--g-300); font-size: 15.5px; opacity: 0; transform: translateY(24px); transition: all 0.8s ease 0.45s; } .slide.active .desc { opacity: 1; transform: none; } .slide .desc strong { color: var(--g-50); } .slide .meta { margin-top: 18px; display: inline-flex; align-items: center; gap: 14px; opacity: 0; transform: translateY(20px); transition: all 0.8s ease 0.6s; } .slide.active .meta { opacity: 1; transform: none; } .pill { font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--g-600); color: var(--g-300); } .pill.sold { background: var(--red); border-color: var(--red); color: #fff; } .swatches { display: flex; gap: 6px; } .swatches i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); } /* ---------- ACCUEIL ---------- Un écran comme les autres. Pas de scène collée, pas de course de plusieurs écrans, aucune transition propre : la galerie arrive en défilant par-dessous, exactement comme la commande arrive après la galerie et le contact après la commande. Un seul geste pour tout le site. Et aucun texte : le nom et « us. » sont dans l'en-tête. */ .slide.hero { display: block; padding: 0; overflow: hidden; /* La toute première section : on l'étire sous l'encoche avec sa propre photo plutôt que de laisser Safari combler cette bande avec la couleur plate du . Il faut agrandir min-height, pas ajouter du padding : .hero-bg est en inset:0 (calé sur la boîte de padding quel que soit le padding, donc un padding seul ne le bougerait pas), et 100svh dominait de toute façon un padding aussi petit qu'un safe-area-inset. La marge négative annule le surplus de hauteur pour que le bas de la section ne bouge pas — seul le haut remonte sous l'encoche. */ min-height: calc(100svh + env(safe-area-inset-top, 0px)); margin-top: calc(-1 * env(safe-area-inset-top, 0px)); } .slide.hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transform: scale(1.06); filter: blur(20px); transition: opacity 1.15s var(--ease-scene) 0.05s, transform 2.1s var(--ease-scene) 0.05s, filter 1.5s var(--ease-scene) 0.05s; } /* Attention à l'ordre : l'écran de chargement couvre la page pendant plus de deux secondes. Accrochée à .active seule, la mise au point se jouerait dessous et personne ne la verrait. */ body.loaded .slide.hero.active .hero-bg { opacity: 1; transform: none; filter: blur(0); transition-delay: 0.15s; } /* thème clair (hero) : le chrome fixe s'adapte */ /* sur une slide sombre (le hero), le chrome fixe passe en blanc */ body.on-dark .logo, body.on-dark .mark { color: #ffffff; } body.on-dark .counter { color: rgba(255,255,255,0.7); } body.on-dark .counter b { color: #ffffff; } body.on-dark .counter .sep { color: rgba(255,255,255,0.6); } body.on-dark .scroll-cue { color: rgba(255,255,255,0.75); } body.on-dark .scroll-cue::after { background: linear-gradient(#ffffff, transparent); } /* ============================================================ GALERIE HORIZONTALE — le scroll vertical fait glisser les panneaux latéralement (le conteneur reste collé à l'écran). ============================================================ */ .rail { position: relative; background: var(--velours-deep); height: calc(var(--panneaux, 5) * 100svh); } .rail-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; } /* les panneaux sont empilés au même endroit : aucun n'en pousse un autre */ .rail-track { position: absolute; inset: 0; } .rail-snaps { position: absolute; inset: 0; pointer-events: none; } /* un cran par tirage : chaque bloc couvre sa part de la course */ .rail-snaps > div { height: calc(var(--panneaux, 3) * 100svh / 3); } /* La scène est la boîte de référence du panneau : le décor la remplit, le tirage s'y place en fractions (--fx/--fy/--fw/--fh). Sur grand écran elle occupe tout l'écran ; en portrait elle devient une bande à la proportion de l'image (voir la passe mobile), ce qui permet de TOUT montrer sans rien rogner. */ .scene { position: absolute; inset: 0; } /* ---------- panneaux d'ambiance ---------- --d = distance signée au centre, en écrans (posée en JS) --ad = sa valeur absolue --entrant / --sortant = les deux moitiés de --d, déjà adoucies --fx/--fy/--fw/--fh = la place du tirage dans la scène (posée dans le HTML sur le panneau, pas sur la scène : le balayage a besoin de savoir où est le cadre pour changer de couleur en le traversant) --trainee = la couleur que prend la traînée sur le cadre LA TRANSITION EST DANS LE FOND. Les trois décors sont le même plan : même cadrage, lettrage UMEA au même endroit au pixel près — seule la couleur change. La scène suivante se découvre donc par un balayage franc, TOUJOURS de la gauche vers la droite, et comme le lettrage ne bouge pas, l'œil ne voit pas deux images se remplacer mais une seule qui change de couleur, lettre après lettre. Le balayage prend tout le panneau, tirage compris : le cadre est repeint dans le même geste que la salle, pas après. Ce qui change, c'est la couleur de la traînée : blanche sur la salle, et le temps qu'elle traverse le cadre, elle prend --trainee, la couleur de l'écran qu'on quitte. Le passage se voit, la coupe ne se voit pas. Le décor ne bouge pas d'un pixel : ni fondu, ni zoom, ni glissement. Toute translation décalerait le lettrage, c'est-à-dire tuerait l'effet. */ .panneau-image { /* 1 = scène encore cachée, 0 = salle entièrement repeinte */ --balayage: clamp(0, (var(--entrant, 0) - 0.32) / 0.54, 1); /* la position du front, en fraction de l'écran */ --front: calc(1 - var(--balayage)); /* 1 quand le front est en train de traverser le cadre */ --sur-cadre: clamp(0, min(var(--front) - var(--fx, 0), var(--fx, 0) + var(--fw, 1) - var(--front)) / 0.035, 1); padding: 0; background: transparent; clip-path: inset(0 calc(var(--balayage) * 100%) 0 0); will-change: clip-path; } /* le premier panneau ne se découvre pas — mais il lui faut quand même son propre plan, sinon son tirage passerait au-dessus du panneau suivant au lieu d'être recouvert par lui */ .premier { clip-path: inset(0); } /* la traînée sur la salle : une lueur blanche posée sur le front. Le clip lui coupe la moitié avant, il ne reste que ce qui traîne derrière — d'où l'impression de matière. */ .panneau-image::before, .panneau-image::after { content: ""; position: absolute; left: calc(var(--front) * 100%); width: 13vw; margin-left: -6.5vw; pointer-events: none; /* elle s'allume et s'éteint aux deux bouts du passage */ opacity: calc(min(1, var(--front) * 6) * min(1, var(--balayage) * 6)); } .panneau-image::before { top: 0; bottom: 0; z-index: 3; mix-blend-mode: screen; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 34%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.16) 66%, transparent); } /* la traînée sur le cadre : même front, autre couleur. Elle passe au-dessus du tirage (z 6) et n'existe que le temps de la traversée. */ .panneau-image::after { top: calc(var(--fy, 0.25) * 100%); height: calc(var(--fh, 0.5) * 100%); z-index: 6; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--trainee, #0e4a3c) 62%, transparent) 34%, var(--trainee, #0e4a3c) 50%, color-mix(in srgb, var(--trainee, #0e4a3c) 62%, transparent) 66%, transparent); opacity: calc(min(1, var(--front) * 6) * min(1, var(--balayage) * 6) * var(--sur-cadre)); } .premier::before, .premier::after { display: none; } /* le décor : franc, immobile. */ .decor { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } /* ---- LE TIRAGE COMME UNE CARTE ---- Il ne se contente plus d'être posé : il s'incline vers le curseur. --rx/--ry sont donnés en JS d'après la position de la souris dans le cadre. La perspective est portée par le panneau, sinon chaque cadre aurait son propre point de fuite et l'inclinaison serait fausse. */ .panneau-image { perspective: 1500px; } .cadre { /* ---- L'EFFACEMENT DU TIRAGE SORTANT ---- Les trois tirages n'occupent pas la même place : celui de l'écran 2 est calé à droite, celui du 3 au centre, celui du 4 à gauche. Quand le balayage a fini de découvrir le tirage qui arrive, celui qu'on quitte dépasse donc encore d'un côté, et il traîne à l'écran alors qu'il n'a plus rien à y faire. On le retire à cet instant précis : dès que le front du balayage suivant a passé le bord droit du tirage suivant (--fin-suivant, posé sur le panneau dans le HTML), le nôtre s'efface en un souffle. Le balayage, lui, continue tranquillement de découvrir la salle. --fin-suivant vaut 2 par défaut : le dernier panneau n'a pas de suivant, donc son tirage ne s'efface jamais. */ --front-suivant: calc(1 - clamp(0, (0.68 - var(--sortant, 0)) / 0.54, 1)); --efface: clamp(0, (var(--front-suivant) - var(--fin-suivant, 2)) / 0.08, 1); opacity: calc(1 - var(--efface)); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--rz, 0px)); transition: transform 320ms ease-out, box-shadow 320ms ease-out; position: absolute; z-index: 5; left: calc(var(--fx, 0.25) * 100%); top: calc(var(--fy, 0.25) * 100%); width: calc(var(--fw, 0.5) * 100%); height: calc(var(--fh, 0.5) * 100%); margin: 0; border-radius: 3px; overflow: hidden; background: var(--velours-deep); box-shadow: 0 34px 78px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.34); will-change: clip-path; } /*