/* ═══════════════════════════════════════════════════
   app.css — Shared hosting friendly (no build step)
   Dark editorial aesthetic with cinematic red accents
═══════════════════════════════════════════════════ */

/* ── Custom Properties ──────────────────────────── */
:root {
    --primary:    #E91E8C;
    --secondary:  #FFD166;
    --accent:     #A31562;
    --tertiary:   #1A1A2E;
    --quaternary: #A9714B;

    --c-bg:        #ffffff; /* body background */
    --c-surface:   #FFD166; /* secondary */
    --c-surface2:  #242424;
    --c-border:    #2E2E2E;
    --c-text:      #000;
    --c-text-muted:#eee;
    --c-accent:    #00ff00;
    --c-accent2:   #FF8F00;
    --c-link:      #E57373;
    --c-link-hover:#EF9A9A;

    --font-display: 'Yellowtail', Georgia, serif;
    --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius-sm:   0;
    --radius-md:   0;
    --radius-lg:   0;

    --shadow-card: 0 4px 24px rgba(0,0,0,.5);
    --trans:       0.2s ease;

    --container-max: 1700px;
    --gap-grid:      1.5rem;
}

/* ── Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

.v-btn {
    display: block !important;
    height: auto !important;
    white-space: normal !important;
    padding: 8px !important;
    max-width: 100%;
    text-align: center;
}

.aff_link {
  background: black;
  border-radius: 5px;
  border: 1px solid lightyellow;
  box-shadow: 0 0 5px lightyellow;
}

/* Container sizing and constraints */
.brazzers-video-container {
  position: relative;
  width: 100%;
  height: 300px; /* Full viewport height */
  overflow: hidden; /* Restricts video overflow */
}

/* Background video coverage */
.brazzers-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Forces video to behave like a background image */
  z-index: 1; /* Keeps video behind everything */
}

/* Semi-transparent dark overlay */
.brazzers-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Placed above video but below text */
}

/* Foreground content container */
.brazzers-video-content {
  position: relative;
  z-index: 1; /* Ensures content sits safely above the overlay */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #ffffff;
  text-align: center;
  font-family: sans-serif;
  padding: 0 20px;
}

/* Clickable link element styling */
.brazzers-action-link {
  margin-top: 20px;
  padding: 12px 30px;
  color: #ffffff;
  background-color: #007bff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.brazzers-action-link:hover {
  background-color: #0056b3;
}

/* Container sizing and constraints */
.stripchat-video-container {
  position: relative;
  width: 100%;
  height: 300px; /* Full viewport height */
  overflow: hidden; /* Restricts video overflow */
}

/* Background video coverage */
.stripchat-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Forces video to behave like a background image */
  z-index: 1; /* Keeps video behind everything */
}

/* Semi-transparent dark overlay */
.stripchat-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Placed above video but below text */
}

/* Foreground content container */
.stripchat-video-content {
  position: relative;
  z-index: 1; /* Ensures content sits safely above the overlay */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #ffffff;
  text-align: center;
  font-family: sans-serif;
  padding: 0 20px;
}

/* Clickable link element styling */
.stripchat-action-link {
  margin-top: 20px;
  padding: 12px 30px;
  color: #ffffff;
  background-color: #007bff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.stripchat-action-link:hover {
  background-color: #0056b3;
}


.primary {
    background-color: var(--primary) !important;
    color: #fff !important;
}

.secondary {
    background-color: var(--secondary) !important;
    color: var(--tertiary) !important;
}

.tertiary {
    background-color: var(--tertiary) !important;
}

.text-body {
    font-family: var(--font-body) !important;
}

.text-display {
    font-family: var(--font-display) !important;
}

.accent {
    background-color: var(--accent) !important;
}

.primary--text {
    color: var(--primary) !important;
}

.secondary--text {
    color: var(--secondary) !important;
}

.tertiary--text {
    color: var(--tertiary) !important;
}

button.tertiary--text,
.secondary.v-btn {
  text-shadow: 0px 1px 0 #bbb;
}

.primary.v-btn {
  text-shadow: 0px 1px 0 #555;
}

.accent--text {
    color: var(--accent) !important;
}

body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: 18px;
}

/* Vuetify override — keep our bg */
.v-application { background: var(--c-bg) !important; }

/* ── Accessibility ──────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--c-accent);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    z-index: 9999;
    transition: top var(--trans);
}
.skip-link:focus { top: 1rem; }

/* ── Container ──────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* ── Typography ─────────────────────────────────── */
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.2; }

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.25em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.5em; }

