/* Etymology. All rules scoped under .ety-* (the app inlines only this file). */

/* 0. the strongman */
.ety-gym { position: relative; flex: 1; min-height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(123,92,253,.28), rgba(10,14,26,0) 62%); }
.ety-man { position: relative; width: min(78vw, 330px); aspect-ratio: 603 / 640; animation: etyIn .7s cubic-bezier(.2,.9,.3,1.2) both; }
.ety-man img { display: block; width: 100%; height: 100%; transform-origin: 30% 100%; animation: etyFlex 1.2s ease-in-out .7s 3; }
.ety-gym.ety-still .ety-man img { animation: none; }
@keyframes etyIn { from { transform: translateY(40px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes etyFlex { 0%, 100% { transform: none; } 45% { transform: scale(1.04) rotate(-1.5deg); } }
.ety-mouse { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ety-mbody, .ety-mline { fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; filter: drop-shadow(0 0 6px rgba(252,192,80,.7)); }
.ety-meye { fill: var(--gold); opacity: 0; transition: opacity .3s; }
.ety-mbody { transition: fill .5s; }
.ety-gym.ety-drawn .ety-mbody { fill: rgba(252,192,80,.3); }
.ety-bicep:focus, .ety-horse:focus, .ety-cut:focus { outline: none; }
.ety-gym.ety-drawn .ety-meye { opacity: 1; }
.ety-bicep { all: unset; position: absolute; left: 58%; top: 40%; width: 40%; height: 30%; min-width: 44px; min-height: 44px; border-radius: 40%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ety-tag { position: absolute; left: -10%; right: -10%; top: -9%; text-shadow: 0 0 12px rgba(10,14,26,.9); text-align: center; font: 700 17px var(--serif); font-style: italic; color: var(--gold); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.ety-gym.ety-drawn .ety-tag { opacity: 1; transform: none; }

/* 2. split the word */
.ety-split { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 10px 0 70px; }
.ety-word { display: flex; align-items: center; justify-content: center; }
.ety-ch { width: 28px; text-align: center; font: 800 38px/1 var(--serif); color: var(--text); transition: transform .5s cubic-bezier(.3,1.4,.5,1), color .4s; }
.ety-gap { position: relative; width: 12px; height: 74px; display: flex; justify-content: center; }
.ety-gap::after { content: ""; position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--violet-bright); opacity: .7; }
.ety-cut { all: unset; position: absolute; left: -16px; width: 44px; top: 0; height: 74px; cursor: pointer; z-index: 1; -webkit-tap-highlight-color: transparent; }
.ety-cut::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--gold); opacity: 0; transition: opacity .2s; }
.ety-cut.wrong::before { background: var(--red); opacity: .8; }
.ety-cut.off::before { opacity: 0; }
.ety-cut.right::before { opacity: 1; }
.ety-split.ety-apart .ety-gap::after { opacity: 0; }
.ety-split.ety-apart .ety-l { transform: translateX(-12px); color: var(--gold); }
.ety-split.ety-apart .ety-r { transform: translateX(12px); color: var(--violet-bright); }
.ety-gloss { display: flex; gap: 44px; font: 700 20px var(--sans); opacity: 0; transform: translateY(10px); transition: opacity .4s .2s, transform .4s .2s; }
.ety-gloss small { font-size: 14px; color: var(--dim); font-weight: 600; }
.ety-gl { color: var(--gold); }
.ety-gr { color: var(--violet-bright); }
.ety-split.ety-apart .ety-gloss, .ety-gloss.ety-on { opacity: 1; transform: none; }

/* 4. nightmare */
.ety-plain { gap: 18px; font: 800 44px/1 var(--serif); }
.ety-wl { color: var(--gold); }
.ety-wr { color: var(--violet-bright); }
.ety-mare .ety-gr { min-width: 80px; text-align: center; transition: color .3s; }
.ety-mare.ety-solved .ety-gr { color: var(--text); }

/* 5. the painting */
.ety-paint { flex: 1; display: flex; align-items: flex-start; justify-content: center; }
.ety-canvas { position: relative; width: 100%; aspect-ratio: 640 / 430; max-height: 100%; cursor: pointer; overflow: hidden; }
.ety-canvas img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ety-horse { all: unset; position: absolute; left: 5%; top: 7%; width: 21%; height: 33%; min-width: 44px; min-height: 44px; border-radius: 30%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ety-hring { position: absolute; left: 6%; top: 8%; width: 19%; height: 31%; border-radius: 40%; border: 3px solid var(--gold); box-shadow: 0 0 18px rgba(252,192,80,.7); opacity: 0; pointer-events: none; transition: opacity .4s; }
.ety-paint.ety-hint .ety-hring { opacity: .45; animation: etyPulse 1.2s ease-in-out 3; }
.ety-paint.ety-found .ety-hring { opacity: 1; animation: none; }
@keyframes etyPulse { 50% { opacity: .9; } }
.ety-lab { position: absolute; padding: 3px 9px; border-radius: 10px; background: rgba(10,14,26,.82); font: 800 14px var(--sans); color: var(--gold); opacity: 0; transition: opacity .4s .3s; pointer-events: none; }
.ety-lh { left: 7%; top: 41%; }
.ety-ld { left: 52%; top: 52%; color: var(--violet-bright); }
.ety-paint.ety-found .ety-lab { opacity: 1; }
.ety-ripple { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid rgba(234,227,215,.8); pointer-events: none; animation: etyRipple .7s ease-out both; }
@keyframes etyRipple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* 6. salary */
.ety-story { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 0; }
.ety-story img { width: 42%; max-width: 170px; transition: filter .5s, opacity .5s; }
.ety-claim { position: relative; flex: 1; max-width: 190px; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(169,155,255,.3); }
.ety-claim b { font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ety-claim span { font: 700 19px/1.25 var(--serif); color: var(--text); }
.ety-stamp { position: absolute; right: -6px; bottom: -14px; padding: 4px 10px; border: 2px solid var(--dim); border-radius: 8px; background: var(--bg); font: 800 14px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--text); transform: rotate(-8deg) scale(1.6); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.ety-story.ety-unproven img { filter: grayscale(.8); opacity: .6; }
.ety-story.ety-unproven .ety-stamp { opacity: 1; transform: rotate(-8deg); }

@media (max-height: 700px) {
  .ety-man { width: min(64vw, 250px); }
  .ety-ch { font-size: 34px; }
  .ety-story img { width: 36%; }
}
@media (prefers-reduced-motion: reduce) { .ety-man, .ety-man img { animation: none; } }