*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Geist", sans-serif;
}

html {
    scroll-behavior: smooth;
    color: var(--bg-accent-color);
}

html,body {
    width: 100%
}

/* 1. Make main a flex column so section can fill remaining space */

main{
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background-color: var(--bg-primary-color);
    overflow: hidden;
    display: flex;           
    flex-direction: column;  

}

/* 2. Section fills all remaining height */

main section{
    width: 100%;
    flex: 1;                 /* — fills main */
    min-height: 0;           /* critical, lets flex children shrink */
    padding: var(--padding-md);
    display: flex;
    gap: var(--gutter-lg);
    overflow: hidden;        
}



.btn{
    background:        linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    color:             var(--text-primary-color);
    border:            1px solid var(--border-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-sm) var(--padding-md);
    display:           flex;
    align-items:       center;
    gap:               var(--gutter-md);
    font-size:         var(--font-size-sm);
    font-weight:       var(--font-weight-sm);
    letter-spacing:    -0.01em;
    cursor:            pointer;
    backdrop-filter:   blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 4px 24px var(--shadow-drop);
    transition:        all var( --transition-md);
}

.btn:hover {
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color:      var(--border-secondary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 6px 32px var(--shadow-drop-hover);
  }

.btn i{
    font-size: var(--font-size-xl);
}


.btn-primary{
    background:        linear-gradient(180deg, var(--thickglass-bg-from)  0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);


    border:            1px solid var(--border-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-sm) var(--padding-md);
    display:           flex;
    align-items:       center;
    gap:               var(--gutter-md);
    font-size:         var(--font-size-sm);
    font-weight:       var(--font-weight-sm);
    cursor:            pointer;
    backdrop-filter:   blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
      /* keep your existing background, border, etc */
      transition: filter var(--transition-sm),
              box-shadow var(--transition-sm),
              transform var(--transition-sm),
              border-color var(--transition-sm);
         will-change: transform;
    
}

.btn-primary:hover{

    filter: brightness(1.2);
    box-shadow:
    inset 0 1px 0 var(--shadow-inset-top),
    inset 0 -1px 0 var(--shadow-inset-bottom),
    0 6px 32px var(--shadow-drop-hover);

}

.btn-sec{

    background:       var(--bg-primary-color);
    color:             var(--text-accent-color);
    border:            1px solid var(--bg-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-sm) var(--padding-md);
    display:           flex;
    align-items:       center;
    gap:               var(--gutter-md);
    font-size:         var(--font-size-sm);
    font-weight:       var(--font-weight-sm);
    letter-spacing:    -0.01em;
    cursor:            pointer;

    transition:        all var( --transition-sm);

}

.btn-sec:hover {
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border:            1px solid var(--border-secondary-color);
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
  }



/* 3. Left column fills height and clips */

main section .left{
    display: flex;
    flex-direction: column;
    gap: var(--gutter-2xl);
  
    width: 100%;
    min-height: 0;           
    overflow: hidden;  
}
/* 5. Right panel scrolls internally if filters overflow */
main section .right{
    width: 340px;
    background-color: var(--bg-tertiary-color);
    padding: var(--padding-lg);
    border-radius: var(--border-radius-xl);
    /* border:            1px solid var(--border-primary-color); */
    /* background:        linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%); */
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    min-height: 0;           
    overflow-y: auto; 
    flex-shrink: 0;
    }


/* scroll container */
.right {
    overflow-y: auto;
    scrollbar-color: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 100%);

}

/* width */
.right::-webkit-scrollbar {
    width: 4px;
}

/* track */
.right::-webkit-scrollbar-track {
    background: transparent;
    margin: 20px 0;
}

/* thumb */
.right::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 100%);


    border-radius: 999px;
    
}


main section .top{
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
}

/* 4. Bottom fills remaining left height — remove aspect-ratio */
main section .bottom{
    background-color: var(--bg-tertiary-color);
    width: 100%;
    padding: var(--padding-md);
    flex: 1;                 /* REPLACE aspect-ratio: 5/3 with this */
    min-height: 0;  
    border-radius: var(--border-radius-xl);
    /* border:            1px solid var(--border-primary-color); */
    display: flex;
    align-items: center;
    justify-content: center;
    /* background:        linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%); */
    overflow: hidden;        /* ADD — clips canvas if needed */
    transition: background var(--transition-sm),
              border-color var(--transition-sm),
              box-shadow var(--transition-sm),
              outline var(--transition-sm);

    position: relative;  /* add this to existing rule */
}