a { color: var(--primary); text-decoration: none; transition: color var(--trans); }
a:hover, a:focus-visible { color: var(--c-link-hover); text-decoration: none; }

/* ── Navigation ─────────────────────────────────── */
#header {
    box-shadow: 0 0 15px rgba(0,0,0,0.5) !important;
    z-index: 99;
}
.site-nav { border-bottom: 1px solid var(--c-border); }

.nav-logo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--primary) !important;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.nav-links {
    gap: 0;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1.35em;
}

.nav-links .fa,
.nav-links .svg-inline--fa {
    font-size: 1.35em !important;
}

.nav-link {
    padding: 1em;
    transition: color var(--trans), background var(--trans);
    display: block;
}

.nav-links a:hover {
    transform: scale(1.2) !important;
    transition: 0.5s ease;
    color: #ffd166 !important;
    text-decoration: none;
    text-shadow: 3px 3px 7px rgba(0,0,0,0.45);
    border: none;
}

.nav-links .active {
   text-decoration: none;
   border-bottom: 1px solid var(--tertiary);
   background: var(--accent);
}

.v-app-bar--is-scrolled,
.v-app-bar--is-scrolled .v-toolbar__content {
    height: 85px !important;
}

.v-app-bar--is-scrolled .v-toolbar__content img {
    width: 60px;
    height: 60px;
    margin-bottom: 0 20px;
}

.v-app-bar--is-scrolled .nav-links .fa,
.v-app-bar--is-scrolled .nav-links .svg-inline--fa {
    font-size: 0.85em !important;
}

.v-app-bar--is-scrolled .nav-link {
    padding: 0.25em 1em;
}

/* ── Breadcrumb ─────────────────────────────────── */
.breadcrumb-nav { padding: .75rem 0; background: var(--tertiary); color: #fff;}

.breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    font-size: .85rem;
    color: green;
    padding: 0 1.25rem;
    max-width: var(--container-max);
    margin: 0 auto;
}

.breadcrumb-item a { color: var(--secondary) !important; }
.breadcrumb-item.active { color: #F4D8CD; }
.breadcrumb-sep { color: #fff; }

/* ── Page Header ────────────────────────────────── */
.page-header {
    padding: 3rem 0 2rem;
    background: linear-gradient(180deg, var(--c-surface) 0%, transparent 100%);
    border-bottom: 1px solid var(--c-border);
}

.page-title { color: var(--c-text); margin-bottom: .5rem; }
.page-subtitle { color: var(--c-text-muted); font-size: 1.05rem; }

/* Filter chips */
.filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.filter-chip {
    padding: .35rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: var(--c-surface2);
    color: var(--c-text-muted);
    font-size: .8rem;
    font-weight: 500;
    transition: all var(--trans);
    text-decoration: none;
}
.filter-chip:hover, .filter-chip.active {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
    text-decoration: none;
}

/* ── Sort bar ───────────────────────────────────── */
.sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.result-count { font-size: .85rem; color: var(--tertiary); }


/* Badges */
.badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    padding: .2rem .5rem;
    border-radius: var(--radius-sm);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
}
.badge-new     { background: var(--c-accent);  color: #fff; }
.badge-featured { background: var(--c-accent2); color: #000; }

/* ── Hero Section ───────────────────────────────── */
.actress-hero {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    margin-bottom: -30px;
    margin-top: -30px;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 60px 40px;

  color: #fff;
  text-align: center;

  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  /* dark overlay for readable text */
  background-image: linear-gradient( 135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0.75) 100% );

  /* stronger readable text */
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.7);

  /* irregular futuristic shape */
clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100% );

border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(10px);
box-shadow:
  0 20px 50px rgba(0,0,0,.45),
  inset 0 0 40px rgba(255,255,255,.03);

}


.hero-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(255, 0, 120, 0.35),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(0, 140, 255, 0.25),
      transparent 40%
    );

  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-container {
    position: relative;
    z-index: 1;
    padding-block: 3rem;
}

.hero-text {
    display: inline;
}

/* Stats definition list */
.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-item dt {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-text-muted);
}

.stat-item dd {
    font-size: .95rem;
    font-weight: 600;
    color: var(--c-text);
}

