/* Agah Academy Hero - minimal, brand-aligned and scoped for WordPress. */

.agah-hero{
  --agah-primary:#AA6045;
  --agah-primary-hover:#8f4e37;
  --agah-secondary:#576b50;
  --agah-secondary-hover:#43533e;
  --agah-ink:#2e312d;
  --agah-muted:#696d66;
  --agah-surface:#fffdfb;
  --agah-line:#e3e5df;
  --agah-on-primary:#fffaf7;
  --agah-min-height:clamp(560px,72dvh,680px);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100vw;
  max-width:none;
  margin-inline:calc(50% - 50vw);
  background:transparent;
  color:var(--agah-ink);
  font-family:"iransans","IRANSansX","IRANSansXFaNum","IRANYekanX",Tahoma,system-ui,sans-serif;
  direction:rtl;
}

.agah-hero *{box-sizing:border-box}

.agah-hero .agah-hero-inner{
  position:relative;
  z-index:1;
  width:min(1140px,calc(100vw - 32px));
  min-height:var(--agah-min-height);
  margin-inline:auto;
  padding:clamp(1.25rem,2.5vw,2rem) clamp(1rem,2vw,1.5rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.96fr);
  align-items:center;
  gap:clamp(3rem,5vw,5rem);
}

.agah-hero .agah-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.25rem;
}

.agah-hero .agah-copy h1{
  max-width:11em;
  margin:0;
  color:var(--agah-ink);
	font-family:"gramophone";
	font-size:var(--agah-heading-size,48px);
  font-weight:var(--agah-heading-weight,400);
  line-height:1.38;
  letter-spacing:0;
  text-wrap:balance;
}

.agah-hero .agah-copy h1 .agah-accent{
  display:block;
  color:var(--agah-primary);
}

.agah-hero .agah-lede{
  max-width:50ch;
  margin:0;
	color:#48413A;
	font-family:"iransans","IRANSansX","IRANSansXFaNum","IRANYekanX",Tahoma,system-ui,sans-serif;
	font-size:var(--agah-body-size,16px);
	font-weight:var(--agah-body-weight,500);
	line-height:2em;
}

.agah-hero .agah-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:.75rem;
}

.agah-hero .agah-btn{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  padding:.8rem 1.4rem;
  border:1px solid var(--agah-primary);
  border-radius:12px;
  background:var(--agah-primary);
  color:var(--agah-on-primary);
  font-family:inherit;
  font-size:.93rem;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 8px 18px -12px rgba(143,78,55,.5);
  transition:transform .18s cubic-bezier(.23,1,.32,1),background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.agah-hero .agah-btn svg{
  flex:0 0 auto;
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}

@media (hover:hover) and (pointer:fine){
  .agah-hero .agah-btn:hover{
    border-color:var(--agah-primary-hover);
    background:var(--agah-primary-hover);
    color:var(--agah-on-primary);
    box-shadow:0 14px 24px -12px rgba(143,78,55,.65);
    transform:translateY(-2px) scale(1.015);
  }
  .agah-hero .agah-btn:hover svg{transform:translateX(-4px)}
}
.agah-hero .agah-btn:active{box-shadow:0 4px 10px -8px rgba(143,78,55,.5);transform:translateY(0) scale(.97)}

.agah-hero .agah-btn--secondary{
	border-color:var(--agah-secondary);
	background:transparent;
	box-shadow:none;
	color:var(--agah-secondary);
}

@media (hover:hover) and (pointer:fine){
	.agah-hero .agah-btn--secondary:hover{
		border-color:var(--agah-secondary-hover);
		background:var(--agah-secondary-hover);
		box-shadow:0 14px 24px -12px rgba(67,83,62,.5);
  }
}

.agah-hero .agah-btn:focus-visible,
.agah-hero .agah-orb:focus-visible{
  outline:3px solid rgba(170,96,69,.32);
  outline-offset:4px;
}

/* Suggestions float around the statue like the reference thought bubbles. */
.agah-hero .agah-stage{
  min-width:0;
  width:100%;
  max-width:620px;
  min-height:520px;
  margin-inline:auto;
  position:relative;
}

.agah-hero .agah-orbs{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:auto;
}

.agah-hero .agah-orbs-track{
  position:relative;
  width:100%;
  height:100%;
}

.agah-hero .agah-statue{
  position:absolute;
  inset-block-end:0;
  inset-inline-start:50%;
  z-index:1;
  width:min(76%,410px);
  height:auto;
  display:block;
  transform:translateX(50%);
  filter:drop-shadow(0 18px 26px rgba(87,107,80,.1));
  user-select:none;
}

.agah-hero .agah-orb{
  --agah-card-tone:var(--agah-icon-color,var(--agah-secondary));
  --agah-x:50%;
  --agah-y:18%;
  --agah-y-offset:32px;
  --agah-mobile-y:0px;
  --agah-scale:.84;
  --agah-opacity:.42;
  --agah-z:1;
  position:absolute;
  inset-block-start:calc(var(--agah-y) + var(--agah-y-offset));
  left:var(--agah-x);
  z-index:var(--agah-z);
  width:clamp(190px,42%,224px);
  min-width:0;
  min-height:64px;
  padding:.62rem .78rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  border:1px solid var(--agah-icon-color,var(--agah-secondary));
  border-radius:16px;
  background:var(--agah-card-bg,rgba(255,253,251,.94));
  box-shadow:0 12px 28px -20px rgba(87,107,80,.32),inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--agah-ink);
  font-family:inherit;
  text-align:start;
  text-decoration:none;
  opacity:var(--agah-opacity);
  scale:1;
  transform:translate3d(-50%,-50%,0) scale(var(--agah-scale));
  transform-origin:center;
  will-change:transform,opacity;
  transition:
	transform .44s cubic-bezier(.77,0,.175,1),
	opacity .4s cubic-bezier(.77,0,.175,1),
	border-color .24s ease,
	background-color .24s ease,
	box-shadow .32s cubic-bezier(.23,1,.32,1),
    scale .14s cubic-bezier(.23,1,.32,1);
}

