/* ==========================================================================
   fmovie — GLASS LAYER
   ==========================================================================
   The visual language of this pen:
   https://codepen.io/vincenzopiromalli/pen/QwwWLOW

   That pen is a movie site built with Tailwind and Alpine, so the styles cannot be
   lifted literally — this theme has its own markup and its own CSS. What is
   portable is the LOOK, and this file reproduces it with the theme's existing
   tokens so the Branding colour picker still drives everything:

     --fm-accent     the accent, unchanged
     --fm-surface-*  the panel fills, now see-through
     --fm-r-*        radii, now used more generously
     --fm-ease*      motion curves, reused for the lift

   THE SIX TRAITS OF THE PEN
   -------------------------
     1. Glassmorphism — panels are rgba(fill, .7) under a blur(10px) glass with a
        hairline white border, rather than flat opaque rectangles.
     2. Glass-light — chips and small buttons are white at 10%, not a solid fill.
     3. A dot-grid page background — a 20px lattice of faint dots.
     4. Gradient text — section headings fade white to grey.
     5. Pills — badges and buttons are fully rounded.
     6. A lift on hover — posters rise 5px and brighten, buttons rise 2px.

   WHY A SEPARATE FILE
   -------------------
   Kept out of premium.css so this is one file to remove if the look is not wanted:
   delete the enqueue in inc/styles.php and the theme is back to its solid panels.

   PERFORMANCE NOTE
   ----------------
   `backdrop-filter` is expensive and it is not free to put on everything. It is
   applied only where something actually sits *behind* the panel and the blur is
   visible — the header, the drawer, menus, modals, the search overlay — and NOT to
   the card grid, where hundreds of blurred layers would wreck scrolling on a
   mid-range phone. Everything else gets the glass *fill* without the blur, which
   is visually almost identical when nothing is behind it.

   `@supports` guards the blur, so a browser without it gets the translucent fill
   and a solid border instead of an unstyled panel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	--fm-glass-fill: rgba(26, 26, 26, 0.7);
	--fm-glass-fill-strong: rgba(10, 10, 10, 0.82);
	--fm-glass-light: rgba(255, 255, 255, 0.1);
	--fm-glass-light-hover: rgba(255, 255, 255, 0.16);
	--fm-glass-border: rgba(255, 255, 255, 0.1);
	--fm-glass-border-hover: rgba(255, 255, 255, 0.2);
	--fm-glass-blur: blur(10px) saturate(140%);
	--fm-lift: translateY(-5px) scale(1.02);
	--fm-lift-btn: translateY(-2px);
	--fm-shadow-lift: 0 10px 20px rgba(0, 0, 0, 0.3);
	--fm-shadow-btn: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   2. Page — the dot grid
   --------------------------------------------------------------------------
   The pen's signature background: a 20px lattice of 1px dots. Kept faint here
   (the pen uses 0.1 white, which at this theme's darker palette reads as noise
   behind text) and fixed so it does not slide while scrolling.
   -------------------------------------------------------------------------- */
body {
	background-color: var(--fm-bg);
	background-image: radial-gradient( rgba(255, 255, 255, 0.055 ) 1px, transparent 1px );
	background-size: 20px 20px;
	background-attachment: fixed;
	overflow-x: hidden;
}

/* The grid sits behind everything, so opaque shells must give way to it. */
.site,
#container,
.wrapper,
main,
.fm-page-wrap {
	background: transparent;
}

/* --------------------------------------------------------------------------
   3. Glass surfaces
   -------------------------------------------------------------------------- */

/* Shared fill + hairline. Used by everything below. */
#masthead,
#menu,
.fm-search-overlay .fm-search-panel,
.modal .modal-content,
.dropdown-menu,
.filters,
#controls,
.sidebar section,
.fm-page,
.fm-faq-item,
.fm-ru-card,
.fm-dl-btn,
.fm-request-row input,
.fm-request-row select,
.fm-request-row textarea {
	background-color: var(--fm-glass-fill);
	border-color: var(--fm-glass-border);
}

/* The blur, only where content is actually visible behind the panel. */
@supports ( ( -webkit-backdrop-filter: blur(1px) ) or ( backdrop-filter: blur(1px) ) ) {
	#masthead,
	#menu,
	.fm-search-overlay .fm-search-panel,
	.modal .modal-content,
	.dropdown-menu,
	.filters {
		-webkit-backdrop-filter: var(--fm-glass-blur);
		backdrop-filter: var(--fm-glass-blur);
	}
}

/* The header: glass over the artwork that scrolls beneath it. */
#masthead {
	background-color: var(--fm-glass-fill-strong) !important;
	border-bottom: 1px solid var(--fm-glass-border);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* A hairline highlight along the top edge — the trick that makes a glass panel
   read as a sheet of glass rather than a translucent box. */