/* Tags */
.actress-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.tag-pill {
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(229,57,53,.15);
    border: 1px solid rgba(229,57,53,.3);
    color: var(--c-link);
    font-size: .8rem;
    font-weight: 500;
    transition: all var(--trans);
    text-decoration: none;
}
.tag-pill:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
    text-decoration: none;
}

/* ── Tab Sections ───────────────────────────────── */
.section-container { padding-block: 2rem; }
.tab-section { padding-top: 1.5rem; }

.section-heading {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--c-accent);
    display: inline-block;
}

.section-desc { color: var(--c-text-muted); margin-bottom: 1.25rem; }

/* ── Bio ────────────────────────────────────────── */
.bio-article { max-width: 72ch; }
.bio-article p { margin-bottom: 1rem; color: var(--c-text-muted); }
.bio-article h3 { margin: 1.5rem 0 .75rem; }

.trivia-list { list-style: disc; padding-left: 1.25rem; color: var(--c-text-muted); }
.trivia-list li { margin-bottom: .4rem; }

.bio-related-links {
    margin-top: 2rem;
    padding: 1.25rem;
    background: var(--c-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
}

.bio-related-links h3 { font-size: 1rem; margin-bottom: .75rem; }

.bio-related-links nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.bio-related-links nav a {
    padding: .3rem .7rem;
    background: var(--c-surface2);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    text-decoration: none;
}

/* ── Gallery ────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
}

.gallery-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 2/3;
    background: var(--c-surface2);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.gallery-item:hover img { transform: scale(1.07); }

.lightbox-card { background: #000 !important; text-align: center; }
.lightbox-img  { max-width: 100%; max-height: 90vh; object-fit: contain; }

/* ── Films Grid ─────────────────────────────────── */
.films-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.film-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--trans), box-shadow var(--trans);
}
.film-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.film-card a { text-decoration: none; color: inherit; display: block; }

.film-thumb-wrap {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--c-surface2);
}

.film-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }

.film-duration {
    position: absolute;
    bottom: .4rem;
    right: .4rem;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: .75rem;
    padding: .1rem .4rem;
    border-radius: var(--radius-sm);
}

.film-info { padding: .75rem; }
.film-title { font-size: .95rem; font-weight: 600; margin-bottom: .3rem; line-height: 1.3; }
.film-meta  { font-size: .8rem; color: var(--c-text-muted); }

.film-cast { font-size: .8rem; color: var(--c-text-muted); margin-top: .35rem; }
.costar-link { color: var(--c-link); }

/* ── Lookalikes ─────────────────────────────────── */
.lookalikes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.25rem;
}

.lookalike-card a { display: block; text-decoration: none; color: inherit; }

.lookalike-card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: transform var(--trans);
    border: 1px solid var(--c-border);
}
.lookalike-card:hover img { transform: scale(1.04); }

.lookalike-info { padding: .5rem .25rem; }
.lookalike-name { font-size: .9rem; font-weight: 600; }
.lookalike-films { font-size: .75rem; color: var(--c-text-muted); }

/* ── Tags / Mini tags ───────────────────────────── */
.actress-card-tags, .lookalike-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }

.mini-tag {
    font-size: .7rem;
    padding: .1rem .45rem;
    background: var(--c-surface2);
    border-radius: 999px;
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

/* ── Related Searches ───────────────────────────── */
.related-searches-block {
    margin-top: 2rem;
    padding: 1.25rem;
    background: var(--c-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
}
.related-searches-block h3 { margin-bottom: .75rem; }
.related-searches-block nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.related-searches-block nav a {
    font-size: .85rem;
    color: var(--c-link);
    padding: .2rem .5rem;
    background: var(--c-surface2);
    border-radius: var(--radius-sm);
}

/* ── You May Also Like ──────────────────────────── */
.also-like-section {
    padding-block: 3rem;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
}

.also-like-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--gap-grid);
    margin-top: 1.25rem;
}

/* ── Pagination ─────────────────────────────────── */
.pagination-nav { padding: 2rem 0; }