.agah-hero .agah-orb[href]{cursor:pointer}

.agah-hero .agah-orb:not(.agah-hot){
  border-color:var(--agah-line);
}

.agah-hero .agah-orb:not(.agah-hot) .agah-ico{
  background:color-mix(in srgb,var(--agah-secondary) 12%,transparent);
  color:var(--agah-secondary);
}

.agah-hero .agah-orb:hover{
  border-color:var(--agah-icon-color,var(--agah-secondary));
  background:color-mix(in srgb,var(--agah-icon-color,var(--agah-secondary)) 5%,var(--agah-card-bg,rgba(255,253,251,.94)));
}

.agah-hero .agah-orb[href]:active{scale:.985}

.agah-hero .agah-orb.agah-hot{
  border-color:var(--agah-icon-color,var(--agah-secondary));
  background:color-mix(in srgb,var(--agah-icon-color,var(--agah-secondary)) 4%,var(--agah-card-bg,rgba(255,253,251,.94)));
  box-shadow:0 22px 42px -20px rgba(87,107,80,.4),inset 0 1px 0 rgba(255,255,255,.8);
}

/* Progressive enhancement: use the reference's scattered composition before JS. */
.agah-hero .agah-orb:first-child{
  --agah-x:75%;
  --agah-y:16%;
  --agah-scale:1.04;
  --agah-opacity:1;
  --agah-z:10;
}
.agah-hero .agah-orb:nth-child(2){--agah-x:43%;--agah-y:4%;--agah-z:4}
.agah-hero .agah-orb:nth-child(3){--agah-x:17%;--agah-y:22%;--agah-z:3}
.agah-hero .agah-orb:nth-child(4){--agah-x:21%;--agah-y:43%;--agah-z:2}

.agah-hero .agah-ico{
  width:32px;
  height:32px;
  flex:0 0 32px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:9px;
	background:var(--agah-icon-box,rgba(87,107,80,.12));
	color:var(--agah-icon-color,var(--agah-secondary));
}

.agah-hero .agah-ico svg{width:16px;height:16px}
.agah-hero .agah-ico-img{width:100%;height:100%;display:block;object-fit:cover}

.agah-hero .agah-txt{
	min-width:0;
	align-self:stretch;
	display:flex;
	flex-direction:column;
	justify-content:center;
	font-size:.75rem;
  font-weight:700;
  line-height:1.55;
}