/* canvas aniamtion */

.bottom.drag-over {

    border-radius:     var(--border-radius-xl);
    outline-offset: -8px;

    background:        linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    border-color:      var(--border-secondary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 6px 32px var(--shadow-drop-hover);
    
  }




main section .bottom .placeholder{
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--gutter-lg);
  
}

main section .bottom .placeholder i {
    font-size: var(--font-size-xl);
    color: var(--text-accent-color);
}

main section .bottom .placeholder p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
}


main section .right h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-sm);
    color: var(--text-primary-color);
}

main section .right .filters{
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    padding-top: var(--padding-sm);
    padding-bottom: var(--padding-md);

}

/* Filters CSS */

main section .right .filters p{

    text-transform: capitalize;
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    min-width: 100px;
}

main section .right .filters span{

    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
    min-width:   40px;        /* 👈 fixed width so all values align */
    text-align:   left;
  padding-left: var(--padding-sm);
  flex-shrink:  0;
}

main section .right .filter{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gutter-lg);
  
    

}

main section .right .filter input{
    width: 100%;
    outline: none;
    appearance: none;
    -webkit-appearance: none;

    background:        linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    border-radius:      4px;
  cursor:             pointer;
  border:             none;
  
}


main section .right .filter input::-webkit-slider-runnable-track{

    height: 3px;
    border-radius:      50%;
}

main section .right .filter input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    cursor: pointer;
    background: var(--text-secondary-color);
    margin-top: -3.5px; /* (thumb height - track height) / 2 = (10 - 4) / 2 */
    box-sizing: border-box;
}

/* 6. Canvas respects container bounds, maintains aspect ratio */

/* stack both canvases on top of each other */


.canvas-wrapper {
    position: relative;
    line-height: 0;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

canvas.image-canvas {
    display: none;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    border-radius: var(--border-radius-lg);
    

}

canvas.effect-canvas {
    position: absolute;
    pointer-events: none;
    display: none;
    border-radius: var(--border-radius-lg);
    
}



/* effects starts here*/

main section .right .effects {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    padding-top: var(--padding-lg);
    border-top: 1px solid var(--border-primary-color);
}

main section .right .effects h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-sm);
    color: var(--text-primary-color);
}

main section .right .effect-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gutter-md);
    
}

main section .right .effect-row p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    min-width: 100px;
    text-transform: capitalize;
}

main section .right .effect-row select {
    width: 100%;
    background: linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    color: var(--text-primary-color);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-sm);
    padding: var(--padding-xsm) var(--padding-sm);
    font-size: var(--font-size-xsm);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;

    
}

.effect-slider-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--gutter-lg);
}

.effect-slider-row input {
    width: 100%;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    border-radius: 4px;
    cursor: pointer;
    border: none;
}

.effect-slider-row input::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 50%;
}

.effect-slider-row input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    cursor: pointer;
    background: var(--text-secondary-color);
    margin-top: -3.5px; /* (thumb height - track height) / 2 = (10 - 4) / 2 */
    box-sizing: border-box;
}

.effect-slider-row span {
    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
    min-width: 40px;
    text-align: left;
    padding-left: var(--padding-sm);
    flex-shrink: 0;
}

/* ↓ NEW — wrapper to position icon relative to select */
.select-wrapper { 
    position: relative;
    width: 100%;
}

/* ↓ NEW — icon positioned inside the select on the right */
.select-wrapper i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: white;
    font-size: 14px;
}

.presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: var(--padding-xsm);
    
}

.presets button {
    background: linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    border:  1px solid var(--border-primary-color);
    transition: all var( --transition-sm);
    color: var(--text-secondary-color);
    border-radius: var(--border-radius-sm);
    padding: var(--padding-xsm) var(--padding-sm);
    font-size: var(--font-size-xsm);
    line-height: 100%;
    cursor: pointer;
}

.presets button:hover {
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color:      var(--border-secondary-color);
    color: var(--text-primary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom);
}

nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-md) var(--padding-md) 0 var(--padding-md);
 
    flex-shrink: 0;  /* won't shrink when section fills remaining space */
}

nav .nav-right  i{
    font-size: var(--font-size-md);
}

nav .nav-centre  i{
    font-size: var(--font-size-md);
    
}

.nav-left {
    display: flex;
    align-items: center;
    min-width: 160px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    cursor: default;
    user-select: none;
}