.pagination-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    justify-content: center;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .75rem;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--primary);
    color: var(--tertiary);
    font-size: 1em;
    transition: all var(--trans);
    text-decoration: none;
}
.page-item.active .page-link,
.page-link:hover { background: var(--primary); border-color: pink; color: #fff; text-decoration: none; }

.page-item.disabled .page-link { color: #aaa; pointer-events: none; border-color: #aaa}

/* ── Footer ─────────────────────────────────────── */
.site-footer {
    background: var(--accent);
    padding-top: 1rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding-bottom: 2rem;
}

.footer-heading {
    font-family: var(--font-display);
    font-size: 1.5em;
    letter-spacing: .08em;
    color: #fff;
    margin-bottom: .75rem;
    border-bottom: 2px solid #fff;
    display: inline-block;
}

.footer-tagline { font-size: .85rem; color: #fff; line-height: 1.5; }

.footer-links {
    margin: 0;
    padding: 0 !important;
    list-style: none;
    columns: 2;
    column-gap: 1em;
}

.footer-links li {
    padding: 0.25em 0;
    margin: 0;
}

.footer-links a { font-size: .85rem; color: #fff !important; display: inline-block; margin: 0 2em 0 0;}
.footer-links a:hover { color: var(--secondary) !important; text-decoration: none; }

.footer-bottom {
    padding: 0.15em 0 0;
    background-color: #8B1254;
    color: #fff;
    text-align: right;
    font-family: var(--font-display);
}

/* ── SEO Copy Block ─────────────────────────────── */
.seo-copy-block {
    padding-block: 2.5rem;
    border-top: 1px solid var(--c-border);
}
.seo-copy-block h2 { font-size: 1.1rem; margin-bottom: .75rem; color: var(--c-text-muted); }
.seo-copy-block p  { font-size: .9rem; color: var(--c-text-muted); max-width: 80ch; }

/* ── Search dialog ──────────────────────────────── */
.search-dialog-card { padding: 1.25rem; background: var(--tertiary) !important; }
.search-hint { font-size: .8rem; color: var(--c-text-muted); margin-top: .5rem; }

.biography {
     position: relative;
     width: 100%;
     padding: 1.5em 2.5em;
     background-color: #ffd166;
     margin: 2em 0 0;
     color: #1a1a2e;
     background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(0, 0, 0, 0.04) 27px, rgba(0, 0, 0, 0.04) 28px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
     border-top: 4px solid rgba(0, 0, 0, 0.07);
}
 .biography a {
     color: darkorchid;
     font-weight: bold;
}
 .biography.modelList {
     font-size: 14px;
}
 .biography::after {
     content: '';
     position: absolute;
     top: -4px;
     left: 0;
     width: 30px !important;
     height: 30px !important;
     min-height: 30px !important;
     background: linear-gradient(to top left, #c39b31 50%, #1a1a2e 50%);
     filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
}
 .biography.modelList::after {
     content: '';
     position: absolute;
     top: -4px;
     left: 0;
     width: 30px !important;
     height: 30px !important;
     min-height: 30px !important;
     background: linear-gradient(to top left, #c39b31 50%, #fff 50%);
     filter: drop-shadow(3px 4px 2px rgba(0, 0, 0, 0.5));
}
 .biography::before {
     content: '';
     position: absolute;
     bottom: 38px;
     right: 0;
     width: 38px;
     height: 1px;
     background: rgba(0, 0, 0, 0.1);
     transform-origin: right bottom;
     transform: rotate(-45deg) translateX(14px) translateY(14px);
}

.framed-image {
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
     border: 5px solid #fff;
     text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
     background: #fff;
}
 .framed-image:hover {
     border-color: var(--secondary) !important;
     transform: scale(1.05);
     transition: 0.5s ease;
     z-index: 95;
}

.framed-image.nozoom:hover {
    transform: none;
}

.confetti-container {
     position: relative;
     overflow: hidden;
     background: #111;
    /* dark bg for visibility */
}
 .confetti-container::before, .confetti-container::after {
     content: '';
     position: absolute;
     top: -100%;
     left: 0;
     right: 0;
     bottom: 0;
    /* multiple radial-gradients for varied colors and spacing */
     background-image: radial-gradient(circle, #ff0 4px, transparent 0), radial-gradient(circle, #00f 4px, transparent 0), radial-gradient(circle, #f0f 3px, transparent 0), radial-gradient(circle, #0f0 5px, transparent 0), radial-gradient(circle, #ff4500 4px, transparent 0);
     background-size: 15% 15%, 20% 18%, 13% 15%, 25% 22%, 18% 20%;
     background-position: 10% 10%, 30% 20%, 50% 10%, 70% 30%, 90% 15%;
     animation: confetti-fall 7s linear infinite;
}
 .confetti-container::after {
     background-size: 20% 20%, 15% 15%, 25% 25%, 10% 10%, 30% 30%;
     background-position: 5% 5%, 45% 45%, 85% 85%, 15% 75%, 75% 15%;
     animation-duration: 9s;
     animation-delay: -3.5s;
}

.tilt {
  transform: rotate(-20deg);
}

 @keyframes confetti-fall {
     0% {
         transform: translateY(-100%) rotate(0deg) skewX(0deg);
    }
     25% {
         transform: translateY(-50%) rotate(90deg) skewX(15deg);
    }
     50% {
         transform: translateY(0%) rotate(180deg) skewX(-15deg);
    }
     75% {
         transform: translateY(50%) rotate(270deg) skewX(10deg);
    }
     100% {
         transform: translateY(100%) rotate(360deg) skewX(0deg);
    }
}

.top-white-fold {
     background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(0, 0, 0, 0.04) 27px, rgba(0, 0, 0, 0.04) 28px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}
 .top-white-fold::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 30px !important;
     height: 30px !important;
     min-height: 30px !important;
     background: linear-gradient(to top left, #ddd 50%, #1a1a2e 50%);
     filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
}
 .bottom-white-fold {
     background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(0, 0, 0, 0.04) 27px, rgba(0, 0, 0, 0.04) 28px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}
 .bottom-white-fold::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 30px !important;
     height: 30px !important;
     min-height: 30px !important;
     background: linear-gradient(to bottom right, #ddd 50%, #1a1a2e 50%);
     filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.5));
}
 .bottom-pink-fold {
     position: relative;
     background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(0, 0, 0, 0.04) 27px, rgba(0, 0, 0, 0.04) 28px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}
 .bottom-pink-fold::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 30px !important;
     height: 30px !important;
     min-height: 30px !important;
     background: linear-gradient(to bottom right, #c81275 50%, #1a1a2e 50%);
     filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.5));
}
 .bottom-pink-fold-white {
     position: relative;
     background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(0, 0, 0, 0.04) 27px, rgba(0, 0, 0, 0.04) 28px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}
 .bottom-pink-fold-white::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 30px !important;
     height: 30px !important;
     min-height: 30px !important;
     background: linear-gradient(to bottom right, #c81275 50%, #ffffff 50%);
     filter: drop-shadow(-4px -4px 2px rgba(0, 0, 0, 0.5))
}

 .filmography {
     width: 100%;
     background: linear-gradient(135deg, #3c3d42 0%, #28292d 40%, #1a1b1f 70%, #0f1013 100%);
     border-radius: 0;
     position: relative;
     display: inline-block;
    /* Top and bottom sprocket rows */
     border-top: 45px solid transparent;
     border-bottom: 45px solid transparent;
}
 .filmography::before, .filmography::after {
     content: '';
     position: absolute;
     left: 25px;
     right: 25px;
     height: 25px;
    /* Creates the dashed "sprocket" look using a linear-gradient */
     background-image: linear-gradient(to right, #1a1a2e 0%, #1a1a2e 65%, transparent 65%), linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
     background-size: 40px 100%;
     background-repeat: repeat-x;
}
 .filmography::before {
     top: -35px;
}
 .filmography::after {
     bottom: -35px;
}

.galleryCarousel .v-image__image--cover {
    background-size: contain;
}

.news-masonry {
columns: 1;
column-gap: 12px;
}

.face-compare-wrapper,
.body-compare-wrapper {
  position: relative;
  max-width: 450px;
  /*max-height: 80vh;*/
  margin: 0 auto;
}

.face-compare-slider,
.body-compare-slider {
  width: 100%;
  /*max-height: 80vh;*/
  --divider-width: 0.25em;
  --divider-color: var(--primary);
  --default-handle-color: var(--primary);
}

.face-compare-slider .before figcaption,
.face-compare-slider .after figcaption,
.body-compare-slider .before figcaption,
.body-compare-slider .after figcaption {
  background: rgba(0,0,0,0.75);
  color: #fff;
  border-radius: 3px;
  padding: 0.75em;
  font-size: 0.75em;
  font-weight: bold;
  position: absolute;
  line-height: 100%;
  z-index: 3;
}

.face-compare-slider figure,
.body-compare-slider figure {
  margin: 0;
  position: relative;
  height: 100%;
}

.face-compare-slider figure img,
.body-compare-slider figure img {
  width: 100%;
  height: 100%;
  /*min-height: 70vh;*/
  object-fit: cover;
  display: block;
}

.face-compare-slider figcaption,
.body-compare-slider figcaption {
  position: absolute;
  z-index: 5;
}

.face-compare-slider figure.before figcaption,
.body-compare-slider figure.before figcaption { left: 12px; top: 12px; }

.face-compare-slider figure.after figcaption,
.body-compare-slider figure.after figcaption { right: 12px;   bottom: 12px; }

.face-compare-slider figcaption a,
.body-compare-slider figcaption a {
  display: inline-block;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
}

.face-compare-slider figcaption a:hover,
.body-compare-slider figcaption a:hover {
  background: #e91e8c;
}


@media (min-width: 600px)  { .news-masonry { columns: 2; } }
@media (min-width: 960px)  { .news-masonry { columns: 3; } }
@media (min-width: 1280px) { .news-masonry { columns: 6; } }

.news-masonry-item {
break-inside: avoid;
display: inline-block; /* required for break-inside to work reliably */
width: 100%;
margin-bottom: 12px;
}

.bubble-container {
  position: relative;
  width: 100%;
  background-color: #1A1A2E;
  overflow: hidden;
  padding: 3em 1em;
}

.bubble-container a, .bubble-container p, .bubble-container h2 {
    position: relative;
    z-index: 12;
}

/* Subtle grid texture */
.texture {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Base bubble styles */
.bubble {
  position: absolute;
  bottom: -50px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03));
  border-radius: 50%;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px rgba(255, 255, 255, 0.1);
  animation: floatUp 12s infinite linear;
}

/* Varying sizes, positions, and animation delays for "randomness" */
.b1 { width: 40px; height: 40px; left: 10%; animation-duration: 8s; animation-delay: 0s; }
.b2 { width: 80px; height: 80px; left: 30%; animation-duration: 14s; animation-delay: 2s; }
.b3 { width: 50px; height: 50px; left: 65%; animation-duration: 10s; animation-delay: 4s; }
.b4 { width: 90px; height: 90px; left: 85%; animation-duration: 18s; animation-delay: 1s; }

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% {
    transform: translateY(-500px) scale(0.5) rotate(360deg);
    opacity: 0;
  }
}

.theme--dark.v-text-field--filled > .v-input__control > .v-input__slot,
.theme--light.v-text-field--filled > .v-input__control > .v-input__slot {
    background: #fff !important;
}


.skewedDiv {
    clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100% );
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    margin-top: -30px;
    margin-bottom: -30px;
}

.skewedDivTopOnly {
    clip-path: polygon(
        0 60px,
        100% 0,
        100% 100%,
        0 100%
    );
    padding-top: 60px !important;
    padding-bottom: 0 !important;
}

/* Flat top edge, slanted bottom edge (pulls up 60px on the right, flat on bottom-left) */
.skewedDivBottomOnly {
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 60px),
        0 100%
    );
    padding-top: 0 !important;
    padding-bottom: 60px !important;
}

