/* ==========================================================
   Hero: animated wordmark and tooth mark, event "ticket"
   ========================================================== */
.hero{background:var(--hero-bg);color:var(--hero-text);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center;padding-block:84px 96px}

.hero-brand{--mark-width:clamp(58px,8.7vw,112px);--mark-gap:clamp(-4px,-.3vw,-1px);position:relative;width:max-content;max-width:100%;padding-left:calc(var(--mark-width) + var(--mark-gap));direction:ltr}
.wordmark{font-family:var(--font);font-weight:800;font-size:clamp(58px,13vw,176px);line-height:.9;letter-spacing:-0.045em;margin:0;white-space:nowrap}
.wordmark span{display:inline-block;opacity:0;animation:letterEnter .55s both cubic-bezier(.2,.8,.2,1)}
.wordmark span:not(.word-i){color:var(--teal)}
.wordmark .word-i{animation-delay:1.65s}
.wordmark .word-s{animation-delay:1.79s}
.wordmark .word-m{animation-delay:1.93s}
.wordmark .word-i2{animation-delay:2.07s}
.wordmark .word-l{animation-delay:2.21s}
.wordmark .word-e{animation-delay:2.35s}
.edition-sup{font-size:.62em;line-height:0;vertical-align:.48em;letter-spacing:0}
html[lang="en"] .edition-translated,html:not([lang="en"]) .edition-en{display:none}
.hero-mark{--mark-scale:2.3;--mark-final-scale:1.3;--mark-nudge:clamp(8px,1.65vw,21px);position:absolute;top:50%;left:calc(0px - var(--mark-nudge));width:var(--mark-width);aspect-ratio:1080/1155;pointer-events:none;transform:translateY(-50%) scale(var(--mark-final-scale));animation:markSettle 2.3s both cubic-bezier(.25,.8,.25,1)}
.mark-stage{position:relative;width:100%;height:100%}
.hero-mark img{position:absolute;top:0;left:0;display:block;width:100%;height:auto}
.hero-mark .mark-navy{animation:markJoinLeft 1s both cubic-bezier(.22,.75,.3,1)}
.hero-mark .mark-cyan{animation:markJoinRight 1s both cubic-bezier(.22,.75,.3,1)}
/* Keep the entrance at its first frame while the loading cover is visible. */
html.site-animations-pending .hero-ed-big,
html.site-animations-pending .hero-ed-sep,
html.site-animations-pending .wordmark span,
html.site-animations-pending .hero-mark,
html.site-animations-pending .hero-mark img{animation-play-state:paused}
/* Reach the left slot before the unchanged wordmark entrance, then settle gently. */
@keyframes markSettle{0%,43%{left:50%;transform:translate(-50%,-50%) scale(var(--mark-scale))}70%{left:calc(0px - var(--mark-nudge));transform:translateY(-50%) scale(calc(var(--mark-final-scale) + .1))}100%{left:calc(0px - var(--mark-nudge));transform:translateY(-50%) scale(var(--mark-final-scale))}}
@keyframes markJoinLeft{from{transform:translateX(-100%)}to{transform:none}}
@keyframes markJoinRight{from{transform:translateX(100%)}to{transform:none}}
@keyframes letterEnter{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}

