/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://twobrothersmedia.in/
 Description:  Child theme for Hello Elementor
 Author:       TBM
 Author URI:   https://twobrothersmedia.in/
 Template:     hello-elementor
 Version:      1.1.0
 Text Domain:  hello-elementor-child
*/

/* Brand tokens (also used by css/custom-nav.css) */
:root {
    --brand-accent: #fa3105;
    --brand-black:  #000000;
    --brand-cream:  #dedede;
    --brand-grey:   #F2F2F2;
}

/* Hero Slider slideshow-progress */
.ssp {
    --ssp-color: #ffffff;                       /* filled bar */
    --ssp-track: rgba(255, 255, 255, 0.3);      /* empty bar */
    --ssp-width: clamp(180px, 20vw, 280px);     /* total width */
    --ssp-offset-x: clamp(20px, 4vw, 64px);     /* from the right edge */
    --ssp-offset-y: clamp(20px, 4vw, 48px);     /* from the bottom edge */
}

/* Slideshow progress — aligned with the hero's padding */
body .ssp {
    --ssp-offset-x: 80px;   /* hero right padding (desktop) */
    --ssp-offset-y: 40px;   /* hero bottom padding (all devices) */
}

@media (max-width: 1024px) {
    body .ssp {
        --ssp-offset-x: 20px;   /* hero right padding (tablet + mobile) */
    }
}

/* Overflow-fix — clip (not hidden) keeps position: sticky working.
   "hidden" stays as the fallback for browsers without clip support. */
html,
body {
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
}

/* Custom Scrollbar (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: var(--brand-grey);
}

/* Thumb: rounded, inset from the edges via a track-coloured border */
::-webkit-scrollbar-thumb {
    background-color: #777;
    background-clip: padding-box;
    border: 3px solid var(--brand-grey);
    border-radius: 10px;
    min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--brand-black);
}

/* Arrow buttons */
::-webkit-scrollbar-button:single-button {
    display: block;
    width: 15px;
    height: 15px;
    background-color: var(--brand-grey);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7px 7px;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M4 1.5 7.5 6.5H0.5Z' fill='%23333'/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M4 6.5 0.5 1.5H7.5Z' fill='%23333'/></svg>");
}

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1.5 4 6.5 0.5V7.5Z' fill='%23333'/></svg>");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M6.5 4 1.5 0.5V7.5Z' fill='%23333'/></svg>");
}

::-webkit-scrollbar-button:single-button:hover {
    background-color: #e4e4e4;
}

::-webkit-scrollbar-corner {
    background: var(--brand-grey);
}

/* Firefox only (no arrow buttons possible there) */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #777 var(--brand-grey);
    }
}

/* Text Select Color */
::selection {
    background: var(--brand-black) !important;
    color: #fff !important;
}

/* Line Height Removal */
.line-fix {
    line-height: 0px !important;
}

/* Mobile Menu Icon-Animated */
@media (max-width: 1024px) {
    .elementor-119 .elementor-element.elementor-element-59b5c7e .uc_animated_hamburger_icon {
        width: 45px;
        height: 30px;
    }
}

/* Elementor Off-Canvas — page lock + fit the real mobile viewport */
html.is-offcanvas-open,
html.is-offcanvas-open body {
    overflow: hidden !important;
}

.e-off-canvas__main {
    height: 100vh;                  /* fallback for older browsers */
    height: 100dvh !important;      /* visible viewport, not 100vh */
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;   /* no scroll chaining to the page */
}

/* Rankmath Breadcrumbs */
.rank-math-breadcrumb a {
    color: var(--brand-black);
}

.rank-math-breadcrumb a:hover {
    color: var(--brand-black);
}


/* ===========================
   LOOP CARD — image hover zoom
   Add "hover-loop-card" to the card's outer container
   =========================== */

/* Clip the zoom to the image box, not the whole card */
.hover-loop-card .elementor-widget-image,
.hover-loop-card .elementor-widget-theme-post-featured-image {
    overflow: hidden !important;
}