.skewedName {
/*    position: absolute;
    bottom: 30px;
    z-index: 8;
    transform: rotate(-10deg);
    transform-origin: 0 0;
    word-break: break-all;
    text-shadow: 3px 2px 1px rgba(0, 0, 0, 0.9);
    right: 20px;*/
    word-break: break-all;
    text-shadow: 3px 2px 1px rgb(0 0 0 / .9);
    background: rgba(0,0,0,0.5);
    padding: 0.25em;
    text-align: center;
}

.bio-profile {
  background: #1A1A2E;
}

.bio-profile::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(ellipse at 25% 35%, rgba(233, 30, 140, 0.30), transparent 45%),
    radial-gradient(ellipse at 75% 65%, rgba(163, 21, 98, 0.35), transparent 45%),
    radial-gradient(ellipse at 70% 15%, rgba(255, 209, 102, 0.09), transparent 35%),
    radial-gradient(ellipse at 20% 85%, rgba(169, 113, 75, 0.12), transparent 40%);

  animation: ambientDrift 30s ease-in-out infinite alternate;
}

@keyframes ambientDrift {
  0% {
    transform: translate(-3%, -2%) scale(1);
  }
  50% {
    transform: translate(2%, 2%) scale(1.05);
  }
  100% {
    transform: translate(3%, -2%) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bio-profile::before {
    animation: none;
  }
}


@media (min-width: 1264px) { .col-lg-fifth { flex: 0 0 20%; max-width: 20%; } }

/* Podium photos with a translucent, slightly rotated "price sticker" */
.stl-pod { position: relative; display: block; overflow: hidden; background: #fff; text-decoration: none; }
.stl-pod img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  background: transparent;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.stl-tag { position: absolute; left: 6%; bottom: 7%; max-width: 86%; display: flex; flex-direction: column;
         padding: 0.35em 0.75em 0.45em; line-height: 1.15; color: #fff; border-radius: 4px;
         background: rgba(20, 20, 20, .68); backdrop-filter: blur(2px);
         box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transform: rotate(-4deg); transform-origin: left bottom; }
.stl-tag::before { content: ''; position: absolute; top: 0.5em; right: 0.5em; width: 0.4em; height: 0.4em;
                 border-radius: 50%; background: rgba(255, 255, 255, .75); }
.stl-tag .rank  { font-size: 1.4em; font-weight: 900; }
.stl-tag .name  { font-size: 0.85em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 0.6em; }
.stl-tag .count { font-size: 0.75em; opacity: .9; }
.stl-pod.p1 .stl-tag { background: rgba(233, 30, 140, .85); transform: rotate(-6deg); }
.stl-pod.p1 .stl-tag .rank { font-size: 1.9em; }
.stl-pod.p3 .stl-tag { transform: rotate(3deg); transform-origin: right bottom; }
.stl-pod:hover .stl-tag { transform: rotate(0deg); transition: transform .2s ease; }

@media (max-width: 599px) {
.stl-tag { font-size: 0.7em; left: 4%; bottom: 5%; max-width: 92%; }
}

.meet-banner {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 25px 0;
  padding: 22px 25px;
  border: 1px solid #ddd;
  background: #fff;
  color: var(--tertiary);
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.meet-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .35), transparent );
  transform: skewX(-20deg);
  transition: left .6s ease;
}

