/* ================================================================
   login-promo.css - brand surface for the marketing column
   ----------------------------------------------------------------
   The marketing column becomes a solid, clean surface whose right
   edge is a soft curve flowing into the page background, with two
   translucent layered arcs behind it. The client's marketing image
   (all text lives inside the image) sits centred on that surface.

   appsettings.json -> "LoginPromo":
     Image     single image ("~/img/..." or absolute URL)
     Images    optional list; 2+ images crossfade with dot indicators
     ImageFit  "contain" (posters / transparent PNGs, default)
               "cover"   (photos: fill the whole curved surface)
     Interval  seconds per slide (default 6)

   Theming: override the variables below. --promo-surface is the
   only solid colour; the arcs are translucent white, so they work
   on any page background.
   ================================================================ */

:root {
    --promo-surface: #ffffff;
    --promo-surface-tint: rgba(211, 47, 47, 0.07); /* theme tint at the bottom of the surface */
    --promo-accent: #D32F2F;
    --promo-pattern: rgba(211, 47, 47, 0.16);
    --promo-glow: rgba(211, 47, 47, 0.10);
    --promo-arc-1: rgba(255, 255, 255, 0.28);
    --promo-arc-2: rgba(255, 255, 255, 0.12);
    --promo-shadow: rgba(0, 0, 0, 0.18);
    --promo-dot: rgba(0, 0, 0, 0.18);
    --promo-dot-active: var(--promo-accent);
}

/* The column itself only hosts the surface. */
.login-right-panel {
    position: relative;
    overflow: hidden !important;
}