.fm-page,
.fm-faq-item,
.sidebar section,
#menu,
.fm-search-overlay .fm-search-panel {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* --------------------------------------------------------------------------
   4. Section headings — accent, not gradient text
   --------------------------------------------------------------------------
   The pen fades its headings white to grey with `background-clip: text`. That was
   tried here and had to be dropped: premium.css already pins section headings with

       .head .title { background: none !important; color: var(--fm-accent) !important; }

   The `!important` background wins, but `-webkit-text-fill-color: transparent`
   still applied — so the heading's text became invisible while its background
   stayed empty. The word "RECOMMENDED" vanished from the home page.

   The accent heading is the theme's own established treatment, it survives the
   Branding colour picker, and it is legible. Kept as it was.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5. Chips — glass-light pills
   --------------------------------------------------------------------------
   Quality, media type, rating and the count on a tab all become the pen's small
   white-tinted pills.
   -------------------------------------------------------------------------- */
.item .quality,
.item .fm-rating,
.slide-wrapper .meta > *,
.tabs .tab .count,
#providers .tabs .tab .count,
#industries .tabs .tab .count {
	background: var(--fm-glass-light) !important;
	border: 1px solid var(--fm-glass-border) !important;
	border-radius: var(--fm-r-pill) !important;
	color: var(--fm-text) !important;
	backdrop-filter: none;
}

/* The quality chip was a solid accent block; the pen's is a neutral pill. */
.item .quality {
	background: var(--fm-glass-light) !important;
	color: var(--fm-text) !important;
	letter-spacing: 0.04em;
}

/* Rating keeps the accent so it still reads as a score. */
.item .fm-rating {
	background: rgba(0, 0, 0, 0.55) !important;
	color: var(--fm-text) !important;
}

.item .fm-rating i { color: var(--fm-accent) !important; }

/* --------------------------------------------------------------------------
   6. Cards — the lift
   --------------------------------------------------------------------------
   The pen lifts the poster, not the whole cell: scaling the grid item would push
   its neighbours and blur the text underneath. Only the poster frame moves, and
   the transform is reset for anyone who asked for reduced motion.
   -------------------------------------------------------------------------- */
.item .poster {
	transition: transform 300ms var(--fm-ease), box-shadow 300ms var(--fm-ease), filter 300ms var(--fm-ease);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	will-change: auto;
}

.item:hover .poster,
.item:focus-within .poster {
	transform: translateY(-5px) scale(1.02);
	box-shadow: var(--fm-shadow-lift);
	filter: brightness(1.08);
}

/* Rounded corners, as in the pen. */
.item .poster,
.item .poster img {
	border-radius: var(--fm-r);
}