.logo-mark {
    font-size: 20px;
    color: var(--text-primary-color);
}

.logo-name {
    font-size: var(--font-size-xl);
    font-weight: 400;
    color: var(--text-primary-color);
    letter-spacing: -0.03em;
    line-height: 100%;
}

.nav-centre {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    min-width: 160px;
    justify-content: flex-end;
}

 /* Backgrounds Drawer starts here */

 /* overlay */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* drawer */


.drawer {
    position: fixed;
    bottom: var(--padding-md); /* spacing from bottom */
    left: var(--padding-md);
    right: var(--padding-md);
    z-index: 100;
    background: linear-gradient(180deg, var(--glass-drawer-from) -40%, var(--glass-drawer-to) 50%);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    padding: var(--padding-xl) var(--padding-xl) 0 var(--padding-xl) ;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xl);
    height: 60vh;
    transform: translateY(calc(100% + 32px));
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
  
}

.drawer.open {
    transform: translateY(0);
   
}

/* drag handle */
.drawer::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-primary-color);
}

/* header */
.drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 2px;
}

.drawer-title h2 {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-primary-color);
    letter-spacing: -0.02em;
}

.drawer-title p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    margin-top: 4px;
}

.drawer-close {
    background:       var(--bg-sexondary-color);
    border: 1px solid var(--border-primary-color);
    border-radius: 50%;
    padding:           var(--padding-sm) var(--padding-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary-color);
    transition: all var(--transition-sm);
    flex-shrink: 0;
}



.drawer-close:hover {

    color: var(--text-primary-color);

    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border:            1px solid var(--border-secondary-color);
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
}

.drawer-close i {
    font-size: 14px;
}

/* category tabs */
.drawer-categories {
    display: flex;
    gap: var(--gutter-md);
    flex-wrap: wrap;

}

.category-tab {
    background:        linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 60%);
    color:             var(--text-secondary-color);
    border:            1px solid var(--border-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-sm) var(--padding-md);
    display:           flex;
    align-items:       center;
    gap:               var(--gutter-md);
    font-size:         var(--font-size-sm);
    font-weight:       var(--font-weight-sm);
    letter-spacing:    -0.01em;
    cursor:            pointer;
    backdrop-filter:   blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
    transition:        all var( --transition-sm);
    letter-spacing: -0.01em;

  
    
}

.category-tab:hover {
    color: var(--text-primary-color);
    border-color: var(--border-secondary-color);
    
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color:      var(--border-secondary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 1px 4px var(--shadow-drop-hover);
}

.category-tab.active {
    background:        linear-gradient(180deg, var(--thickglass-bg-from)  0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border-color: var(--text-primary-color);
}

/* panels */
.drawer-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;
    position: relative;
    overflow: visible;
}

.bg-panel {
    display: none;
    height: 100%;
    overflow: visible; 
    overflow-y: auto;
    overflow-x: visible;

    padding-bottom: 32px;

    /* hide ugly scrollbar */
    scrollbar-width: none;
    
}


.bg-panel::-webkit-scrollbar {
    display: none;
}


.bg-panel.active {
    display: block;
}

/* grid */
.bg-grid {
    display: grid;
    
       /* auto scale to fit width */
       grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gutter-lg);
    padding-bottom: var(--padding-md);
    width: 100%;
    align-items: start;
    
    padding-top: 4px; /* important */
    padding-bottom: 40px; /* prevents bottom cut */
}

/* coming soon */
.bg-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-md);
    height: 140px;
    color: var(--text-secondary-color);
    grid-column: 1 / -1;
}

.bg-coming-soon i {
    font-size: var(--font-size-3xl);
    opacity: 0.4;
}

.bg-coming-soon p {
    font-size: var(--font-size-md);
    opacity: 0.4;
}

.bg-thumb {
        position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: pointer;

    aspect-ratio: 4 / 5;
    width: 100%;

    background: rgba(255,255,255,0.04);
   

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.bg-thumb:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    
    z-index: 2;
}

.bg-thumb.selected {
    border-color: var(--border-secondary-color);
}

.bg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* shuffle animation */

.btn-dots span.d-full { opacity: 1; }
.btn-dots span.d-dim  { opacity: 0.1; }

.btn-dots {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 1px;
}

.btn-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
    transition: opacity 0.2s;
}


/* brand menu sidebar ---------------------------------*/

.nav-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.brand-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.brand-trigger:hover .nav-dots span.d-full {
    animation: cornerPulse 0.3s ease-in-out infinite alternate;
}