/* Elementor makes the image link inline-block, which leaves a
   text-baseline gap under the image — make it a block */
.hover-loop-card .elementor-widget-image a,
.hover-loop-card .elementor-widget-theme-post-featured-image a {
    display: block !important;
}

/* - Own GPU layer at all times: no pixel snap (shake) when the zoom ends
   - Resting scale 1.01 + margin-bottom -1px: the image always overlaps
     the clipping edges, so no hairline shows after hover-out */
.hover-loop-card .elementor-widget-image img,
.hover-loop-card .elementor-widget-theme-post-featured-image img {
    display: block !important;
    width: 100% !important;
    margin-bottom: -1px !important;
    transform: scale(1.01) translateZ(0) !important;
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mouse hover only — no stuck zoom after a tap on touch screens */
@media (hover: hover) {
    .hover-loop-card:hover .elementor-widget-image img,
    .hover-loop-card:hover .elementor-widget-theme-post-featured-image img {
        transform: scale(1.08) translateZ(0) !important;
    }
}

/* Keyboard users tabbing onto the card */
.hover-loop-card:has(:focus-visible) .elementor-widget-image img,
.hover-loop-card:has(:focus-visible) .elementor-widget-theme-post-featured-image img {
    transform: scale(1.08) translateZ(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    .hover-loop-card .elementor-widget-image img,
    .hover-loop-card .elementor-widget-theme-post-featured-image img {
        transition: none !important;
        transform: scale(1.01) !important; /* keep covering the edges */
    }
}

/* Elementor Pagination (Loop Grid / Posts) */
.elementor-pagination {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 4px !important;
	margin-top: 50px !important;
	padding: 0 !important;
}

.elementor-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 38px !important;
	height: 38px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border: 1px solid #E0E0E0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #666666 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}

.elementor-pagination a.page-numbers:hover {
	background: #DFDFDF !important;
	border-color: #DFDFDF !important;
	color: #000000 !important;
}

.elementor-pagination a.page-numbers:focus-visible {
	outline: 2px solid #000000 !important;
	outline-offset: 2px !important;
}

.elementor-pagination .page-numbers.current {
	background: #000000 !important;
	border-color: #000000 !important;
	color: #ffffff !important;
}

/* "…" – not a link, so no box */
.elementor-pagination .page-numbers.dots {
	min-width: auto !important;
	padding: 0 6px !important;
	border-color: transparent !important;
	background: transparent !important;
	color: #888888 !important;
}

/* Prev / Next */
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next {
	padding: 0 14px !important;
	font-weight: 500 !important;
}

/* Tables – remove Hello Elementor's striped + hover row backgrounds */
table tbody tr > td,
table tbody tr > th,
table tbody tr:nth-child(odd) > td,
table tbody tr:nth-child(odd) > th,
table tbody tr:nth-child(even) > td,
table tbody tr:nth-child(even) > th,
table tbody tr:hover > td,
table tbody tr:hover > th,
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: transparent !important;
}
.wp-block-table.is-style-stripes {
	border-bottom: 0 !important;
}

/* Loop Filters */
.tbmlf { --lf-width: 280px; }

/* Elementor Loop Carousel Pagination Dots */
.elementor-widget-loop-carousel .swiper-pagination-bullet {
    width: 20px;
    border-radius: 0px;
    height: 2px;
}

/* ===========================
   TESTIMONIAL CAROUSEL
   Full width · names pinned to the bottom of each card · bar pagination bottom-right
   =========================== */

/* Full width (Elementor leaves 5% spare for arrows) */
.elementor-widget-testimonial-carousel .elementor-main-swiper {
    width: 100% !important;
}

/* Every card fills its slide, so all cards share the tallest card's height */
.elementor-widget-testimonial-carousel .elementor-main-swiper .swiper-slide {
    display: flex !important;
    height: auto !important;
}

.elementor-widget-testimonial-carousel .elementor-testimonial {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}

.elementor-testimonial--layout-image_inline .elementor-testimonial,
.elementor-testimonial--layout-image_stacked .elementor-testimonial {
    flex-direction: column;
}

/* The text area grows; the name sits at the bottom */
.elementor-widget-testimonial-carousel .elementor-testimonial__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.elementor-widget-testimonial-carousel .elementor-testimonial__content .elementor-testimonial__cite {
    margin-top: auto !important;
    padding-top: 25px;                  /* minimum gap between text and name */
}

/* ---------- Pagination: 20 × 2px bars, bottom right ---------- */

.elementor-widget-testimonial-carousel .swiper-pagination {
    left: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    justify-content: flex-end;
    gap: 6px;
    width: auto !important;
    line-height: 0;
}

.elementor-widget-testimonial-carousel .swiper-pagination .swiper-pagination-bullet {
    box-sizing: content-box !important;
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 9px 0 !important;          /* bigger click/tap area, the bar stays 2px */
    background-color: #000000 !important;
    background-clip: content-box !important;
    border-radius: 0 !important;
    opacity: 0.2 !important;
    transition: opacity 0.3s ease !important;
}

.elementor-widget-testimonial-carousel .swiper-pagination .swiper-pagination-bullet:hover {
    opacity: 0.5 !important;
}

.elementor-widget-testimonial-carousel .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1 !important;
}