.promo-area {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* -- CURVED SURFACE + ARCS -------------------------------------- */
.promo-surface,
.promo-arc {
    position: absolute;
    inset: 0;
}

/* Ellipses centred on the left edge: the right edge bulges gently
   toward the login card and curves back at the top and bottom. */
.promo-surface {
    clip-path: ellipse(86% 112% at 0% 50%);
    background: linear-gradient(170deg, transparent 55%, var(--promo-surface-tint)), var(--promo-surface);
    overflow: hidden;
}

.promo-arc-1 {
    clip-path: ellipse(90.5% 115% at 0% 50%);
    background: var(--promo-arc-1);
}

.promo-arc-2 {
    clip-path: ellipse(95.5% 119% at 0% 50%);
    background: var(--promo-arc-2);
}

/* ================================================================
   EDGE STYLES (LoginPromo:EdgeStyle)
     layered - two translucent filled arcs behind the curve (default)
     lines   - thin concentric outline rings echoing the curve
     glow    - one luminous line hugging the curve
     wave    - organic S-shaped edge with a translucent echo
     bubbles - circles merging into the edge
   Every shape stays inside the column so its edge never cuts straight.
   ================================================================ */
.promo-arc,
.promo-ring,
.promo-bubble {
    display: none;
}

.promo-edge-layered .promo-arc:not(.promo-arc-3) {
    display: block;
}

/* Outline ellipse centred on the column's left edge.
   --rx is a % of the column width, --ry a % of its height. */
.promo-ring {
    position: absolute;
    left: calc(var(--rx) * -1);
    width: calc(var(--rx) * 2);
    top: calc(50% - var(--ry));
    height: calc(var(--ry) * 2);
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
}

/* -- lines -- */
.promo-edge-lines .promo-ring:not(.promo-ring-inner) {
    display: block;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.promo-edge-lines .promo-ring-1 { --rx: 89%; --ry: 114%; }
.promo-edge-lines .promo-ring-2 { --rx: 92.5%; --ry: 117%; border-color: rgba(255, 255, 255, 0.35); }
.promo-edge-lines .promo-ring-3 { --rx: 96.5%; --ry: 120%; border-color: rgba(255, 255, 255, 0.18); border-style: dashed; }

/* -- glow -- */
.promo-edge-glow .promo-ring-1 {
    display: block;
    --rx: 88.5%;
    --ry: 113.5%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.75), 0 0 46px rgba(255, 255, 255, 0.35);
    -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 30%, #000 70%, transparent 96%);
    mask-image: linear-gradient(to bottom, transparent 4%, #000 30%, #000 70%, transparent 96%);
}

.promo-edge-glow .promo-ring-2 {
    display: block;
    --rx: 93%;
    --ry: 118%;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* -- wave -- */
.promo-edge-wave .promo-surface,
.promo-edge-wave .promo-arc-1 {
    clip-path: none;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.promo-edge-wave .promo-surface {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H74C90 18 70 38 80 56S92 86 76 100H0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H74C90 18 70 38 80 56S92 86 76 100H0Z'/%3E%3C/svg%3E");
}

.promo-edge-wave .promo-arc-1 {
    display: block;
    background: rgba(255, 255, 255, 0.25);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H82C96 20 78 40 87 58S98 86 84 100H0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H82C96 20 78 40 87 58S98 86 84 100H0Z'/%3E%3C/svg%3E");
}

/* -- bubbles -- */
.promo-bubble {
    position: absolute;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    pointer-events: none;
}

.promo-edge-bubbles .promo-bubble {
    display: block;
}

/* Same colour as the surface, so it reads as a bulge of the surface */
.promo-edge-bubbles .promo-bubble-1 {
    width: 17%;
    top: 9%;
    left: 70%;
    background: var(--promo-surface);
}

.promo-edge-bubbles .promo-bubble-2 {
    width: 11%;
    top: 66%;
    left: 79%;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.promo-edge-bubbles .promo-bubble-3 {
    width: 5%;
    top: 85%;
    left: 74%;
    background: rgba(255, 255, 255, 0.45);
}

.promo-edge-bubbles .promo-arc-1 {
    display: block;
    background: rgba(255, 255, 255, 0.16);
}

/* -- shadow: the surface lifts off the page with a soft cast shadow -- */
.promo-edge-shadow {
    filter: drop-shadow(22px 0 30px rgba(0, 0, 0, 0.45)) drop-shadow(6px 0 8px rgba(0, 0, 0, 0.25));
}

.promo-edge-shadow .promo-ring-1 {
    display: block;
    --rx: 86.6%;
    --ry: 112.6%;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

/* -- offset: a solid band floating just off the curve -- */
.promo-edge-offset .promo-ring-1 {
    display: block;
    --rx: 90%;
    --ry: 115.5%;
    border: 10px solid var(--promo-surface);
    opacity: 0.9;
}

.promo-edge-offset .promo-ring-2 {
    display: block;
    --rx: 94%;
    --ry: 118.5%;
    border: 2px solid rgba(255, 255, 255, 0.45);
}

/* -- band: a wide soft light fading out from the curve -- */
.promo-edge-band .promo-arc-1 {
    display: block;
    clip-path: ellipse(99% 122% at 0% 50%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 78%, rgba(255, 255, 255, 0) 99%);
}

/* -- dots: dotted orbits tracing the curve -- */
.promo-edge-dots .promo-ring-1,
.promo-edge-dots .promo-ring-2 {
    display: block;
}

.promo-edge-dots .promo-ring-1 {
    --rx: 89.5%;
    --ry: 114.5%;
    border: 5px dotted rgba(255, 255, 255, 0.85);
}

.promo-edge-dots .promo-ring-2 {
    --rx: 94%;
    --ry: 118.5%;
    border: 3px dotted rgba(255, 255, 255, 0.4);
}

/* -- rim: brand-coloured line just inside the white edge -- */
.promo-ring-inner {
    display: none;
}

.promo-edge-rim .promo-arc-1 {
    display: block;
}

.promo-edge-rim .promo-ring-inner {
    display: block;
    --rx: 83.5%;
    --ry: 109.5%;
    border: 3px solid var(--promo-accent);
    opacity: 0.85;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 28%, #000 72%, transparent 94%);
    mask-image: linear-gradient(to bottom, transparent 6%, #000 28%, #000 72%, transparent 94%);
}

/* Dot pattern in the top-left corner */
.promo-surface::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 46%;
    height: 40%;
    background-image: radial-gradient(var(--promo-pattern) 1.6px, transparent 1.8px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #000 25%, transparent 70%);
    mask-image: radial-gradient(ellipse at 0% 0%, #000 25%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Soft accent glow behind the image */
.promo-surface::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 26%;
    top: 18%;
    bottom: 18%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--promo-glow), transparent);
    pointer-events: none;
    z-index: 0;
}

/* -- SLIDES ----------------------------------------------------- */
/* Content area stays clear of the curved right edge. */
.promo-slide {
    position: absolute;
    top: 7%;
    bottom: 7%;
    left: 6%;
    right: 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.9s ease;
    z-index: 1;
}

.promo-slide.is-active {
    opacity: 1;
}

.promo-media {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 26px var(--promo-shadow));
}

/* Photo mode: the photo fills the whole curved surface. */
.promo-fit-cover .promo-surface::before,
.promo-fit-cover .promo-surface::after {
    display: none;
}

.promo-fit-cover .promo-slide {
    inset: 0;
}

.promo-fit-cover .promo-media {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    filter: none;
}

.promo-fit-cover .promo-slide.is-active .promo-media {
    animation: promoZoom 20s ease-out both;
}

/* -- DOTS ------------------------------------------------------- */
.promo-dots {
    position: absolute;
    left: 6%;
    right: 22%;
    bottom: 3.5%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}

.promo-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--promo-dot);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.promo-dot.is-active {
    width: 26px;
    background: var(--promo-dot-active);
}

.promo-fit-cover .promo-dot {
    background: rgba(255, 255, 255, 0.55);
}

.promo-fit-cover .promo-dot.is-active {
    background: #ffffff;
}

@keyframes promoZoom {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .promo-slide { transition: none; }
    .promo-media { animation: none !important; }
}

/* -- blend: the layered arcs melted into each other and into the page.
      Same layers as "layered", but every edge is feathered with a soft
      gradient mask, so the white flows into the background colour
      instead of stepping in hard bands. -- */
.promo-edge-blend .promo-arc {
    display: block;
    clip-path: none;
}

.promo-edge-blend .promo-surface {
    clip-path: none;
    -webkit-mask-image: radial-gradient(86.5% 112.5% at 0% 50%, #000 98.6%, transparent 100%);
    mask-image: radial-gradient(86.5% 112.5% at 0% 50%, #000 98.6%, transparent 100%);
}

.promo-edge-blend .promo-arc-1 {
    background: rgba(255, 255, 255, 0.42);
    -webkit-mask-image: radial-gradient(91% 115.5% at 0% 50%, #000 96.5%, transparent 100%);
    mask-image: radial-gradient(91% 115.5% at 0% 50%, #000 96.5%, transparent 100%);
}

.promo-edge-blend .promo-arc-2 {
    background: rgba(255, 255, 255, 0.24);
    -webkit-mask-image: radial-gradient(95.5% 119% at 0% 50%, #000 95%, transparent 100%);
    mask-image: radial-gradient(95.5% 119% at 0% 50%, #000 95%, transparent 100%);
}

.promo-edge-blend .promo-arc-3 {
    background: rgba(255, 255, 255, 0.12);
    -webkit-mask-image: radial-gradient(99.5% 122.5% at 0% 50%, #000 92%, transparent 100%);
    mask-image: radial-gradient(99.5% 122.5% at 0% 50%, #000 92%, transparent 100%);
}