.brand-trigger:hover .nav-dots span:nth-child(1) { animation-delay: 0s; }
.brand-trigger:hover .nav-dots span:nth-child(3) { animation-delay: 0.15s; }
.brand-trigger:hover .nav-dots span:nth-child(7) { animation-delay: 0.15s; }
.brand-trigger:hover .nav-dots span:nth-child(9) { animation-delay: 0s; }


@keyframes cornerPulse {
    0%   { opacity: 1; }
    100% { opacity: 0.1; }
}

.ditther-wordmark {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-xl);
    color: white;
    letter-spacing: -0.02em;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.ditther-wordmark:hover {
    opacity: 1;
}

.about-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s;
}

.nav-dots {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 1px;
}

.nav-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--bg-accent-color);
    opacity: 1;
    transition: opacity 0.2s;
}

.nav-dots span.d-full { opacity: 1; }
.nav-dots span.d-dim  { opacity: 0.1; }

/* About overlay */
.about-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.about-overlay.open {
    opacity: 1;
    pointer-events: all;
}


/* About drawer----------------------------- */
.about-drawer {
    position: fixed;
    top: var(--padding-md);
    bottom: var(--padding-md);
    left: var(--padding-md);
    width: 460px;
    z-index: 100;
    background: linear-gradient(180deg, var(--glass-drawer-from) -20%, var(--glass-drawer-to) 50%);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    padding: var(--padding-xl) var(--padding-xl) 0 var(--padding-xl) ;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xl);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    transform: translateX(calc(-100% - 32px));
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    justify-content: space-between;  /* pushes footer to bottom */
}


.about-drawer.open {
    transform: translateX(0);
}

.about {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}


.about-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.about-logo svg{
    height: 20px;
    width: auto;
}


.about-close {
   
    background:       var(--bg-sexondary-color);
    border: 1px solid var(--border-primary-color);
    border-radius: 50%;
    padding:           var(--padding-sm) var(--padding-sm);


    color: var(--text-secondary-color);
 
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-sm);
}

.about-close:hover {
    color: var(--text-primary-color);

    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border:            1px solid var(--border-secondary-color);
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
}

.about-title {
    font-size: 22px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.about-beta {
   
    background: linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    color: var(--text-brand-color);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-sm);
    padding: var(--padding-xsm) var(--padding-xsm);
    font-size: var(--font-size-xsm);
    font-weight: var(--font-weight-sm);
    letter-spacing: 0.05em;
    line-height: 0.9;
}


.about-made-by {
    font-size: var(--font-size-md);
    color: var(--text-secondary-color);
    margin: 0;
    padding: 8px 0;
}


.about-aashish {
    font-size: var(--font-size-md);
    color: var(--text-accent-color);
    
}

.about-desc {
    font-size: var(--font-size-sm);
    line-height: 1.3;
    font-weight: var(--font-weight-sm);
    color: var(--text-secondary-color);
    margin: 0;
    padding-bottom: var(--padding-xl);
    border-bottom: 1px solid var(--border-primary-color);
}

.about-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
   
    gap: 12px;
    text-decoration: none;
    padding-bottom: var(--padding-xl);
}

.about-btn {
    display: flex;
    align-items: center; 
    gap: 8px;

}
/* --------instructions manual---------- */

.about-guide {
    display: flex;
    flex-direction: column;
    gap: 16px;

    background: var(--bg-sexondary-color);
    color: var(--text-brand-color);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-lg);
    padding: var(--padding-lg);
}

.about-guide-title {
    font-size: var(--font-size-xxsm);
    font-weight: var(--font-weight-sm);
    color: var(--text-tertiary-color);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: var(--padding-xsm);
}

.about-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.guide-dots {
    display: grid;
    grid-template-columns: repeat(3, 3px);
    grid-template-rows: repeat(3, 3px);
    gap: 2px;
    flex-shrink: 0;
    margin-top: 2px;
}

.guide-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: white;
}

.guide-dots span.d-full { opacity: 1; }
.guide-dots span.d-dim  { opacity: 0.1; }

.guide-step-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-sm);
    color: var(--text-accent-color);
    margin: 0 0 2px 0;
}

.guide-step-desc {
    font-size: 12px;
    color: var(--text-tertiary-color);
    line-height: 1.6;
    margin: 0;
}

a.btn {
    text-decoration: none;
}


/* //footer---------// */

