@charset "utf-8";
/* softToon, the Q films' look: soft rounded 2D on cream paper, Q's teal, coin gold and the price red, with tags and
   coins flying. Base styles are the final look; keyframes only say where things come from (fill both), so no-JS
   still shows everything. */
#softtoon {
  --st-teal: #70ccd9; --st-teal-d: #3aa9b9; --st-gold: #ffc531; --st-gold-d: #c98a12; --st-red: #e0453a;
  --st-paper: #fbf4e4; --st-card: #fffdf7; --st-r: 30px;
  position: relative; isolation: isolate; max-width: 1120px; margin: 40px auto; padding: 56px 22px 48px;
  border-radius: 44px; overflow: clip; color: var(--ink);
  /* cream paper: a warm wash plus a faint dot grain like the films' backgrounds */
  background:
    radial-gradient(600px 380px at 85% 0, #70ccd92e, transparent 70%),
    radial-gradient(520px 360px at 0 100%, #ffc53126, transparent 70%),
    radial-gradient(#0f13160a 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--st-paper);
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px #8f641814;
}
#softtoon .st-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#softtoon .st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the sky of money: coins and little tags floating, behind the content */
.st-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.st-sky svg { position: absolute; width: 34px; height: 34px; filter: drop-shadow(0 4px 6px #c98a1233); animation: st-float 7s ease-in-out infinite both; }
.st-sky .c1 { top: 2.5%; inset-inline-start: 6%; } .st-sky .c2 { top: 40%; inset-inline-end: 3%; width: 24px; height: 24px; animation-delay: -2s; }
.st-sky .c3 { top: 64%; inset-inline-start: 2%; width: 28px; height: 28px; animation-delay: -4s; } .st-sky .c4 { bottom: 5%; inset-inline-end: 22%; animation-delay: -1s; }
.st-sky span { position: absolute; font: 400 14px/1 var(--display); padding: 6px 10px 5px; border-radius: 8px 8px 8px 16px; background: var(--st-card); color: var(--st-red);
  box-shadow: 0 0 0 1.5px #e0453a55, 0 6px 14px #0f131612; animation: st-float 9s ease-in-out infinite both; }
.st-sky .t1 { top: 15%; inset-inline-end: 8%; transform: rotate(8deg); animation-delay: -3s; }
.st-sky .t2 { top: 1.2%; inset-inline-end: 7%; transform: rotate(-6deg); color: var(--teal-ink); box-shadow: 0 0 0 1.5px #70ccd9aa, 0 6px 14px #0f131612; animation-delay: -6s; }
.st-sky .t3 { bottom: 14%; inset-inline-start: 8%; transform: rotate(-10deg); animation-delay: -1.5s; }
@keyframes st-float { 50% { translate: 0 -14px; rotate: 6deg; } }

/* name + one warm line */
.st-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.st-kick { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 10px; padding: 5px 16px 4px; border-radius: 999px; direction: ltr;
  background: var(--st-teal); color: #08343a; font: 600 15px/1.4 var(--body); letter-spacing: .04em; box-shadow: 0 4px 0 var(--st-teal-d); }
.st-kick span { direction: rtl; font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.st-head h2 { font-size: clamp(36px, 6vw, 58px); line-height: 1.2; }
.st-head h2 em { font-style: normal; color: var(--teal-ink); position: relative; display: inline-block; z-index: 0; }
/* a gold swash under «الناعم», round like everything in the style */
.st-head h2 em::after { content: ''; position: absolute; inset-inline: -4% -2%; bottom: 2px; height: .3em; z-index: -1; border-radius: 99px; background: var(--st-gold); opacity: .55;
  transform-origin: right; animation: st-swash .8s cubic-bezier(.3,.9,.3,1) .3s both; }
@keyframes st-swash { from { transform: scaleX(0); } }
.st-line { color: #3c4048; margin: 6px auto 0; font-size: clamp(17px, 2vw, 19px); }

/* the stage: the loop in a soft phone, the talk and the toys beside it */
.st-stage { display: grid; gap: 30px; align-items: center; }
.st-phone { margin: 0 auto; width: min(76vw, 300px); position: relative; }
.st-phone video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 34px; background: #e9dcc2 url(softtoon/loop_poster.webp) center / cover;
  border: 7px solid var(--st-card); box-shadow: 0 0 0 1px var(--line), 0 18px 40px #8f641830, 0 0 0 12px #70ccd933; }
.st-phone figcaption { text-align: center; margin-top: 14px; font: 500 14px var(--body); color: var(--mute); }
/* a gold coin rests on the phone's corner, turning slowly */
.st-phone::after { content: ''; position: absolute; top: -14px; inset-inline-start: -14px; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff8 0 14%, transparent 15%), radial-gradient(circle, var(--st-gold) 0 58%, var(--st-gold-d) 60% 64%, var(--st-gold) 66%);
  box-shadow: 0 6px 14px #c98a1255; animation: st-spin 4s linear infinite both; }
@keyframes st-spin { from { transform: rotateY(-360deg); } }

.st-side { display: grid; gap: 26px; min-width: 0; }
#softtoon .b { animation: none; font-size: clamp(18px, 2.1vw, 22px); max-width: 92%; }
#softtoon .st-talk { display: flex; flex-direction: column; gap: 12px; }

/* the two tags from the opener: the other shop's 42 struck in red, Q's 15 that flips to its secret */
.st-tags { display: flex; justify-content: center; align-items: flex-end; gap: 18px; flex-wrap: wrap; position: relative; }
.st-tag { position: relative; width: 118px; height: 132px; border-radius: 18px; background: var(--st-card); text-align: center; display: grid; align-content: center;
  box-shadow: 0 0 0 1px var(--line), 0 10px 22px #0f131618; transform-origin: 50% -10px; }
/* the hole the tag hangs from */
.st-tag::before { content: ''; position: absolute; top: 10px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--st-paper); box-shadow: inset 0 0 0 2px #0f131622; }
.st-tag small { font: 500 13px/1 var(--body); color: var(--mute); margin-top: 14px; }
.st-tag b { font: 400 50px/1.1 var(--display); }
.st-tag i { font-style: normal; font-size: 14px; color: var(--mute); }
.st-tag.other { transform: rotate(6deg); animation: st-sway 3.2s ease-in-out infinite alternate both; }
.st-tag.other b { color: #6d7178; }
.st-tag.other s { text-decoration: none; position: relative; }
.st-tag.other s::after { content: ''; position: absolute; inset: 46% -10% auto; height: 5px; border-radius: 5px; background: var(--st-red); transform: rotate(-14deg); animation: st-strike .5s ease-out .6s both; }
@keyframes st-strike { from { transform: rotate(-14deg) scaleX(0); } }
@keyframes st-sway { from { transform: rotate(1deg); } }
.st-flipbox { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.st-tag.q { width: 132px; height: 150px; padding: 0; background: none; box-shadow: none; perspective: 700px; cursor: pointer; animation: st-swing 1s cubic-bezier(.3,1.6,.5,1) .4s both; }
.st-tag.q::before { z-index: 3; }
@keyframes st-swing { from { transform: rotate(-18deg); } }
.st-tag.q .f, .st-tag.q .k { position: absolute; inset: 0; display: grid; align-content: center; border-radius: 20px; backface-visibility: hidden; transition: transform .6s cubic-bezier(.4,1.4,.5,1); }
.st-tag.q .f { background: var(--st-card); box-shadow: 0 0 0 3px var(--st-teal), 0 14px 26px #3aa9b940; }
.st-tag.q .f small { background: var(--st-teal); color: #08343a; font-family: var(--display); font-size: 15px; margin: 22px 14px 0; padding: 4px 0 3px; border-radius: 8px; }
.st-tag.q .f b { color: var(--st-red); font-size: 60px; }
.st-tag.q .k { background: var(--st-teal); color: #08343a; transform: rotateY(180deg); box-shadow: 0 14px 26px #3aa9b940; }
.st-tag.q .k small { color: #08343acc; margin-top: 18px; }
.st-tag.q .k .w { font-size: 22px; line-height: 1.4; margin-top: 6px; }
.st-tag.q:hover .f, .st-flipbox:checked + .st-tag.q .f { transform: rotateY(-180deg); }
.st-tag.q:hover .k, .st-flipbox:checked + .st-tag.q .k { transform: rotateY(0); }
.st-flipbox:focus-visible + .st-tag.q { outline: 3px solid var(--teal-ink); outline-offset: 6px; border-radius: 22px; }
.st-hint { flex-basis: 100%; text-align: center; margin: 2px 0 0; font: 400 15px var(--display); color: var(--gold-ink); }
.st-hint::before { content: ''; display: inline-block; width: 26px; height: 14px; margin-inline-end: 6px; vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M24 11C17 12 8 9 4 3M4 3l-1 6M4 3l6 1' fill='none' stroke='%238f6418' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }

/* one riyal from each jar: a coin drops into a shelf of jars, the sum in gold */
.st-jars { position: relative; background: var(--st-card); border-radius: var(--st-r); padding: 26px 18px 16px; text-align: center; box-shadow: 0 0 0 1px var(--line), 0 10px 24px #8f641812; }
.st-jars .row { display: flex; justify-content: center; gap: 4px; padding-bottom: 8px; border-bottom: 6px solid #d9c39a; border-radius: 0 0 4px 4px; }
.st-jars .row svg { width: 34px; height: 41px; flex: none; }
.st-jars .row svg:nth-child(n+6) { display: none; }
.st-drop { position: absolute; top: -16px; left: 50%; width: 30px; height: 30px; margin-left: -15px; filter: drop-shadow(0 4px 6px #c98a1255); animation: st-drop 2.6s cubic-bezier(.5,0,.8,.4) infinite both; }
@keyframes st-drop { from { transform: translateY(-26px) rotate(-90deg); opacity: 0; } 40% { opacity: 1; } 70% { transform: none; } }
.st-jars p { margin: 10px 0 0; font: 400 clamp(18px, 2.2vw, 22px)/1.5 var(--display); }
.st-jars p span { color: var(--mute); } .st-jars p b { font-weight: 400; color: var(--gold-ink); background: #ffc53140; padding: 0 8px; border-radius: 8px; white-space: nowrap; }

/* our episodes: three stills fanned like cards on the table, then the words and the links */
.st-sub { text-align: center; font: 400 clamp(24px, 3.4vw, 32px)/1.3 var(--display); margin: 54px 0 24px; }
.st-eps { display: grid; gap: 28px; }
.st-ep { background: var(--st-card); border-radius: 36px; padding: 26px 20px 22px; box-shadow: 0 0 0 1px var(--line), 0 16px 36px #8f641814; min-width: 0; }
.st-fan { display: flex; justify-content: center; align-items: flex-end; padding: 6px 0 14px; }
.st-fan img { width: 31%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; border: 4px solid #fff; box-shadow: 0 10px 22px #0f131628; background: #e9dcc2;
  transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.st-fan img:nth-child(1) { transform: rotate(7deg) translateY(10px); margin-inline-end: -6%; }
.st-fan img:nth-child(2) { width: 38%; z-index: 1; border-color: var(--st-teal); }
.st-fan img:nth-child(3) { transform: rotate(-7deg) translateY(10px); margin-inline-start: -6%; }
.st-ep:hover .st-fan img:nth-child(1) { transform: rotate(11deg) translate(6%, 4px); }
.st-ep:hover .st-fan img:nth-child(2) { transform: translateY(-8px) scale(1.03); }
.st-ep:hover .st-fan img:nth-child(3) { transform: rotate(-11deg) translate(-6%, 4px); }
/* the episode number is a little price tag with its hole */
.st-no { margin: 8px 0 6px; }
.st-no span { display: inline-block; position: relative; padding: 3px 14px 2px 24px; background: var(--st-red); color: #fff; font: 400 15px/1.5 var(--display);
  border-radius: 6px 12px 12px 6px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.st-no span::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--st-card); }
.st-ep:nth-child(2) .st-no span { background: var(--teal-ink); }
.st-ep h4 { font: 400 clamp(22px, 2.6vw, 27px)/1.35 var(--display); margin: 0 0 6px; }
.st-ep > p:not(.st-no) { margin: 0 0 16px; color: #3c4048; font-size: 17px; }
.st-go { display: flex; flex-wrap: wrap; gap: 10px; }
.st-go a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 15px var(--body); padding: 10px 18px; border-radius: 999px;
  background: var(--st-teal); color: #08343a; box-shadow: 0 4px 0 var(--st-teal-d); transition: transform .15s, box-shadow .15s; }
.st-go a + a { background: var(--st-gold); box-shadow: 0 4px 0 var(--st-gold-d); color: #3b2a05; }
.st-go a:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--st-teal-d); } .st-go a + a:hover { box-shadow: 0 6px 0 var(--st-gold-d); }
.st-go a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--st-teal-d); }
.st-go svg { width: 17px; height: 17px; fill: currentColor; }
#softtoon .st-last { max-width: 520px; margin: 30px auto 0; }

@media (min-width: 900px) {
  #softtoon { padding: 72px 56px 60px; }
  .st-stage { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; }
  .st-phone { width: 320px; }
  .st-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  #softtoon .st-side > .st-talk { grid-column: 1 / -1; }
  .st-jars .row svg:nth-child(n+6) { display: block; }
  .st-jars .row svg { width: 30px; height: 36px; }
  .st-eps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  #softtoon { margin: 24px 10px; padding: 44px 16px 36px; border-radius: 34px; }
}

/* Abood's rule: motion plays for everyone. site.css stops all animation under reduced motion with !important, so
   this section restates its own motion with !important to keep it moving. */
@media (prefers-reduced-motion: reduce) {
  .st-sky svg { animation: st-float 7s ease-in-out infinite both !important; }
  .st-sky span { animation: st-float 9s ease-in-out infinite both !important; }
  .st-head h2 em::after { animation: st-swash .8s cubic-bezier(.3,.9,.3,1) .3s both !important; }
  .st-phone::after { animation: st-spin 4s linear infinite both !important; }
  .st-tag.other { animation: st-sway 3.2s ease-in-out infinite alternate both !important; }
  .st-tag.other s::after { animation: st-strike .5s ease-out .6s both !important; }
  .st-tag.q { animation: st-swing 1s cubic-bezier(.3,1.6,.5,1) .4s both !important; }
  .st-drop { animation: st-drop 2.6s cubic-bezier(.5,0,.8,.4) infinite both !important; }
  .st-tag.q .f, .st-tag.q .k { transition: transform .6s cubic-bezier(.4,1.4,.5,1) !important; }
  .st-fan img { transition: transform .4s cubic-bezier(.3,1.4,.5,1) !important; }
  .st-go a { transition: transform .15s, box-shadow .15s !important; }
}