/* Persian display type and the two-slide CrossVerse introduction. */
@font-face {
  font-family: 'Vazirmatn Display';
  src: url('./fonts/Vazirmatn-Black.woff2') format('woff2');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
.hero { min-height: max(920px, 100svh); --slide-duration: 16000ms; }
.hero .hero-content { padding-top: 140px; padding-bottom: 160px; }
.hero-slides { display: grid; width: min(100%, 710px); }
.hero-slide { grid-area: 1 / 1; min-width: 0; visibility: hidden; pointer-events: none; }
.hero-slide.is-active { visibility: visible; pointer-events: auto; }
.hero .hero-signature {
  display: flex; flex-direction: row; align-items: center;
  gap: 14px; margin: 0 0 22px; width: fit-content;
  animation: none; opacity: 1; transform: none;
}
.hero-signature .hero-wordmark {
  position: relative; display: inline-flex; align-items: center;
  direction: ltr; unicode-bidi: isolate; padding: 8px 20px 9px;
  border-radius: 100px; background: var(--cv-accent); color: #052c25;
  font: 700 25px/1.15 Arial, Helvetica, sans-serif; letter-spacing: -1.1px;
  box-shadow: 0 4px 25px #0003;
}
.hero-signature-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.hero-signature-meta > span {
  display: block; padding: 3px 12px; border: 1px solid #a9e7da20;
  border-radius: 100px; color: #d1e2e1; background: #12242de8;
  font-size: 13px; line-height: 1.4; white-space: nowrap;
}
.hero-signature-meta .latin { padding-block: 5px; font: 11px/1 Arial, Helvetica, sans-serif; letter-spacing: 2.5px; }
.hero .hero-title {
  max-width: 100%; margin: 0 0 24px;
  font-family: 'Vazirmatn Display', Tahoma, sans-serif;
  font-size: clamp(48px, 5.8vw, 80px); font-weight: 900; font-synthesis: none;
  line-height: 1.4; letter-spacing: normal;
  text-shadow: 0 4px 30px #020c1680;
  animation: none; opacity: 1; transform: none;
}
.hero-title .hero-title-line { display: block; width: fit-content; max-width: 100%; white-space: nowrap; overflow: hidden; }
.hero .hero-title em { margin-inline-start: .55em; margin-top: -.12em; font-size: 1.12em; color: var(--cv-accent); -webkit-text-stroke: 0; font-style: normal; }
.hero .hero-slide-concept .hero-title em { margin-inline-start: .25em; font-size: 1em; }
.hero-wordmark-symbol { display: none; }
.hero-wordmark-name, .hero-type-rise { display: block; }
.hero-slide-copy { max-width: 650px; color: #c2cedc; font-size: 18px; line-height: 1.85; text-shadow: 0 2px 14px #020c16; }
.hero-slide-copy p { margin: 0; }
.hero-slide-copy p + p { margin-top: 12px; }
.hero-slide-copy .hero-slide-lead { font-size: 20px; color: #f4f7fa; margin-bottom: 14px; }
.hero-slide-copy bdi { font: inherit; font-family: Arial, Helvetica, sans-serif; font-size: .88em; }
.hero-slide-copy strong { color: #eafff8; font-weight: 700; }
.hero-slogan { margin: 20px 0 0; text-align: right; color: var(--cv-accent); font: 600 13px/1.6 Arial, Helvetica, sans-serif; letter-spacing: .75px; }
.hero .hero-actions { margin-top: 28px; }
.hero-slide-controls { display: flex; gap: 24px; width: min(470px, 75%); }
.hero-slide-control {
  position: relative; display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0; min-height: 52px; padding: 12px 0 16px;
  border: 0; border-bottom: 2px solid #75969638; background: transparent;
  color: #a3b5c7; text-align: right; font: 15px/1.5 var(--cv-font);
  cursor: pointer; transition: color .2s;
}
.hero-slide-control::after { content: ''; position: absolute; bottom: -2px; right: 0; width: 100%; height: 2px; background: var(--cv-accent); transform: scaleX(0); transform-origin: right; }
.hero-slide-control[aria-current="true"] { color: #f4f7fa; }
.hero-slide-control[aria-current="true"]::after { transform: scaleX(1); }
.hero-slide-control:hover { color: var(--cv-accent); }
.hero-slide-control:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 5px; border-radius: 3px; }
.hero-slide-number { font-size: 21px; color: var(--cv-accent); }

/* Each slide gets one entrance, a reading hold, then a coordinated exit. */
@media (prefers-reduced-motion: no-preference) {
  .hero[data-type-motion="true"] .hero-slide.is-active .hero-wordmark { animation: cv-type-badge .8s cubic-bezier(.22,1,.36,1) both; }
  .hero[data-type-motion="true"] .hero-slide.is-active .hero-wordmark-symbol {
    display: grid; position: absolute; inset: 0 auto 0 0; width: 44px; place-items: center;
    font-size: 18px; letter-spacing: -1px; animation: cv-type-symbol .65s linear both;
  }
  .hero[data-type-motion="true"] .hero-slide.is-active .hero-wordmark-name { animation: cv-type-name .7s ease both; }
  .hero[data-type-motion="true"] .hero-slide.is-active .hero-signature-meta > span { animation: cv-type-meta .7s .1s cubic-bezier(.22,1,.36,1) both; }
  .hero[data-type-motion="true"] .hero-slide.is-active .hero-signature-meta > span:last-child { animation-delay: .2s; }
  .hero[data-type-motion="true"] .hero-slide.is-active .hero-type-rise { animation: cv-type-rise .9s .25s cubic-bezier(.22,1,.36,1) both; transform-origin: right bottom; }
  .hero[data-type-motion="true"] .hero-slide.is-active em .hero-type-rise { animation-name: cv-type-rise-accent; animation-delay: .45s; }
  .hero[data-type-motion="true"] .hero-slide.is-active .hero-slide-copy { animation: cv-copy-in .8s .65s cubic-bezier(.22,1,.36,1) both; }
  .hero[data-type-motion="true"] .hero-slide.is-active .hero-slogan { animation: cv-copy-in .8s .8s cubic-bezier(.22,1,.36,1) both; }
  .hero[data-type-motion="true"] .hero-slide.is-leaving .hero-type-rise { animation: cv-type-out .55s cubic-bezier(.55,0,1,.45) both; }
  .hero[data-type-motion="true"] .hero-slide.is-leaving em .hero-type-rise { animation-name: cv-type-out; animation-delay: .08s; }
  .hero[data-type-motion="true"] .hero-slide.is-leaving .hero-signature,
  .hero[data-type-motion="true"] .hero-slide.is-leaving .hero-slide-copy,
  .hero[data-type-motion="true"] .hero-slide.is-leaving .hero-slogan { animation: cv-copy-out .4s ease both; }
  .hero[data-type-motion="true"] .hero-slide-control[aria-current="true"]::after { animation: cv-slide-progress var(--slide-duration) linear both; }
  .hero[data-type-running="false"] .hero-slide *,
  .hero[data-type-running="false"] .hero-slide-control::after { animation-play-state: paused !important; }
}
@keyframes cv-type-badge {
  0% { opacity: 0; clip-path: inset(0 calc(100% - 44px) 0 0 round 100px); transform: translateY(22px); }
  22% { opacity: 1; clip-path: inset(0 calc(100% - 44px) 0 0 round 100px); transform: translateY(0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0 round 100px); transform: translateY(0); }
}
@keyframes cv-type-symbol { 0%, 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cv-type-name { 0%, 20% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes cv-type-meta { from { opacity: 0; transform: translateX(20px); clip-path: inset(0 0 0 100%); } to { opacity: 1; transform: translateX(0); clip-path: inset(0 0 0 0); } }
@keyframes cv-type-rise { from { opacity: 0; transform: translateY(105%) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cv-type-rise-accent { from { opacity: 0; color: #f4f7fa; transform: translateY(105%) scale(.96); } to { opacity: 1; color: var(--cv-accent); transform: translateY(0) scale(1); } }
@keyframes cv-type-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-105%); } }
@keyframes cv-copy-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cv-copy-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes cv-slide-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1100px) {
  .hero { min-height: max(950px, 100svh); }
  .hero-slides { width: min(100%, 650px); }
  .hero-slide-copy { font-size: 17px; }
}
@media (min-width: 481px) and (max-width: 800px) {
  .hero .hero-title { font-size: clamp(35px, 6.2vw, 49px); }
  .hero .hero-content { padding-top: 140px; padding-bottom: 180px; }
}
@media (max-width: 480px) {
  .hero { min-height: max(980px, 100svh); }
  .hero .hero-content { padding-top: 130px; padding-bottom: 170px; }
  .hero:after { background: linear-gradient(180deg,#0b1220ed 0%,#0b1220dd 58%,#0b12203b 80%,#0b1220 100%); }
  .hero .hero-signature { gap: 10px; margin-bottom: 22px; }
  .hero-signature .hero-wordmark { font-size: 21px; padding: 8px 15px; }
  .hero-signature-meta > span { padding-inline: 9px; font-size: 11px; }
  .hero-signature-meta .latin { font-size: 9px; letter-spacing: 2px; }
  .hero .hero-title { font-size: clamp(28px, 9.4vw, 43px); line-height: 1.5; margin-bottom: 22px; }
  .hero .hero-title em { margin-inline-start: .5em; font-size: 1.18em; }
  .hero-slide-copy { font-size: 16px; line-height: 1.85; }
  .hero-slide-copy .hero-slide-lead { font-size: 18px; line-height: 1.8; }
  .hero-copy-break { display: none; }
  .hero-slogan { font-size: 11px; letter-spacing: .1px; margin-top: 20px; }
  .hero .hero-actions { margin-top: 26px; }
  .hero-slide-controls { width: 100%; gap: 22px; }
  .hero-slide-control { font-size: 14px; gap: 9px; }
  .hero .hero-bottom { bottom: 34px; }
}