.meet-banner:hover {
  transform: translateY(-2px);
  border-color: rgba(180, 160, 255, .5);
  box-shadow: 0 7px 22px rgba(0, 0, 0, .3);
}

.meet-banner:hover::before {
  left: 140%;
}

.meet-banner__eyebrow,
.meet-banner__title,
.meet-banner__cta {
  position: relative;
  display: block;
}

.meet-banner__eyebrow {
  color: var(--tertiary);
  font-size: 0.65em;
  font-weight: 800;
  letter-spacing: 2px;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.meet-banner__title {
  color: var(--tertiary);
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-display);
  border-top: 1px dashed var(--tertiary);
  border-bottom: 1px dashed var(--tertiary);
  display: flex;
  justify-content: center;
  align-items: center;
}

.meet-banner__title::before {
    display: inline-block;
    width: 200px;
    height: 120px;
    content: ' ';
    background: url(../assets/date-bg.png) no-repeat;
    background-size: contain;
    background-position: bottom left;
}

.meet-banner__cta {
  margin-top: 1em;
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  background: var(--primary);
  border-radius: 5px;
  padding: 0.5em;
  text-transform: uppercase;
  letter-spacing: 3px;
}

@media (max-width: 600px) {
  .meet-banner {
    padding: 18px 15px;
  }
}