.about-footer {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xl);
    margin-top: auto;  /* sticks to bottom */
    padding: var(--padding-xl) 0;
   
}



.about-upcoming {
    font-size: 12px;
    color: var(--text-secondary-color);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 4px;

    
}

.upcoming-label {
    color: var(--text-primary-color);
    font-weight: var(--font-weight-sm);
    font-size: var(--font-size-sm);
    margin-right: 6px;
}

.about-version {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    padding-top: var(--padding-lg);
    border-top: 1px solid var(--border-primary-color);
    
}




/* //----------------------floating menu---------------------// */

.floating-bar {
    display: none; /* hidden on desktop */
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    align-items: center;
    background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-2xl);
    backdrop-filter: blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 8px;
    gap: var(--gutter-md);
}

.floating-bar .btn-sec {
    border-radius: var(--border-radius-2xl);
    border: none;
    background: none;
    padding: var(--padding-sm) var(--padding-md);
}


.floating-divider {
    width: 1px;
    height: 20px;
    background: var(--border-primary-color);
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   DOT ANIMATION SYSTEM
══════════════════════════════════════════════════════════════ */

/* ─── Shuffle animation ─── */
#inspire-btn.shuffling .btn-dots span,
#inspire-btn-mobile.shuffling .btn-dots span {
    animation: dotShuffle 0.4s ease-in-out infinite;
}

#inspire-btn.shuffling .btn-dots span:nth-child(1),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(1) { animation-delay: 0ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(2),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(2) { animation-delay: 100ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(3),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(3) { animation-delay: 200ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(4),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(4) { animation-delay: 300ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(5),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(5) { animation-delay: 400ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(6),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(6) { animation-delay: 300ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(7),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(7) { animation-delay: 200ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(8),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(8) { animation-delay: 100ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(9),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(9) { animation-delay: 0ms; }

@keyframes dotShuffle {
    0%, 100% { opacity: 0.15; transform: scale(0.6); }
    50%       { opacity: 1;    transform: scale(1.1); }
}


/* ─── Remix animation ─── */
#remix-btn.remixing .btn-dots span,
#remix-btn-mobile.remixing .btn-dots span {
    animation: dotRemix 500ms ease-in-out infinite;
}

/* ─── Remix — flower bloom: center → edges → corners ─── */
#remix-btn.remixing .btn-dots span:nth-child(5),
#remix-btn-mobile.remixing .btn-dots span:nth-child(5) { animation-delay: 0ms; }

#remix-btn.remixing .btn-dots span:nth-child(2),
#remix-btn-mobile.remixing .btn-dots span:nth-child(2),
#remix-btn.remixing .btn-dots span:nth-child(4),
#remix-btn-mobile.remixing .btn-dots span:nth-child(4),
#remix-btn.remixing .btn-dots span:nth-child(6),
#remix-btn-mobile.remixing .btn-dots span:nth-child(6),
#remix-btn.remixing .btn-dots span:nth-child(8),
#remix-btn-mobile.remixing .btn-dots span:nth-child(8) { animation-delay: 100ms; }

#remix-btn.remixing .btn-dots span:nth-child(1),
#remix-btn-mobile.remixing .btn-dots span:nth-child(1),
#remix-btn.remixing .btn-dots span:nth-child(3),
#remix-btn-mobile.remixing .btn-dots span:nth-child(3),
#remix-btn.remixing .btn-dots span:nth-child(7),
#remix-btn-mobile.remixing .btn-dots span:nth-child(7),
#remix-btn.remixing .btn-dots span:nth-child(9),
#remix-btn-mobile.remixing .btn-dots span:nth-child(9) { animation-delay: 200ms; }



@keyframes dotRemix {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%      { opacity: 0.2; transform: scale(0.5); }
}


/* ──------------------─ Tip toast ──---------------------─ */

.tip-toast {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 122;
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    background: linear-gradient(180deg, var(--glass-drawer-from) -40%, var(--glass-drawer-to) 60%);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 var(--shadow-inset-top);
    padding: var(--padding-md) var(--padding-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-sm);
    color: var(--text-secondary-color);
    white-space: nowrap;
    letter-spacing: -0.01em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;

}

.tip-toast.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.tip-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
}

.tip-close {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    margin-left: var(--gutter-sm);
    opacity: 0.6;
    transition: opacity var(--transition-sm);
}

.tip-close:hover {
    opacity: 1;
}

.tip-close i {
    font-size: var(--font-size-sm)
}


