/* ==========================================================================
           ۲. تعریف متغیرهای ریشه (CSS Custom Properties / Variables)
           - مقادیر پیش‌فرض برای رنگ‌ها، ابعاد، زوایا، شدت نور و عمق سه‌بعدی
           ========================================================================== */
:root {
   /* رنگ‌های نور نئون، سایه سه‌بعدی و کادر */
   --neon-glow-color: #00e5ff;
   --neon-shadow-color: #004466;
   --neon-border-color: #00e5ff;
   --text-fill-col: #ffffff;
   --neon-stroke-color: #00e5ff;
   --border-bg: transparent;

   /* پارامترهای ابعادی، تایپوگرافی و ژئومتری متن */
   --font-family-val: 'Segoe UI', Tahoma, system-ui, sans-serif;
   --font-size-val: 80px;
   --rotate-val: 0deg;
   --skew-x-val: 0deg;
   --skew-y-val: 0deg;
   --stroke-w-val: 3px;
   --glow-intensity-val: 0.7;
   --glow-spread-val: 40px;
   --shadow-depth-val: 12;
   --shadow-angle-val: 45deg;
   --border-width-val: 5px;
   --word-spacing-val: 8px;
   --text-perspective-x: 0px;
   --text-perspective-y: 0px;
}




/* ==========================================================================
           ۳. استایل کانتینر اصلی و قاب پیرامون (Display Container)
           - نگه‌دارنده المان نئونی با قابلیت تنظیم پس‌زمینه، کادر، برش گوشه‌ها و انیمیشن
           ========================================================================== */
.display-container {
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: 100%;
   box-sizing: border-box;
   position: relative;
   transition: border-radius 0.25s ease, clip-path 0.25s ease, background 0.3s ease;
   outline: none;
   padding: 0;
   /* overflow: hidden; */

   border: var(--border-width-val) solid var(--neon-border-color) !important;
   box-shadow: 0 0 12px var(--neon-border-color), 0 0 25px color-mix(in srgb, var(--neon-border-color) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--neon-border-color) 40%, transparent);
}



.rotateWrapper {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transform: rotate(var(--rotate-val)) skew(var(--skew-x-val), var(--skew-y-val));
   transition: transform 0.2s ease;
   max-width: 100%;
   perspective: 200px;
}