@media (max-width: 600px) {
  .meet-banner {
    padding: 18px 15px;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1500px) {
    .footer-links {
        columns: 1;
    }
}

@media (max-width: 1264px) {
    .footer-grid {
        display: block !important;
    }
    .footer-col {
        display: block !important;
        margin-bottom: 1em !important;
        border-bottom: 1px dotted #fff !important;
        padding-bottom: 1em !important;
    }
}

@media (max-width: 998px) {
    .stl-tag {
        position: static;
        transform: none !important;
        max-width: unset;
        border-radius: 0;
        margin: 0;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    a.nav-link {
        color: var(--tertiary) !important;
    }

    .actress-profile-card { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .actress-avatar { width: 160px; height: 240px; }
    .actress-name   { font-size: 1.75rem; }

    .actresses-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .films-grid     { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .gallery-grid   { grid-template-columns: repeat(3, 1fr); }

    .footer-grid {
        display: block;
    }

    .footer-col {
        margin-bottom: 2em;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 1.5em;
    }

    .actress-card .v-avatar {
      width: 100% !important;
      height: 250px !important;
    }
    .actress-card a {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 480px) {
    .gallery-grid   { grid-template-columns: repeat(2, 1fr); }
    .actresses-grid { grid-template-columns: repeat(2, 1fr); }
}