.agah-hero .agah-orb--solo .agah-txt{
	align-items:center;
	text-align:center;
}

.agah-hero .agah-txt small{
  display:block;
  margin-top:.08rem;
  color:var(--agah-muted);
  font-size:.62rem;
  font-weight:400;
  line-height:1.5;
}

@media (max-width:1024px) and (min-width:881px){
  .agah-hero .agah-hero-inner{gap:3rem}
  .agah-hero .agah-stage{min-height:460px}
  .agah-hero .agah-orb{--agah-y-offset:24px;width:clamp(174px,45%,202px);padding:.58rem .65rem;gap:.5rem}
  .agah-hero .agah-txt{font-size:.72rem}
}

/* Mobile leads with the visual, then the copy, using a quiet upward stack. */
@media (max-width:880px){
  .agah-hero{--agah-min-height:auto}

  .agah-hero .agah-hero-inner{
    width:100%;
    min-height:auto;
    padding:clamp(1.5rem,6vw,2rem) clamp(1.15rem,6vw,2.5rem) clamp(2rem,6vw,3rem);
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:clamp(2rem,7vw,2.75rem);
  }

  .agah-hero .agah-copy{
    order:1;
    width:100%;
    gap:1rem;
    padding:0;
  }

  .agah-hero .agah-copy h1{
    max-width:10.75em;
		font-size:var(--agah-heading-mobile-size,32px);
    line-height:1.4;
  }

	.agah-hero .agah-lede{width:100%;max-width:none}

	.agah-hero .agah-actions{margin-top:.5rem}
  .agah-hero .agah-btn{min-height:48px;padding:.75rem 1.25rem}

  .agah-hero .agah-stage{
    order:0;
    min-height:clamp(330px,72vw,380px);
    max-width:560px;
  }

  .agah-hero .agah-statue{width:min(66%,270px)}

  .agah-hero .agah-orb{
    inset-block-start:0;
    width:min(76vw,270px);
    min-height:68px;
    transform:translate3d(-50%,calc(var(--agah-mobile-y) - 50%),0) scale(var(--agah-scale));
  }

  /* Pre-JS layout: force x=50% (JS always does this on mobile anyway) and stagger y
     to match the initial JS state so cards form a proper deck before interaction. */
  .agah-hero .agah-orb{--agah-x:50%!important}
  .agah-hero .agah-orb:nth-child(1){--agah-mobile-y:clamp(74px,16vw,82px)}
  .agah-hero .agah-orb:nth-child(2){--agah-mobile-y:calc(clamp(74px,16vw,82px) - 15px)}
  .agah-hero .agah-orb:nth-child(3){--agah-mobile-y:calc(clamp(74px,16vw,82px) - 30px)}
  .agah-hero .agah-orb:nth-child(n+4){--agah-mobile-y:calc(clamp(74px,16vw,82px) - 45px)}

  .agah-hero .agah-orb:not(.agah-hot){pointer-events:none}

  .agah-hero .agah-orb{
    --agah-icon-color:var(--agah-secondary)!important;
    --agah-icon-box:color-mix(in srgb,var(--agah-secondary) 12%,transparent)!important;
    --agah-card-bg:var(--agah-surface)!important;
    border-color:var(--agah-card-tone);
  }

  .agah-hero .agah-orb:not(.agah-hot){
    overflow:hidden;
    border-color:var(--agah-card-tone);
    background:color-mix(in srgb,var(--agah-secondary) 4%,var(--agah-surface));
    box-shadow:none;
  }

  .agah-hero .agah-orb .agah-ico,
  .agah-hero .agah-orb .agah-txt{
    transition:opacity .22s cubic-bezier(.23,1,.32,1);
  }

  .agah-hero .agah-orb:not(.agah-hot) .agah-ico,
  .agah-hero .agah-orb:not(.agah-hot) .agah-txt{
    opacity:0;
  }

  .agah-hero .agah-orb:not(.agah-hot)::before{
    content:"";
    position:absolute;
    inset-block-start:50%;
    inset-inline-start:.78rem;
    width:32px;
    height:32px;
    border-radius:9px;
    background:color-mix(in srgb,var(--agah-secondary) 12%,var(--agah-surface));
    transform:translateY(-50%);
  }

  .agah-hero .agah-orb:not(.agah-hot)::after{
    content:"";
    position:absolute;
    inset-block-start:50%;
    inset-inline-start:3.55rem;
    width:52%;
    height:22px;
    background:
      linear-gradient(color-mix(in srgb,var(--agah-secondary) 16%,var(--agah-surface)) 0 0) right top/100% 7px no-repeat,
      linear-gradient(color-mix(in srgb,var(--agah-secondary) 10%,var(--agah-surface)) 0 0) right bottom/62% 6px no-repeat;
    transform:translateY(-50%);
  }
}