.neonText {
   font-family: var(--font-family-val);
   display: block;
   margin: 0;
   letter-spacing: normal;
   word-spacing: var(--word-spacing-val);
   
   white-space: pre;         
   word-break: normal;
   overflow-wrap: normal;
   hyphens: none;
   
   text-align: center !important;
   max-width: 100%;
   line-height: 1.25;

   paint-order: stroke fill;
   text-rendering: optimizeLegibility;
   font-feature-settings: "liga" 1, "calt" 1;

   -webkit-text-stroke: var(--stroke-w-val) var(--neon-stroke-color);
   color: var(--text-fill-col);
   font-size: var(--font-size-val);
   font-weight: 900;
   text-transform: none;
   transform: rotateX(var(--text-perspective-x)) rotateY(var(--text-perspective-y));
   text-shadow:
      /* لایه‌های ۱ تا ۱۲ برای تولید حجم و عمق اکستروژن سه‌بعدی */
      calc(cos(var(--shadow-angle-val)) * 1 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 1 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 2 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 2 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 3 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 3 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 4 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 4 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 5 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 5 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 6 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 6 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 7 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 7 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 8 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 8 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 9 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 9 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 10 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 10 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 11 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 11 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      calc(cos(var(--shadow-angle-val)) * 12 * var(--shadow-depth-val) * 0.28px) calc(sin(var(--shadow-angle-val)) * 12 * var(--shadow-depth-val) * 0.28px) 0.5px var(--neon-shadow-color),
      /* لایه‌های انتشار نور و هاله نئونی چند لایه */
      0 0 calc(var(--glow-spread-val) * 0.10) color-mix(in srgb, #ffffff calc(var(--glow-intensity-val) * 90%), transparent),
      0 0 calc(var(--glow-spread-val) * 0.22) color-mix(in srgb, var(--neon-glow-color) calc(var(--glow-intensity-val) * 95%), transparent),
      0 0 calc(var(--glow-spread-val) * 0.45) color-mix(in srgb, var(--neon-glow-color) calc(var(--glow-intensity-val) * 75%), transparent),
      0 0 calc(var(--glow-spread-val) * 0.85) color-mix(in srgb, var(--neon-glow-color) calc(var(--glow-intensity-val) * 50%), transparent),
      0 0 calc(var(--glow-spread-val) * 1.4) color-mix(in srgb, var(--neon-glow-color) calc(var(--glow-intensity-val) * 28%), transparent),
      0 0 calc(var(--glow-spread-val) * 2.2) color-mix(in srgb, var(--neon-glow-color) calc(var(--glow-intensity-val) * 12%), transparent);
}




/* ==========================================================================
           ۱۵. کلاس‌های زاویه چرخش متن (Text Rotation Classes)
           ========================================================================== */
.neon-rot-neg-25 {
   --rotate-val: -25deg;
}

.neon-rot-neg-10 {
   --rotate-val: -10deg;
}

.neon-rot-0 {
   --rotate-val: 0deg;
}

.neon-rot-pos-10 {
   --rotate-val: 10deg;
}

.neon-rot-pos-25 {
   --rotate-val: 25deg;
}




/* ==========================================================================
           ۱۶. کلاس‌های اعوجاج و کجی در محور افقی (Skew-X Classes)
           ========================================================================== */
.text-skew-x-neg-30 {
   --skew-x-val: -30deg;
}

.text-skew-x-neg-20 {
   --skew-x-val: -20deg;
}

.text-skew-x-neg-10 {
   --skew-x-val: -10deg;
}

.text-skew-x-0 {
   --skew-x-val: 0deg;
}

.text-skew-x-pos-10 {
   --skew-x-val: 10deg;
}

.text-skew-x-pos-20 {
   --skew-x-val: 20deg;
}

.text-skew-x-pos-30 {
   --skew-x-val: 30deg;
}




/* ==========================================================================
           ۱۷. کلاس‌های اعوجاج و کجی در محور عمودی (Skew-Y Classes)
           ========================================================================== */
.text-skew-y-neg-30 {
   --skew-y-val: -30deg;
}

.text-skew-y-neg-20 {
   --skew-y-val: -20deg;
}

.text-skew-y-neg-10 {
   --skew-y-val: -10deg;
}

.text-skew-y-0 {
   --skew-y-val: 0deg;
}

.text-skew-y-pos-10 {
   --skew-y-val: 10deg;
}

.text-skew-y-pos-20 {
   --skew-y-val: 20deg;
}

.text-skew-y-pos-30 {
   --skew-y-val: 30deg;
}


/* ==========================================================================
           
           ========================================================================== */
.text-perspective-x-neg-60 {
   --text-perspective-x: -60deg;
}

.text-perspective-x-neg-50 {
   --text-perspective-x: -50deg;
}

.text-perspective-x-neg-40 {
   --text-perspective-x: -40deg;
}

.text-perspective-x-neg-30 {
   --text-perspective-x: -30deg;
}

.text-perspective-x-neg-20 {
   --text-perspective-x: -20deg;
}

.text-perspective-x-neg-10 {
   --text-perspective-x: -10deg;
}

.text-perspective-x-0 {
   --text-perspective-x: 0deg;
}

.text-perspective-x-pos-10 {
   --text-perspective-x: 10deg;
}

.text-perspective-x-pos-20 {
   --text-perspective-x: 20deg;
}

.text-perspective-x-pos-30 {
   --text-perspective-x: 30deg;
}

.text-perspective-x-pos-40 {
   --text-perspective-x: 40deg;
}

.text-perspective-x-pos-50 {
   --text-perspective-x: 50deg;
}

.text-perspective-x-pos-60 {
   --text-perspective-x: 60deg;
}

.text-perspective-y-neg-60 {
   --text-perspective-y: -60deg;
}

.text-perspective-y-neg-50 {
   --text-perspective-y: -50deg;
}

.text-perspective-y-neg-40 {
   --text-perspective-y: -40deg;
}

.text-perspective-y-neg-30 {
   --text-perspective-y: -30deg;
}

.text-perspective-y-neg-20 {
   --text-perspective-y: -20deg;
}

.text-perspective-y-neg-10 {
   --text-perspective-y: -10deg;
}

.text-perspective-y-0 {
   --text-perspective-y: 0deg;
}

.text-perspective-y-pos-10 {
   --text-perspective-y: 10deg;
}

.text-perspective-y-pos-20 {
   --text-perspective-y: 20deg;
}

.text-perspective-y-pos-30 {
   --text-perspective-y: 30deg;
}

.text-perspective-y-pos-40 {
   --text-perspective-y: 40deg;
}

.text-perspective-y-pos-50 {
   --text-perspective-y: 50deg;
}

.text-perspective-y-pos-60 {
   --text-perspective-y: 60deg;
}




/* ==========================================================================
           ۱۸. کلاس‌های ضخامت خط دور متن (Stroke Width Classes)
           ========================================================================== */
.stroke-w-0 {
   --stroke-w-val: 0px;
}

.stroke-w-1 {
   --stroke-w-val: 2px;
}

.stroke-w-2 {
   --stroke-w-val: 4px;
}

.stroke-w-3 {
   --stroke-w-val: 6px;
}

.stroke-w-4 {
   --stroke-w-val: 8px;
}

.stroke-w-5 {
   --stroke-w-val: 10px;
}




/* ==========================================================================
           ۱۹. کلاس‌های شدت درخشش نئون (Glow Intensity Classes)
           ========================================================================== */
.glow-off {
   --glow-intensity-val: 0;
   --glow-spread-val: 1px;
}

.glow-flicker {
   --glow-intensity-val: 1;
   --glow-spread-val: 12px;
}

.glow-subtle {
   --glow-intensity-val: 2;
   --glow-spread-val: 25px;
}

.glow-medium {
   --glow-intensity-val: 3;
   --glow-spread-val: 40px;
}

.glow-bright {
   --glow-intensity-val: 4;
   --glow-spread-val: 65px;
}

.glow-extreme {
   --glow-intensity-val: 5;
   --glow-spread-val: 90px;
}





/* ==========================================================================
           ۲۱. کلاس‌های عمق اکستروژن سایه سه‌بعدی (3D Shadow Depth Classes)
           ========================================================================== */
.shadow-depth-flat {
   --shadow-depth-val: 0;
}

.shadow-depth-min {
   --shadow-depth-val: 1;
}

.shadow-depth-short {
   --shadow-depth-val: 2;
}

.shadow-depth-mid {
   --shadow-depth-val: 3;
}

.shadow-depth-deep {
   --shadow-depth-val: 4;
}

.shadow-depth-max {
   --shadow-depth-val: 5;
}




/* ==========================================================================
           ۲۲. کلاس‌های زاویه و جهت سایه سه‌بعدی (Shadow Direction / Angle Classes)
           ========================================================================== */
.shadow-dir-t {
   --shadow-angle-val: -90deg;
}

/* بالا سمت چپ (Top Left) */
.shadow-dir-tl {
   --shadow-angle-val: 225deg;
}

/* بالا سمت چپ (Top Left) */
.shadow-dir-tr {
   --shadow-angle-val: 315deg;
}

/* بالا سمت راست (Top Right) */
.shadow-dir-br {
   --shadow-angle-val: 45deg;
}

/* پایین سمت راست (Bottom Right) */
.shadow-dir-bl {
   --shadow-angle-val: 135deg;
}

/* پایین سمت چپ (Bottom Left) */
.shadow-dir-b {
   --shadow-angle-val: 90deg;
}

/* مستقیم به پایین (Bottom) */


/* ==========================================================================
           ۲۳. کلاس‌های ضخامت بردر کادر (border Border Width Classes)
           ========================================================================== */
.border-w-0 {
   --border-width-val: 0px;
}

.border-w-1 {
   --border-width-val: 1px;
}

.border-w-2 {
   --border-width-val: 2px;
}

.border-w-3 {
   --border-width-val: 3px;
}

.border-w-4 {
   --border-width-val: 4px;
}

.border-w-5 {
   --border-width-val: 5px;
}