/* ─── Toast dot animation — soft breathe ─── */
.toast-dots span {
    animation: toastDotPulse 1s ease-in-out infinite;
}

.toast-dots span:nth-child(1),
.toast-dots span:nth-child(3),
.toast-dots span:nth-child(7),
.toast-dots span:nth-child(9) { animation-delay: 0ms; }

.toast-dots span:nth-child(2),
.toast-dots span:nth-child(4),
.toast-dots span:nth-child(6),
.toast-dots span:nth-child(8) { animation-delay: 300ms; }

.toast-dots span:nth-child(5) { animation-delay: 600ms; }

@keyframes toastDotPulse {
    0%, 100% { opacity: 0.1;  transform: scale(0.5); }
    50%       { opacity: 1;    transform: scale(1.1); }
}


/* // ─── Disable transitions during window resize to prevent drawer glitch ─── */

.resize-transition-stopper * {
    transition: none !important;
}


/* //----------------------Tablet and mobile responsiveness---------------------// */


@media (max-width: 1024px) {

    main {
        height: auto;
        max-height: none;
        overflow-y: auto;
    }

    main section {
        flex-direction: column;
        overflow: visible;
        padding: var(--padding-sm);
        gap: var(--gutter-sm);
    }

    main section .left {
        width: 100%;
        min-height: 320px;
    }

    main section .bottom {
        min-height: 200px;
        max-height: none;
        height: auto;
        aspect-ratio: unset;
    }

    canvas.image-canvas {
        max-height: 65vh;
    }
    
    main section .right {
        width: 100%;
        flex-shrink: unset;
        overflow-y: visible;
        padding-bottom: 60px;
    }

    main section .right .effects {
        border-bottom: none;
        border-top: 1px solid var(--border-primary-color);
        padding-bottom: var(--padding-lg);
    }



nav {
    flex-wrap: wrap;
    gap: var(--gutter-md);
    padding: var(--padding-sm);
}

nav .btn {
    padding: 6px 10px;
    font-size: 12px;
}

nav .btn i {
    font-size: 14px;
}


nav .btn-primary {
    padding: 6px 10px;
    font-size: 12px;
}

nav .btn-primary i {
    font-size: 14px;
}


main section .bottom .placeholder .btn {
    padding: 6px 10px;
    font-size: 12px;
}

main section .bottom .placeholder .btn i {
    font-size: 14px;
}


.nav-left {
    order: 1;
    flex-shrink: 0;
    min-width: unset;
}

.nav-right {
    order: 2;
    flex-shrink: 0;
    min-width: unset;
}

.nav-centre {
    order: 4;
    width: 100%;
    justify-content: center;
    padding: var(--padding-sm) 0;
    border-top: 1px solid var(--border-primary-color);
    margin-top: 4px;
    display: none !important;
}

.floating-bar {
    display: flex !important;
}


.tip-toast {
    display: none !important;
}


/* shuffling animation */
#inspire-btn-mobile.shuffling .btn-dots span {
    animation: dotShuffle 0.4s ease-in-out infinite;
}

#inspire-btn-mobile.shuffling .btn-dots span:nth-child(1) { animation-delay: 0.0s; }
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(2) { animation-delay: 0.1s; }
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(3) { animation-delay: 0.2s; }
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(4) { animation-delay: 0.3s; }
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(5) { animation-delay: 0.4s; }
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(6) { animation-delay: 0.3s; }
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(7) { animation-delay: 0.2s; }
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(8) { animation-delay: 0.1s; }
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(9) { animation-delay: 0.0s; }

@keyframes dotShuffle {
    0%, 100% { opacity: 0.15; transform: scale(0.6); }
    50%       { opacity: 1;    transform: scale(1.1); }
}


.about-drawer {
    top: unset;
    left: var(--padding-xsm);
    right: var(--padding-xsm);
    bottom: var(--padding-xsm);

    padding: var(--padding-lg) var(--padding-lg) 0 var(--padding-lg);
    width: auto;
    height: auto;
    transform: translateY(calc(100% + 32px));
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    border-radius: var(--border-radius-xl);
    gap: var(--gutter-lg);
}



.about-drawer.open {
    transform: translateY(0);
}


.about-link {
    padding-bottom: 0;
}

.about-footer {
    padding: 0 0 var(--padding-xl) 0;
}

    .drawer {
        height: 75vh;
        padding: var(--padding-lg) var(--padding-lg) 0 var(--padding-lg);
         gap: var(--gutter-xl);
    }
}