@media (max-width:420px){
  .agah-hero .agah-hero-inner{
    padding:1.5rem 1rem 1.5rem;
    gap:2rem;
  }

  .agah-hero .agah-copy{gap:.75rem}
  .agah-hero .agah-copy h1{font-size:clamp(1.9rem,9.5vw,2.25rem)}
  .agah-hero .agah-btn{min-height:46px;font-size:.88rem}
  .agah-hero .agah-stage{min-height:300px}

  .agah-hero .agah-orb{
    width:min(82vw,255px);
    min-height:64px;
    padding:.6rem .7rem;
    gap:.55rem;
    border-radius:14px;
  }

  .agah-hero .agah-ico{
    width:28px;
    height:28px;
    flex-basis:28px;
    border-radius:8px;
  }

  .agah-hero .agah-ico svg{width:14px;height:14px}
  .agah-hero .agah-txt{font-size:.72rem;line-height:1.5}
  .agah-hero .agah-txt small{font-size:.6rem;line-height:1.45}
  .agah-hero .agah-statue{width:min(62%,205px)}

  .agah-hero .agah-orb:not(.agah-hot)::before{
    width:28px;
    height:28px;
    border-radius:8px;
  }

  .agah-hero .agah-orb:not(.agah-hot)::after{inset-inline-start:3.25rem}
}

@media (prefers-reduced-motion:reduce){
  .agah-hero *,
  .agah-hero *::before,
  .agah-hero *::after{
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

@media (prefers-reduced-motion:no-preference){
	.agah-hero .agah-copy h1,
	.agah-hero .agah-lede,
	.agah-hero .agah-actions{
		animation:agah-enter-copy-item .46s cubic-bezier(.23,1,.32,1) both;
	}
	.agah-hero .agah-lede{animation-delay:.05s}
	.agah-hero .agah-actions{animation-delay:.1s}

	.agah-hero .agah-stage{
		animation:agah-enter-stage .56s .08s cubic-bezier(.23,1,.32,1) both;
	}
}

/* Card entrance animation is desktop/laptop only; mobile cards appear without it. */
@media (prefers-reduced-motion:no-preference) and (min-width:881px){
	.agah-hero .agah-orb{animation:agah-enter-orb .48s cubic-bezier(.23,1,.32,1) backwards}
	.agah-hero .agah-orb:nth-child(2){animation-delay:.05s}
	.agah-hero .agah-orb:nth-child(3){animation-delay:.1s}
	.agah-hero .agah-orb:nth-child(4){animation-delay:.15s}
	.agah-hero .agah-orb:nth-child(5){animation-delay:.2s}
	.agah-hero .agah-orb:nth-child(n+6){animation-delay:.25s}
}

@keyframes agah-enter-copy-item{
	from{opacity:0;transform:translate3d(0,14px,0)}
	to{opacity:1;transform:translate3d(0,0,0)}
}

@keyframes agah-enter-stage{
	from{opacity:0;transform:translate3d(0,18px,0) scale(.975)}
	to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@keyframes agah-enter-orb{
	from{opacity:0;transform:translate3d(-50%,calc(-50% + 12px),0) scale(var(--agah-scale))}
	to{opacity:var(--agah-opacity);transform:translate3d(-50%,-50%,0) scale(var(--agah-scale))}
}

@supports not (color:color-mix(in srgb,black,white)){
  .agah-hero .agah-ico{background:#f1f4f0;color:var(--agah-icon-color,var(--agah-secondary))}
  .agah-hero .agah-orb:hover,
  .agah-hero .agah-orb.agah-hot{background:var(--agah-card-bg,var(--agah-surface))}
  .agah-hero .agah-orb.agah-hot{border-color:var(--agah-icon-color,var(--agah-secondary))}
}