/* The glow the pen adds around a card's border on hover. */
.item:hover .poster a:after {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   7. Buttons — pills that rise
   -------------------------------------------------------------------------- */
.btn,
.filters .btn,
.filters .dropdown-toggle,
.slide-wrapper .actions .watchnow,
#controls .item,
.tabs .tab,
.search-wrap .search-submit,
.fm-dl-btn {
	transition: transform 250ms var(--fm-ease), box-shadow 250ms var(--fm-ease),
		background-color 200ms var(--fm-ease), border-color 200ms var(--fm-ease),
		color 200ms var(--fm-ease);
}

.btn,
.slide-wrapper .actions .watchnow,
#controls .item,
.tabs .tab,
.fm-dl-btn {
	border-radius: var(--fm-r-pill) !important;
}

.btn:hover,
.btn:focus-visible,
.filters .btn:hover,
.filters .dropdown-toggle:hover,
.slide-wrapper .actions .watchnow:hover,
#controls .item:hover,
.tabs .tab:hover,
.fm-dl-btn:hover {
	transform: var(--fm-lift-btn);
	box-shadow: var(--fm-shadow-btn);
}

/* The primary action keeps the accent; the pen's secondary buttons are glass. */
.btn-secondary,
#controls .item,
.tabs .tab {
	background: var(--fm-glass-light) !important;
	border: 1px solid var(--fm-glass-border) !important;
	color: var(--fm-text) !important;
}

.btn-secondary:hover,
#controls .item:hover,
.tabs .tab:hover {
	background: var(--fm-glass-light-hover) !important;
	border-color: var(--fm-glass-border-hover) !important;
}

/* The active tab is the accent, as in the pen's selected states. */
.tabs .tab.active {
	background: var(--fm-accent) !important;
	border-color: var(--fm-accent) !important;
	color: var(--fm-on-accent) !important;
}

.tabs .tab.active .count {
	background: rgba(0, 0, 0, 0.2) !important;
	border-color: transparent !important;
	color: var(--fm-on-accent) !important;
}

/* --------------------------------------------------------------------------
   8. The hero — a glass caption over the backdrop
   --------------------------------------------------------------------------
   The pen's slider puts a glass card around the caption instead of a flat scrim.
   Only the info block gets it, so the artwork still reads edge to edge.
   -------------------------------------------------------------------------- */
.slide-wrapper .info {
	position: relative;
	padding: 1.25rem 1.4rem;
	border-radius: var(--fm-r-lg);
	background: rgba(10, 10, 10, 0.55);
	border: 1px solid var(--fm-glass-border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 30px rgba(0, 0, 0, 0.4);
	max-width: 640px;
}

@supports ( ( -webkit-backdrop-filter: blur(1px) ) or ( backdrop-filter: blur(1px) ) ) {
	.slide-wrapper .info {
		-webkit-backdrop-filter: blur(8px) saturate(130%);
		backdrop-filter: blur(8px) saturate(130%);
	}
}

/* --------------------------------------------------------------------------
   9. Sidebar rows — the pen's glass list items
   -------------------------------------------------------------------------- */
.sidebar section {
	border-radius: var(--fm-r-lg);
	overflow: hidden;
}

.fm-ru-card {
	background: var(--fm-glass-light) !important;
	border: 1px solid var(--fm-glass-border) !important;
	border-radius: var(--fm-r) !important;
	transition: background-color 200ms var(--fm-ease), border-color 200ms var(--fm-ease),
		transform 250ms var(--fm-ease);
}

.fm-ru-card:hover {
	background: var(--fm-glass-light-hover) !important;
	border-color: var(--fm-glass-border-hover) !important;
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   10. Menus and modals — glass over the page
   -------------------------------------------------------------------------- */
#menu {
	border-radius: var(--fm-r-lg);
	box-shadow: var(--fm-float), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dropdown-menu {
	border-radius: var(--fm-r);
	box-shadow: var(--fm-float);
}

.modal .modal-content {
	border-radius: var(--fm-r-lg);
	border: 1px solid var(--fm-glass-border);
	box-shadow: var(--fm-float);
}

/* The scrim behind a modal, softened so the glass above it has something to blur. */
.modal-backdrop.show { opacity: 0.72; }

/* --------------------------------------------------------------------------
   11. Form fields — glass, as in the pen's search input
   -------------------------------------------------------------------------- */
.fm-request-row input,
.fm-request-row select,
.fm-request-row textarea,
.search-wrap input[type="search"],
.search-wrap input[type="text"] {
	background: var(--fm-glass-light);
	border: 1px solid var(--fm-glass-border);
	border-radius: var(--fm-r-pill);
	color: var(--fm-text);
	transition: background-color 200ms var(--fm-ease), border-color 200ms var(--fm-ease);
}

.fm-request-row textarea,
.fm-request-row select {
	border-radius: var(--fm-r);
}

.fm-request-row input:focus,
.fm-request-row select:focus,
.fm-request-row textarea:focus,
.search-wrap input:focus {
	background: var(--fm-glass-light-hover);
	border-color: var(--fm-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 240, 181, 0.14);
}

/* --------------------------------------------------------------------------
   12. Pagination bullets, as in the pen
   -------------------------------------------------------------------------- */
.swiper-pagination-bullet {
	background: #fff !important;
	opacity: 0.45;
	transition: opacity 200ms var(--fm-ease), width 200ms var(--fm-ease);
}

.swiper-pagination-bullet-active {
	opacity: 1;
	width: 20px !important;
	border-radius: var(--fm-r-pill) !important;
}

/* --------------------------------------------------------------------------
   13. Scrollbar — hidden where the pen hides it, but still usable
   -------------------------------------------------------------------------- */
.filters,
.tabs,
#menu > ul {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.filters::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
#menu > ul::-webkit-scrollbar {
	display: none;
}

/* --------------------------------------------------------------------------
   14. Reduced motion
   --------------------------------------------------------------------------
   The lift is decorative. Anyone who has asked their system for less motion gets
   the colour and shadow changes and none of the movement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.item:hover .poster,
	.item:focus-within .poster,
	.btn:hover,
	.filters .btn:hover,
	#controls .item:hover,
	.tabs .tab:hover,
	.fm-dl-btn:hover,
	.fm-ru-card:hover {
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   15. Phones
   --------------------------------------------------------------------------
   The blur is dropped on small screens: it is the single most expensive thing in
   this file and it is least visible there, while the card lift stays because it is
   what makes the grid feel alive under a thumb.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	@supports ( ( -webkit-backdrop-filter: blur(1px) ) or ( backdrop-filter: blur(1px) ) ) {
		#masthead,
		#menu,
		.filters,
		.slide-wrapper .info {
			-webkit-backdrop-filter: none;
			backdrop-filter: none;
		}
	}

	#masthead {
		background-color: rgba(5, 5, 5, 0.96) !important;
	}

	.slide-wrapper .info {
		background: rgba(10, 10, 10, 0.72);
		max-width: none;
	}
}