.hero h1{font-size:clamp(24px,2.8vw,34px);font-weight:600;margin-top:18px;max-width:22ch}
/* The edition: a big "2nd" beside the title (Arabic reads "النسخة 2") */
.hero-title-row{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);margin-top:18px}
.hero-title-row h1{margin-top:0}
.hero-ed-big{flex:none;display:inline-flex;align-items:flex-start;gap:.04em;font-weight:800;font-size:clamp(64px,7.2vw,96px);line-height:.8;letter-spacing:-.05em;direction:ltr;animation:edPop .75s 1.4s both cubic-bezier(.2,1.35,.35,1)}
.hero-ed-big b{font-weight:800;background:linear-gradient(160deg,#FFFFFF 22%,#5FD3CE);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline-end:.02em}
.hero-ed-big sup{font-size:.36em;line-height:1;letter-spacing:0;color:#5FD3CE;margin-top:.12em}
.hero-ed-sep{flex:none;align-self:stretch;width:2px;border-radius:2px;background:linear-gradient(180deg,transparent,rgba(95,211,206,.7),transparent);transform-origin:center;animation:edLine .5s 1.7s both ease-out}
/* Arabic: the word comes first ("النسخة 2"); Kurdish: "2یەم" reads right to left */
html[lang="ar"] .hero-ed-big,html[lang="ckb"] .hero-ed-big{direction:rtl}
html[lang="ar"] .hero-ed-big sup{order:-1;font-size:.3em;margin-top:.3em;font-weight:700}
/* Small phones: the 2nd above the title, so the title keeps the full width */
@media (max-width:380px){
  .hero-title-row{flex-direction:column;align-items:flex-start;gap:12px}
  .hero-ed-sep{display:none}
  .hero-ed-big{font-size:58px}
}
@keyframes edPop{0%{opacity:0;transform:scale(.5);filter:blur(8px)}70%{opacity:1;transform:scale(1.06);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes edLine{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
.hero .sub{color:var(--hero-muted);margin-top:10px;max-width:48ch}
.hero .sub .edition-sup{font-size:.65em}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Ticket card */
.ticket{background:linear-gradient(160deg,rgba(22,166,161,.22),rgba(22,166,161,.05));color:#fff;border:1px solid rgba(22,166,161,.45);border-radius:var(--r-lg);padding:26px 28px;position:relative;overflow:hidden;box-shadow:0 30px 60px -35px rgba(0,0,0,.6)}
.t-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid rgba(22,166,161,.3)}
.t-kicker{font-size:12px;color:#7FD6D2;letter-spacing:.04em}
.t-name{font-size:22px;font-weight:800;line-height:1.2;font-family:var(--font)}
.t-badge{font-size:12px;font-weight:700;color:#0B1F27;background:#16A6A1;border-radius:999px;padding:5px 12px;white-space:nowrap}
.t-badge .edition-sup{font-size:.62em;vertical-align:.5em}
.t-rows{list-style:none;margin:0;padding:18px 0 4px;display:grid;gap:16px}
.t-rows li{display:flex;align-items:center;gap:14px}
/* Each row may shrink, so a long date or venue name wraps instead of spilling out */
.t-rows li > div{min-width:0}
.t-rows b{overflow-wrap:anywhere}
.t-rows small{display:block;font-size:12px;color:#A9C9CD}
.t-rows b{display:block;font-size:19px;line-height:1.25}
.t-date-row{margin-inline:-10px;padding:10px;border-radius:16px;background:linear-gradient(100deg,rgba(22,166,161,.16),rgba(22,166,161,.04))}
.event-date{display:inline-block!important;white-space:nowrap;padding:7px 11px;border-inline-start:3px solid #16A6A1;border-radius:0 8px 8px 0;background:rgba(22,166,161,.12);color:#fff;font-size:17px!important;font-weight:800!important;line-height:1.2!important;letter-spacing:-.01em}
.t-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(22,166,161,.16);color:#3CC4BF;flex:none}
.t-ic svg{width:22px;height:22px}
.ticket .tear{position:relative;border-top:2px dashed rgba(22,166,161,.45);margin:20px 0 18px}
.ticket .tear::before,.ticket .tear::after{content:"";position:absolute;top:-15px;width:28px;height:28px;border-radius:50%;background:var(--hero-bg);border:1px solid rgba(22,166,161,.45)}
.ticket .tear::before{left:-43px;clip-path:inset(0 0 0 50%)}
.ticket .tear::after{right:-43px;clip-path:inset(0 50% 0 0)}
.t-foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.t-orgs{display:grid;gap:10px}
.t-orgs small{display:block;font-size:12px;color:#A9C9CD}
.t-orgs b{font-size:14px}
.t-logo{width:56px;height:56px;flex:none;filter:brightness(1.4)}

@media (max-width:1060px){
  .hero-brand{padding-bottom:20px}
  .hero-mark{top:calc((100% - 20px)/2)}
}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);padding-block:56px 64px;gap:40px}
  .hero .wrap > *{min-width:0}
  .hero-mark{--mark-scale:2.2}
}
@media (max-width:600px){
  .hero-brand{--mark-width:clamp(44px,12vw,54px);--mark-gap:8px}
  .hero-mark{--mark-scale:1.55;--mark-nudge:4px}
}
@media (max-width:420px){
  .ticket{padding:22px 18px}
  .t-logo{width:44px;height:44px}
  .t-rows b{font-size:17px}
  .event-date{font-size:15px!important;padding:6px 9px;white-space:normal}
}
@media (prefers-reduced-motion: reduce){
  .hero-ed-big,.hero-ed-sep{animation:none;opacity:1;transform:none;filter:none}
  .wordmark span,.hero-mark img{animation:none;opacity:1;transform:none}
  .hero-mark{animation:none;left:calc(0px - var(--mark-nudge));transform:translateY(-50%) scale(var(--mark-final-scale))}
}