/* Composição externa do AMP oficial; nenhum seletor de Shadow DOM/system-layer. */ .web-stories{--web-stories-inline-padding:24px;--web-stories-background:#f1f4f8;--web-stories-ink:#141719;position:relative;isolation:isolate;width:100%;min-width:0;color:var(--web-stories-ink)} .web-stories__stage{position:relative;display:grid;place-items:center;min-height:650px;overflow:hidden;border:1px solid rgba(0,0,0,.07);border-radius:24px;background:var(--web-stories-background);isolation:isolate} .web-stories__stage::before{position:absolute;z-index:-1;content:"";inset:-40px;background:var(--web-stories-background) var(--web-stories-poster) center/cover no-repeat;filter:blur(28px);opacity:.4;transform:scale(1.06);pointer-events:none} .web-stories amp-story-player{display:block;width:min(390px,100%);height:650px;max-width:100%;border-radius:18px;background:var(--web-stories-background);overflow:hidden} .web-stories amp-story-player>a>.web-stories__story-title{display:inline;margin:0;font:inherit;color:inherit;letter-spacing:inherit} .web-stories__fullscreen:focus-visible,.web-stories__restart:focus-visible{outline:3px solid #135ac7;outline-offset:3px} .web-stories__fullscreen{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #d9dde1;border-radius:50%;background:rgba(255,255,255,.94);color:#141719;cursor:pointer;text-decoration:none} .web-stories__restart{position:absolute;top:50%;left:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #d9dde1;border-radius:50%;background:rgba(255,255,255,.94);color:#141719;box-shadow:none;cursor:pointer;font:inherit;line-height:1;transform:translate(-50%,-50%)} .web-stories__restart:hover{transform:translate(-50%,-50%)} .web-stories__restart svg{display:block;width:24px;height:24px} .web-stories.is-fullscreen .web-stories__restart{display:none!important} .web-stories__status{position:absolute;inset:0;z-index:3;display:grid;place-items:center;box-sizing:border-box;width:100%;height:100%;margin:0;padding:24px;color:#000;font-family:inherit;font-size:14px;font-weight:700;line-height:1.4;text-align:center;pointer-events:none} .web-stories__status[hidden]{display:none!important} .web-stories > .web-stories__header[data-web-stories-header]{display:none} .web-stories.is-fullscreen{position:fixed;z-index:100000;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) 52px;width:100vw;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);border:0;border-radius:0;background:var(--web-stories-background);overscroll-behavior:contain} .web-stories.is-fullscreen > .web-stories__header[data-web-stories-header]{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;width:100%;height:52px;min-height:52px;padding:0 var(--web-stories-inline-padding);overflow:hidden;background:#101315;color:#fff} .web-stories.is-fullscreen > .web-stories__header[data-web-stories-header] > span[data-web-stories-title]{flex:1 1 auto;min-width:0;max-width:100%;color:#fff;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:-.01em;text-align:left;white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .web-stories.is-fullscreen > .web-stories__header[data-web-stories-header] > #story-fullscreen.web-stories__fullscreen[data-web-stories-close]{position:static;inset:auto;z-index:auto;display:flex;align-items:center;justify-content:flex-end;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;margin-inline-end:calc(-22px * 5 / 24);padding:0;border:0;border-radius:0;background:transparent;color:#fff;box-shadow:none;font-size:0;line-height:0;letter-spacing:0;gap:0} .web-stories.is-fullscreen > .web-stories__header[data-web-stories-header] > #story-fullscreen.web-stories__fullscreen[data-web-stories-close] svg{display:block;width:22px;height:22px;flex:none} .web-stories.is-fullscreen > .web-stories__header[data-web-stories-header] > #story-fullscreen.web-stories__fullscreen[data-web-stories-close]:focus-visible{outline:3px solid #fff;outline-offset:2px} .web-stories.is-fullscreen > .web-stories__stage{grid-column:1;grid-row:2;min-width:0;min-height:0;height:100%;border:0;border-radius:0} .web-stories.is-fullscreen amp-story-player{width:100%;height:100%;border-radius:0} @media(min-width:1061px){.web-stories__stage{min-height:0;aspect-ratio:16/9}.web-stories amp-story-player{width:100%;height:100%;border-radius:0}.web-stories.is-fullscreen .web-stories__stage{min-height:0;aspect-ratio:auto}.web-stories.is-fullscreen amp-story-player{width:100%;height:100%}} @media (min-width:701px) and (max-width:1060px) { .web-stories:not(.is-fullscreen) > .web-stories__stage{padding-block:20px} .web-stories:not(.is-fullscreen) amp-story-player{width:min(366px,100%,calc((min(650px,var(--triobum-story-space)) - 40px) * .76));height:610px} } @media(max-width:700px){.web-stories__stage{border-radius:18px}.web-stories amp-story-player{width:100%;border-radius:0}.web-stories__fullscreen{right:12px;bottom:12px}.web-stories.is-fullscreen > .web-stories__header[data-web-stories-header]{gap:12px}} /* Espaço útil do embed; medidas publicadas pelo posicionamento global existente. */ .web-stories:not(.is-fullscreen){--triobum-story-nav-reserve:52px;--triobum-story-space:calc(100dvh - var(--triobum-header-height,0px) - var(--triobum-actions-reserve,0px) - var(--triobum-story-nav-reserve) - 24px)} .web-stories:not(.product-stories):not(.is-fullscreen){background:#101315;border-radius:24px} .web-stories:not(.product-stories):not(.is-fullscreen)>.web-stories__menu{border-radius:0 0 24px 24px} @media(max-width:700px){ .web-stories:not(.product-stories):not(.is-fullscreen){border-radius:18px} .web-stories:not(.product-stories):not(.is-fullscreen)>.web-stories__menu{border-radius:0 0 18px 18px} } .web-stories:not(.is-fullscreen) > .web-stories__stage{min-height:0;max-height:var(--triobum-story-space)} @media(max-width:1060px){ .web-stories:not(.is-fullscreen) > .web-stories__stage{height:min(650px,var(--triobum-story-space))} .web-stories:not(.is-fullscreen) amp-story-player{height:100%} } /* Conserva a proporção vertical nas telas baixas sem forçar a UI do AMP. */ @media(max-width:700px) and (orientation:portrait){ .web-stories:not(.is-fullscreen) > .web-stories__stage{padding-block:0;container-type:size;container-name:triobum-story-stage} .web-stories:not(.is-fullscreen) amp-story-player{width:min(100%,calc((min(650px,var(--triobum-story-space)) - 40px) * .76));height:calc(100% - 40px);border-radius:18px} @container triobum-story-stage (max-aspect-ratio:19/25){ .web-stories:not(.is-fullscreen) amp-story-player{width:100%;height:100%;border-radius:0} } } @media(prefers-reduced-motion:reduce){.web-stories__stage::before{filter:blur(18px)}} /* Bolinhas de produto: links SSR; o mesmo player só aparece em fullscreen. */ .product-stories:not(.is-fullscreen) > :not(.product-stories__bubbles){display:none} .product-stories.is-fullscreen > .product-stories__bubbles{display:none} .product-stories .product-story:focus-visible{outline:3px solid #135ac7;outline-offset:4px} .product-stories__bubbles{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto 24px;width:max-content;max-width:100%} .product-story{display:block;flex:none;width:88px;height:88px;border:0;border-radius:50%;padding:3px;background:linear-gradient(135deg,var(--story-light) 0%,var(--story-dark) 30%,var(--story-dark) 100%);box-shadow:none;cursor:pointer} .product-story__thumbnail{display:flex;width:100%;height:100%;align-items:center;justify-content:center;padding:9px;border-radius:50%;background:#fff} .product-story__thumbnail img{display:block;width:100%;height:100%;margin:0;object-fit:contain;max-width:100%;border-radius:0} .product-stories__bubbles>.product-story:nth-of-type(2) .product-story__thumbnail img{transform:scaleX(-1)} .product-stories__bubbles>.product-stories__vs{display:block;flex:none;width:32px;height:32px} @media(max-width:700px){.product-stories__bubbles{gap:16px;margin-bottom:22px}.product-story{width:80px;height:80px}.product-stories__bubbles>.product-stories__vs{width:28px;height:28px}} .product-story{border:3px solid transparent;padding:3px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--story-light) 0%,var(--story-dark) 30%,var(--story-dark) 100%) border-box} .product-story__thumbnail{border:1px solid #e7e9e8;padding:5px} @media(max-width:700px){.web-stories{--web-stories-inline-padding:20px}} .web-stories > .web-stories__menu{ display:flex; align-items:center; justify-content:space-between; gap:0; width:100%; min-width:0; height:52px; min-height:52px; margin:0; padding:0 var(--web-stories-inline-padding); overflow:hidden; background:#101315; color:#fff; font-size:13px; font-weight:700; line-height:1.2; } .web-stories .web-stories__menu-arrow{ position:relative; display:grid; place-items:center; flex:0 0 44px; width:44px; min-width:44px; height:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#fff; cursor:pointer; font:inherit; line-height:1; } .web-stories .web-stories__menu-arrow:focus-visible, .web-stories .web-stories__menu-item:focus-visible{ outline:3px solid #fff; outline-offset:2px; } .web-stories .web-stories__menu-arrow svg{ display:block; flex:none; width:24px; height:24px; } .web-stories .web-stories__menu-arrow:disabled{cursor:default} .web-stories .web-stories__menu-arrow:disabled svg{opacity:.25} .web-stories .web-stories__menu-arrow[hidden]{display:none!important} .web-stories .web-stories__menu-items{ display:flex; align-items:center; justify-content:flex-start; flex:1 1 auto; gap:4px; width:auto; min-width:0; height:100%; margin:0; padding:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .web-stories .web-stories__menu-items::-webkit-scrollbar{display:none} .web-stories .web-stories__menu-item{ display:flex; flex:0 0 auto; align-items:center; align-self:stretch; min-width:0; margin:0; padding:0 10px; border:0; border-bottom:2px solid transparent; background:transparent; color:rgba(255,255,255,.65); cursor:pointer; font:inherit; line-height:inherit; text-align:left; text-decoration:none; white-space:nowrap; } .web-stories .web-stories__menu-item[aria-current="true"]{ border-bottom-color:#fff; color:#fff; } .web-stories .web-stories__menu[data-overflow="false"] .web-stories__menu-items{ justify-content:center; } .web-stories .web-stories__menu[data-overflow="true"] .web-stories__menu-items{ justify-content:flex-start; } .web-stories.is-fullscreen > .web-stories__menu{ grid-column:1; grid-row:3; align-self:stretch; height:52px; min-height:52px; margin:0; padding:0 var(--web-stories-inline-padding); } @media(max-width:700px){ .web-stories > .web-stories__menu, .web-stories.is-fullscreen > .web-stories__menu{ gap:0; padding-inline:var(--web-stories-inline-padding); } .web-stories .web-stories__menu-items{gap:0} } .web-stories > .web-stories__menu[data-overflow="true"], .web-stories.is-fullscreen > .web-stories__menu[data-overflow="true"]{padding-inline:0} .web-stories .web-stories__menu-arrow svg{position:absolute} .web-stories [data-story-list-prev] svg{left:calc(var(--web-stories-inline-padding) - 8px)} .web-stories [data-story-list-next] svg{right:calc(var(--web-stories-inline-padding) - 8px)} .web-stories .web-stories__menu-arrow:focus-visible{outline-offset:-4px} /* Aro de produto: início visível imediato, duas voltas e pausa de 0.4s. */ @property --tb-ring-tail { syntax: ""; inherits: false; initial-value: 0deg; } @supports (mask-composite: exclude) or (-webkit-mask-composite: xor) { .product-stories__bubbles > .product-story { position: relative; } .product-stories__bubbles > .product-story::after { content: ""; position: absolute; inset: -3px; box-sizing: border-box; padding: 3px; border-radius: 50%; background: conic-gradient( from 180deg, var(--story-dark) 0deg var(--tb-ring-tail), var(--story-light) calc((var(--tb-ring-tail) + 360deg) / 2), var(--story-dark) 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; pointer-events: none; transform: rotate(0deg); transform-origin: center; } .product-stories__bubbles:has(> .product-story:nth-of-type(2)) > .product-story:nth-of-type(1)::after { animation: tb-ring-rotate 7.1s linear infinite; } .product-stories__bubbles:has(> .product-story:nth-of-type(2)) > .product-story:nth-of-type(2)::after { animation: tb-ring-rotate 7.1s linear 3.55s infinite; } .product-stories__bubbles > .product-story:only-of-type::after { animation: tb-ring-rotate-single 3.55s linear infinite; } @keyframes tb-ring-rotate { 0% { transform: rotate(0deg); --tb-ring-tail: 0deg; opacity: 1; } 19.014084507043% { transform: rotate(360deg); --tb-ring-tail: 0deg; opacity: 1; } 31.690140845071% { transform: rotate(600deg); --tb-ring-tail: 240deg; opacity: 0.333333333333; animation-timing-function: cubic-bezier(.333333,.666667,.666667,1); } 44.366197183099% { transform: rotate(720deg); --tb-ring-tail: 360deg; opacity: 0; } 100% { transform: rotate(720deg); --tb-ring-tail: 360deg; opacity: 0; } } @keyframes tb-ring-rotate-single { 0% { transform: rotate(0deg); --tb-ring-tail: 0deg; opacity: 1; } 38.028169014084% { transform: rotate(360deg); --tb-ring-tail: 0deg; opacity: 1; } 63.380281690141% { transform: rotate(600deg); --tb-ring-tail: 240deg; opacity: 0.333333333333; animation-timing-function: cubic-bezier(.333333,.666667,.666667,1); } 88.732394366197% { transform: rotate(720deg); --tb-ring-tail: 360deg; opacity: 0; } 100% { transform: rotate(720deg); --tb-ring-tail: 360deg; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .product-stories__bubbles:has(> .product-story:nth-of-type(2)) > .product-story:nth-of-type(1)::after, .product-stories__bubbles:has(> .product-story:nth-of-type(2)) > .product-story:nth-of-type(2)::after, .product-stories__bubbles > .product-story:only-of-type::after { animation: none !important; opacity: 0 !important; } } } /* Glow aprovado: somente sombra externa, sincronizada ao aro existente. */ @supports (mask-composite: exclude) or (-webkit-mask-composite: xor) { .product-stories__bubbles > .product-story { /* Fallback antes de color-mix; não altera imagem, geometria, posição ou foco. */ --tb-glow-color: rgba(19, 90, 199, 0.18); --tb-glow-color-soft: rgba(19, 90, 199, 0.12); --tb-glow-color: color-mix(in srgb, var(--story-dark, #135ac7) 34%, transparent); --tb-glow-color-soft: color-mix(in srgb, var(--story-dark, #135ac7) 22%, transparent); box-shadow: none; } /* Duas bolinhas: 7.1s, com a segunda iniciando em 3.55s. */ .product-stories__bubbles:has(> .product-story:nth-of-type(2)) > .product-story:nth-of-type(1) { animation: tb-glow-sync 7.1s linear infinite; } .product-stories__bubbles:has(> .product-story:nth-of-type(2)) > .product-story:nth-of-type(2) { animation: tb-glow-sync 7.1s linear 3.55s infinite; } /* Uma bolinha: 3.55s, com os mesmos 3.15s ativos e 0.4s de pausa. */ .product-stories__bubbles > .product-story:only-of-type { animation: tb-glow-sync-single 3.55s linear infinite; } @keyframes tb-glow-sync { 0% { box-shadow: 0 0 0 1px transparent, 0 0 12px 2px transparent; animation-timing-function: ease-out; } 3.380281690141%, 19.014084507043% { box-shadow: 0 0 0 1px var(--tb-glow-color-soft), 0 0 12px 2px var(--tb-glow-color); } 31.690140845071% { box-shadow: 0 0 0 1px var(--tb-glow-color-soft), 0 0 12px 2px var(--tb-glow-color-soft); animation-timing-function: ease-in-out; } 44.366197183099%, 100% { box-shadow: 0 0 0 1px transparent, 0 0 12px 2px transparent; } } @keyframes tb-glow-sync-single { 0% { box-shadow: 0 0 0 1px transparent, 0 0 12px 2px transparent; animation-timing-function: ease-out; } 6.760563380282%, 38.028169014084% { box-shadow: 0 0 0 1px var(--tb-glow-color-soft), 0 0 12px 2px var(--tb-glow-color); } 63.380281690141% { box-shadow: 0 0 0 1px var(--tb-glow-color-soft), 0 0 12px 2px var(--tb-glow-color-soft); animation-timing-function: ease-in-out; } 88.732394366197%, 100% { box-shadow: 0 0 0 1px transparent, 0 0 12px 2px transparent; } } @media (prefers-reduced-motion: reduce) { .product-stories__bubbles > .product-story, .product-stories__bubbles:has(> .product-story:nth-of-type(2)) > .product-story:nth-of-type(1), .product-stories__bubbles:has(> .product-story:nth-of-type(2)) > .product-story:nth-of-type(2), .product-stories__bubbles > .product-story:only-of-type { animation: none !important; box-shadow: none !important; } } } /* Play/pause externo TrioBum: círculo32px, alvo44px; não altera a UI do AMP. */ .web-stories .web-stories__playback{position:absolute;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#141719;cursor:pointer;box-shadow:none;isolation:isolate;line-height:1} .web-stories .web-stories__playback::before{position:absolute;content:"";inset:6px;z-index:-1;border:1px solid #d9dde1;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 1px 2px rgba(0,0,0,.045);pointer-events:none} .web-stories .web-stories__playback svg{display:block;width:18px;height:18px;fill:currentColor} .web-stories .web-stories__playback .web-stories__play-icon{display:none} .web-stories .web-stories__playback[data-paused="true"] .web-stories__pause-icon{display:none} .web-stories .web-stories__playback[data-paused="true"] .web-stories__play-icon{display:block} .web-stories .web-stories__playback:hover{transform:none} .web-stories .web-stories__playback:hover::before{background:#fff} .web-stories .web-stories__playback:focus-visible{outline:3px solid #135ac7;outline-offset:2px} .web-stories .web-stories__playback[hidden]{display:none!important} .web-stories .web-stories__playback:disabled{cursor:default;opacity:.4} /* Superfície externa: produtos e zoom ENTENDA usam keyframes CSS; AMP continua dono do player. */ .web-stories__stage{width:100%;min-width:0} .web-stories:not(.product-stories)>.web-stories__stage{border:0} .web-stories.is-fullscreen>.web-stories__stage{width:100%;min-width:0;border:0;border-radius:0} .web-stories.is-fullscreen amp-story-player{display:block;width:100%;max-width:none;height:100%;border:0;border-radius:0} .tb-surface-backdrop{position:fixed;z-index:99999;inset:0;background:rgba(255,255,255,.01);pointer-events:none;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)} .tb-surface-copies{position:fixed;z-index:100001;inset:0;overflow:visible;pointer-events:none;contain:layout style} .tb-surface-copyphoto{position:fixed;display:block;max-width:none;margin:0;padding:0;border:0;background:transparent;object-fit:contain;object-position:center;backface-visibility:visible;transform-style:flat} .tb-surface-copyphoto--closing{backface-visibility:visible;transform-style:flat} .tb-surface-copyphoto[data-tb-product-motion="photo"]{will-change:transform,filter} .tb-surface-backdrop[data-tb-product-motion="blur"]{will-change:backdrop-filter,-webkit-backdrop-filter} .product-story[data-tb-product-motion="ring"]{will-change:transform} .product-stories[data-tb-product-motion="fade"]{will-change:opacity} .tb-surface-motion-opening[data-tb-product-motion="fade"], .tb-surface-motion-closing[data-tb-product-motion="fade"]{will-change:opacity} .tb-surface-backdrop[data-tb-product-motion="blur"]{ animation:tb-product-blur var(--tb-product-motion-duration,1200ms) var(--tb-product-motion-easing,ease-in-out) 0ms 1 normal both; } .tb-surface-copyphoto[data-tb-product-motion="photo"]{ animation:tb-product-photo var(--tb-product-motion-duration,1200ms) var(--tb-product-motion-easing,cubic-bezier(.2,.75,.25,1)) 0ms 1 normal both; } .product-story[data-tb-product-motion="ring"]{ animation:tb-product-ring var(--tb-product-motion-duration,960ms) var(--tb-product-motion-easing,cubic-bezier(.45,0,.2,1)) 0ms 1 normal both; } /* O segundo produto já possui o glow contínuo; o giro é acrescentado sem reiniciar/remover a linha temporal do aro/brilho aprovado. */ .product-stories__bubbles:has(> .product-story:nth-of-type(2)) > .product-story:nth-of-type(2)[data-tb-product-motion="ring"]{ animation-name:tb-glow-sync,tb-product-ring; animation-duration:7.1s,var(--tb-product-motion-duration,960ms); animation-timing-function:linear,var(--tb-product-motion-easing,cubic-bezier(.45,0,.2,1)); animation-delay:3.55s,var(--tb-product-motion-delay,0ms); animation-iteration-count:infinite,1; animation-direction:normal,var(--tb-product-motion-direction,normal); animation-fill-mode:none,both; } .web-stories.product-stories[data-tb-product-motion="fade"]{ animation:tb-product-fade var(--tb-product-motion-duration,1200ms) var(--tb-product-motion-easing,ease-in-out) 0ms 1 normal both; } .tb-surface-backdrop[data-tb-product-motion="blur"], .tb-surface-copyphoto[data-tb-product-motion="photo"], .product-story[data-tb-product-motion="ring"], .web-stories.product-stories[data-tb-product-motion="fade"]{ animation-direction:var(--tb-product-motion-direction,normal); animation-delay:var(--tb-product-motion-delay,0ms); } @keyframes tb-product-fade{ from{opacity:var(--tb-product-motion-from-opacity)} to{opacity:var(--tb-product-motion-to-opacity)} } @keyframes tb-product-blur{ from{backdrop-filter:var(--tb-product-motion-from-backdrop-filter);-webkit-backdrop-filter:var(--tb-product-motion-from--webkit-backdrop-filter)} to{backdrop-filter:var(--tb-product-motion-to-backdrop-filter);-webkit-backdrop-filter:var(--tb-product-motion-to--webkit-backdrop-filter)} } @keyframes tb-product-photo{ from{transform:var(--tb-product-motion-from-transform);filter:var(--tb-product-motion-from-filter)} to{transform:var(--tb-product-motion-to-transform);filter:var(--tb-product-motion-to-filter)} } @keyframes tb-product-ring{ from{transform:var(--tb-product-motion-from-transform)} to{transform:var(--tb-product-motion-to-transform)} } .tb-surface-proxy{box-sizing:border-box;font-family:inherit;color:inherit} .tb-surface-proxy__viewport{position:relative;width:100%;height:100%;overflow:hidden;box-sizing:border-box} .tb-surface-proxy__content.tb-content{position:relative;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box;overflow:hidden} .tb-surface-proxy__image{display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;object-fit:contain;object-position:center} .tb-surface-motion-opening,.tb-surface-motion-closing{overscroll-behavior:contain} /* O fundo colorido do fullscreen preenchia os cantos recortados do estágio. Preservar o fundo do embed deixa o raio inferior visível enquanto interpola. */ .web-stories:not(.product-stories).tb-surface-motion-opening, .web-stories:not(.product-stories).tb-surface-motion-closing{background:#101315} @media(prefers-reduced-motion:reduce){ .web-stories__stage::before,.tb-surface-copies,.tb-surface-proxy{display:none!important} .web-stories.is-fullscreen amp-story-player{width:100%;height:100%;border:0} } /* ENTENDA: escolhe uma vez pela área útil do fullscreen; o embed antecipa a mesma orientação. Não anima blocos nem altera o player AMP oficial. */ .web-stories.web-stories--composition-landscape:not(.is-fullscreen)>.web-stories__stage{aspect-ratio:16/9;height:auto;min-height:0;max-height:none;padding-block:0} .web-stories.web-stories--composition-landscape:not(.is-fullscreen) amp-story-player{width:100%;height:100%;border-radius:0} /* Portrait: o player real ocupa uma coluna 3:4, sempre centrada no estágio. As sobras laterais continuam sendo o fundo desfocado do painel; o estágio não cresce. */ .web-stories.web-stories--composition-portrait amp-story-player{width:auto;height:100%;max-width:100%;aspect-ratio:3/4} /* 20/10 — vertical embutido: story rente ao painel em cima/baixo, sem raio próprio. */ .web-stories.web-stories--composition-portrait:not(.product-stories):not(.is-fullscreen)>.web-stories__stage{padding-block:0} .web-stories.web-stories--composition-portrait:not(.product-stories):not(.is-fullscreen) amp-story-player{height:100%;margin-block:0;border-radius:0} /* HOME: mesmo player; somente opacity, com blur no backdrop já existente. Marcador exclusivo evita alterar o fade/zoom das bolinhas de COMPARE. */ .web-stories[data-tb-home-surface][data-tb-product-motion="fade"]{ will-change:opacity; animation:tb-product-fade var(--tb-product-motion-duration,600ms) linear both; } @media(prefers-reduced-motion:reduce){ .web-stories[data-tb-home-surface][data-tb-product-motion="fade"]{animation-duration:.01ms!important} }