/* Image Rotate Effect */
.rotate-img {
  display: inline-block;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Elementor Popup Close Icon Effect */
.dialog-close-button svg {
    transition: transform 0.3s ease;
}

.dialog-close-button:hover svg {
    transform: rotate(90deg) scale(1.2);
}

/* Posts widget – Read More: black button → outline on hover */
.elementor-post__read-more {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 44px !important;
	padding: 0 22px !important;
	background: #000000 !important;
	color: #ffffff !important;
	border: 1px solid #000000 !important;
	border-radius: 0 !important;
	font-size: clamp(1rem, 0.9608rem + 0.1959vw, 1.125rem) !important;
	font-weight: 400 !important;
	text-transform: none !important;
	text-decoration: none !important;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

.elementor-post__read-more:hover,
.elementor-post__read-more:focus-visible {
	background: #F2F2F2 !important;
	color: #000000 !important;
	border-color: #D9D9D9 !important;
}

.elementor-post__read-more:focus-visible {
	outline: 2px solid #000000 !important;
	outline-offset: 3px !important;
}

/* Header search icon — 30px, no padding */
.tbmsr.header-search {
    --tbmsr-icon: 30px;
}

.tbmsr.header-search .tbmsr__trigger {
    padding: 0 !important;
}

/* ===========================
   ELEMENTOR LIGHTBOX — modern video lightbox
   Tweak the variables below to adjust size and spacing
   =========================== */

.elementor-lightbox {
    --tbm-lb-max: 900px;                          /* max video width */
    --tbm-lb-gutter-x: clamp(16px, 4vw, 64px);    /* space at the sides */
    --tbm-lb-gutter-y: clamp(84px, 11vh, 120px);  /* space top + bottom (room for the close icon) */
    --tbm-lb-ratio: 1.77777;                      /* 16:9 — set per video below */

    /* Video size, shared by the video and the close icon */
    --tbm-lb-w: min(
        var(--tbm-lb-max),
        calc(100vw - 2 * var(--tbm-lb-gutter-x)),
        calc((100vh - 2 * var(--tbm-lb-gutter-y)) * var(--tbm-lb-ratio))
    );
    --tbm-lb-h: calc(var(--tbm-lb-w) / var(--tbm-lb-ratio));

    background-color: rgba(10, 10, 10, 0.9) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Phones: use the visible screen height (ignores the browser toolbar) */
@supports (height: 100dvh) {
    .elementor-lightbox {
        --tbm-lb-w: min(
            var(--tbm-lb-max),
            calc(100vw - 2 * var(--tbm-lb-gutter-x)),
            calc((100dvh - 2 * var(--tbm-lb-gutter-y)) * var(--tbm-lb-ratio))
        );
    }
}

/* The video's shape, read from Elementor's aspect-ratio setting */
.elementor-lightbox:has(.elementor-video-wrapper[style*="2.33"]) { --tbm-lb-ratio: 2.33333; } /* 21:9 */
.elementor-lightbox:has(.elementor-video-wrapper[style*="1.5"])  { --tbm-lb-ratio: 1.5; }     /* 3:2 */
.elementor-lightbox:has(.elementor-video-wrapper[style*="1.33"]) { --tbm-lb-ratio: 1.33333; } /* 4:3 */
.elementor-lightbox:has(.elementor-video-square)                 { --tbm-lb-ratio: 1; }       /* 1:1 */
.elementor-lightbox:has(.elementor-video-portrait)               { --tbm-lb-ratio: 0.5625; }  /* 9:16 */

/* Logged in: a little more room at the top for the admin bar */
.admin-bar .elementor-lightbox {
    --tbm-lb-gutter-y: clamp(116px, 14vh, 150px);
}

/* ---------- Video ---------- */

/* Centre the video on the screen itself (same reference the close icon uses) */
.elementor-lightbox .elementor-video-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: auto !important;
    transform: translate(-50%, -50%) !important;
}

.elementor-lightbox .elementor-video-container .elementor-video-wrapper {
    width: var(--tbm-lb-w) !important;
    height: auto !important;
    margin: 0 auto !important;
    aspect-ratio: var(--tbm-lb-ratio);
    overflow: hidden;
    background: #000000;
    border-radius: 0;
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7);
    animation: tbm-lightbox-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.elementor-lightbox .elementor-video-container .elementor-video-wrapper iframe,
.elementor-lightbox .elementor-video-container .elementor-video-wrapper video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border: 0;
    background: #000000;
}

@keyframes tbm-lightbox-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Close icon — VIDEO lightbox only (galleries keep Elementor's default) ---------- */

.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button {
    --tbm-lb-close-gap: 30px;                     /* space between icon and video */

    position: fixed !important;
    top: calc((100% - var(--tbm-lb-h)) / 2 - var(--tbm-lb-close-gap) - 36px) !important;
    right: calc((100% - var(--tbm-lb-w)) / 2) !important;
    left: auto !important;
    z-index: 10;
    display: block !important;
    width: 36px !important;                       /* tap area; the × sits in its bottom-right corner */
    height: 36px !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
    transition: color 0.2s ease;
    animation: tbm-lightbox-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Hide Elementor's icon (it has built-in padding) and draw an exact × */
.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button > * {
    display: none !important;
}

/* 18px × whose right and bottom edges line up with the button's corner */
.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button::before,
.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button::after {
    content: '';
    position: absolute;
    top: 26px;
    left: 14px;
    width: 26px;
    height: 2px;
    background: currentColor;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button::before {
    transform: rotate(45deg);
}

.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button::after {
    transform: rotate(-45deg);
}

/* Hover: brighter + a quarter turn */
.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button:hover,
.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button:focus-visible {
    color: #ffffff !important;
}

.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button:hover::before,
.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button:focus-visible::before {
    transform: rotate(135deg);
}

.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button:hover::after,
.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button:focus-visible::after {
    transform: rotate(45deg);
}

.elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .elementor-lightbox .elementor-video-container .elementor-video-wrapper,
    .elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button {
        animation: none;
    }

    .elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button::before,
    .elementor-lightbox:has(.elementor-video-container) .dialog-lightbox-close-button::after {
        transition: none;
    }
}

/* Elementor Forms — fields */
.elementor-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.elementor-form select,
.elementor-form textarea {
    border: 1px solid #E0E0E0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}

/* Focus: darker border instead of the browser outline */
.elementor-form input:focus,
.elementor-form select:focus,
.elementor-form textarea:focus {
    outline: none !important;
    border-color: #000000 !important;
    box-shadow: none !important;
}

/* Country-code dropdown (intl-tel-input) */
.iti__dropdown-content {
    border: 1px solid #E0E0E0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ===========================
   ELEMENTOR GALLERY — filter titles as buttons
   (matches the Read More button)
   =========================== */

.elementor-gallery__titles-container {
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Inactive tab: outline */
.elementor-gallery__titles-container .elementor-gallery-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    font-size: clamp(1rem, 0.9608rem + 0.1959vw, 1.125rem) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #000000 !important;
    background: transparent !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 0 !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

/* Remove Elementor's underline pointer */
.elementor-gallery__titles-container .elementor-gallery-title::before,
.elementor-gallery__titles-container .elementor-gallery-title::after {
    display: none !important;
}

/* Hover + active tab: solid black, like the Read More button at rest */
.elementor-gallery__titles-container .elementor-gallery-title:hover,
.elementor-gallery__titles-container .elementor-gallery-title.elementor-item-active {
    color: #ffffff !important;
    background: #000000 !important;
    border-color: #000000 !important;
}

/* Keyboard focus */
.elementor-gallery__titles-container .elementor-gallery-title:focus-visible {
    outline: 2px solid #000000 !important;
    outline-offset: 3px !important;
}

/* ===========================
   NESTED TABS — fade the new tab in
   (stays invisible for 0.15s while the gallery re-measures)
   =========================== */

.elementor-widget-n-tabs .e-n-tabs-content > .e-con.e-active {
    animation: tbm-tab-in 0.3s ease both;
}

@keyframes tbm-tab-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-widget-n-tabs .e-n-tabs-content > .e-con.e-active {
        animation: none;
    }
}

/* ===========================
   HERO FIT — fills the screen below the header
   Add the class "hero-fit" to the hero container (Advanced → CSS Classes)
   =========================== */

.hero-fit {
    /* Starting values until the script measures the real header (set to your header heights) */
    --hero-offset: 90px;
    min-height: calc(100vh - var(--hero-offset)) !important;
}

@supports (height: 100svh) {
    .hero-fit {
        /* svh = screen height with the phone's browser bar showing → no jump when it hides */
        min-height: calc(100svh - var(--hero-offset)) !important;
    }
}

@media (max-width: 1024px) {
    .hero-fit { --hero-offset: 80px; }
}

@media (max-width: 767px) {
    .hero-fit { --hero-offset: 70px; }
}

/* ===========================
   TEXT REVEAL — add the class "text-reveal" to a widget
   Scroll down: words rise in one after another · scroll back up: they drop away
   Add "text-reveal--once" too, to reveal only once
   =========================== */

.text-reveal {
    --tr-duration: 0.8s;          /* reveal: time per word */
    --tr-stagger: 40ms;           /* reveal: delay between words */
    --tr-duration-out: 0.5s;      /* hide: time per word */
    --tr-stagger-out: 20ms;       /* hide: delay between words (last word first) */
}

/* Hidden until the script has prepared the words (no flash of the full text).
   Failsafe: if the script never runs, the text shows after 2.5s anyway. */
.tr-js .text-reveal:not(.tr-ready) {
    visibility: hidden;
    animation: tr-failsafe 0s linear 2.5s forwards;
}

@keyframes tr-failsafe {
    to { visibility: visible; }
}

/* Each word is a little window; the word slides up into it */
.text-reveal .tr-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.12em;       /* room for descenders (g, y, p) */
    margin-bottom: -0.12em;
}

/* Hidden state — also how words leave: quicker, last word first */
.text-reveal .tr-i {
    display: inline-block;
    transform: translateY(110%);
    transition: transform var(--tr-duration-out) cubic-bezier(0.5, 0, 0.75, 0);
    transition-delay: calc((var(--tr-max, 0) - var(--tr-n, 0)) * var(--tr-stagger-out));
}

/* Revealed — words rise in, first word first */
.text-reveal.is-revealed .tr-i {
    transform: none;
    transition: transform var(--tr-duration) cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--tr-n, 0) * var(--tr-stagger));
}

/* Page opened below it: show straight away, no animation */
.text-reveal.tr-instant .tr-i {
    transition: none !important;
}