@font-face{font-family:Cairo;src:url('/assets/Cairo.ttf') format('truetype');font-weight:200 1000;font-display:swap}
@font-face{font-family:BarlowCondensed;src:url('/assets/BarlowCondensed.ttf') format('truetype');font-weight:600;font-display:swap}
:root{color-scheme:light;--cream:#f2e5d2;--palm:#124430;--chilli:#db410c}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--cream)}
body{overflow:hidden;color:var(--palm);height:100svh;isolation:isolate}
#sauce{position:fixed;inset:0;width:100%;height:100%;z-index:-2}
.paper{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
main{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:100px 28px 65px;pointer-events:none;text-align:center}
h1{margin:0 0 clamp(26px,5vh,54px);width:min(49vw,660px);line-height:0;transform:none}
h1 img{width:100%;height:auto;display:block}
.message{position:relative}
.english{font-family:BarlowCondensed,'Arial Narrow',sans-serif;font-weight:600;font-size:clamp(26px,3.3vw,47px);line-height:1.02;margin:0;letter-spacing:-.015em}
.arabic{font-family:Cairo,sans-serif;font-weight:600;font-size:clamp(20px,2.1vw,29px);line-height:1.65;margin:22px 0 0;font-variation-settings:'slnt' -6}
.arabic strong{font-weight:750}
.nozzle{position:fixed;top:-22px;left:0;width:66px;height:128px;transform:translateX(50vw);transform-origin:50% 0;z-index:2;pointer-events:none;filter:drop-shadow(3px 4px 3px #56210c20)}
.nozzle svg{width:100%;height:100%}
@media(max-width:650px){main{padding:110px 22px 80px}h1{width:83vw;margin-bottom:32px}.english{font-size:34px}.arabic{font-size:23px;margin-top:24px}.nozzle{width:56px;height:109px;top:-19px}}
@media(max-height:550px){main{padding:65px 20px 30px}h1{width:min(43vw,340px);margin-bottom:18px}.message{display:flex;align-items:center;gap:36px}.english{font-size:27px}.arabic{font-size:21px;margin:0}}
.submerged{color:var(--cream);z-index:1;clip-path:inset(100% 0 0 0)}
.submerged h1 img{filter:brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(453%) hue-rotate(341deg) brightness(97%) contrast(95%)}

.spicy-line{display:inline-flex;align-items:center;gap:.18em}.pepper{width:.86em;height:1.1em;flex:none;transform:rotate(12deg);overflow:visible}

.nozzle{width:120px;height:137px;top:-23px;filter:none}.nozzle img{display:block;width:100%;height:100%}@media(max-width:650px){.nozzle{width:96px;height:110px;top:-20px}}
.submerged .pepper path:first-child{fill:var(--cream)}.submerged .pepper path:nth-child(2){stroke:var(--cream)}.submerged .pepper path:nth-child(3){stroke:#ae2b0c}

.nozzle[hidden]{display:none}