/* =======================================
   GLOBAL STYLES
======================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f4f6f8;
  color: #222;
}

header {
  text-align: center;
  padding: 40px 20px;
  background: #1e293b;
  color: white;
}

main {
  padding: 40px;
  display: grid;
  gap: 60px;
}

section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.shape {
  width: 150px;
  height: 150px;
  background: #3b82f6;
}

/* =======================================
   1️⃣ Basic Box Model Shapes
======================================= */

/*
Square:
Uses width + height.
Nothing special — pure box model.
*/

.square {
  background: #10b981;
}

/*
Circle:
border-radius: 50%
Why 50%?
Because radius becomes half of width/height.
*/

.circle {
  border-radius: 50%;
  background: #ef4444;
}


/* =======================================
   2️⃣ Border-Based Triangle
======================================= */

/*
Core Idea:
- width: 0
- height: 0
- Borders create visual area

Only one visible border creates triangle.
*/

.triangle {
  width: 0;
  height: 0;

  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 150px solid #6366f1;

  background: none;
}


/* =======================================
   3️⃣ Clip-Path Chevron
======================================= */

/*
clip-path uses coordinate system.
0% 0% = top-left
100% 100% = bottom-right

Polygon points define visible area.
*/

.chevron {
  width: 640px;
  height: 360px;

  background:
    linear-gradient(
      60deg,
      rgba(255,255,255,0.05) 25%,
      transparent 25%
    ),
    linear-gradient(
      120deg,
      rgba(255,255,255,0.05) 25%,
      transparent 25%
    ),
    linear-gradient(
      60deg,
      transparent 75%,
      rgba(255,255,255,0.05) 75%
    ),
    linear-gradient(
      120deg,
      transparent 75%,
      rgba(255,255,255,0.05) 75%
    ),
    #3b6be0;

  background-size: 120px 120px;
  background-repeat: repeat;
}


/* =======================================
   4️⃣ Repeating Radial Gradient Pattern
======================================= */

/*
Repeating radial gradient logic:

0px → 6px   = visible ring
6px → 40px  = gap
40px        = repeat distance
*/

.pattern-card {
  width: 400px;
  height: 200px;

  background:
    repeating-radial-gradient(
      circle at 100px 100px,
      rgba(255,255,255,0.6) 0px,
      rgba(255,255,255,0.6) 6px,
      transparent 6px,
      transparent 40px
    ),
    #3b82f6;

  border-radius: 12px;
}



/* =======================================
   5️⃣ Advanced CSS Shapes */
.wrapper {
    display: flex;
    gap: 40px;
}

.left {
  width: 640px;
  height: 360px;

  background:
    repeating-radial-gradient(
      circle at 100px calc(100% - 30px),
      rgba(255,255,255,0.08) 0px,
      rgba(255,255,255,0.08) 20px,
      transparent 2px,
      transparent 40px
    ),
    #5da2e8;
}


.right {
    --width:640px;
    --height:360px;
    display: flex;
    align-items: center;
    width: var(--width);
    height: var(--height);
    background-color: #3563E9;
    background-image: url(rectangle.svg);
    background-size: 90px 120px;
    background-position-x: -25px;
    /* animation:horizontal-move 3s infinite ease-in-out;
    animation-fill-mode: both; */
    &::after {
      content: "";
      background-color: inherit;
      background-image: inherit;
      background-size: inherit;
      background-position-x: 20px;
      width: inherit;
      height: calc(var(--height) / 3);
      display: inline-block;
      
    }
}
/* 
@keyframes horizontal-move {
    0%{
      background-position-x: 20px;
    }
    100% {
      background-position-x: 100px;
    }
    
} */