/* Toga Ceria (wisuda/toga-ceria): a cheerful cartoon graduation card, picture-first.
   The poster (.tc-poster) is a size container: everything inside .tc-art is sized in cqw (the poster's width),
   so the link and the picture stage (360 px) show exactly the same composition. */

:root {
    --ec-bg: #1e88e5;
    --ec-bg2: #6ec6ff;
    --ec-deep: #0b3a78;
    --ec-paper: #fffaf0;
    --ec-ink: #14284f;
    --ec-accent: #ffb300;
    --ec-accent2: #ec407a;
    --ec-gold: #ffc83d;
    --ec-flower: #2f6fe4;
    --ec-flower2: #a9d8ff;
    --ec-leaf: #2e9e6a;
    --ec-hijab: #f48fb1;
    --ec-disc: #e3f4ff;
    --tc-gown: #1f2443;
    --tc-script: 'Lobster', 'Brush Script MT', cursive;
    --tc-name: 'Pacifico', 'Brush Script MT', cursive;
    --tc-hand: 'Caveat', 'Segoe Print', cursive;
    --tc-text: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

body.tc {
    margin: 0;
    font-family: var(--tc-text);
    color: #fff;
    background:
        radial-gradient(120% 60% at 50% 0%, var(--ec-bg2), transparent 70%),
        linear-gradient(180deg, var(--ec-bg) 0%, var(--ec-bg) 55%, var(--ec-deep) 100%);
    background-color: var(--ec-bg);
    background-attachment: fixed;
}

.tc-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.tc-fx > * { position: absolute; left: 0; top: 0; display: block; }
.tc-fx svg { overflow: visible; }

.tc-ring__art { display: block; width: 100%; height: auto; overflow: visible; }

/* =================== cover: throw the caps =================== */
.tc-cover {
    flex-direction: column; gap: clamp(6px, 1.6vh, 14px);
    padding: clamp(18px, 3.6vh, 38px) 18px calc(16px + env(safe-area-inset-bottom));
    text-align: center; color: #fff;
    background:
        radial-gradient(90% 50% at 50% 42%, color-mix(in srgb, var(--ec-bg2) 85%, transparent), transparent 72%),
        linear-gradient(180deg, var(--ec-bg) 0%, var(--ec-deep) 100%);
    --ec-open-ms: 700;
}
/* the decoration stays inside the cover (it must never make the cover scroll) */
.tc-cover__deco { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.tc-cover__dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-cover__from .ec-from__label { font-weight: 900; font-size: .72rem; letter-spacing: .22em; }
.tc-cover__from .ec-from__name { font-family: var(--tc-name); font-size: clamp(1.35rem, 6.2vw, 1.85rem); line-height: 1.35; text-shadow: 0 2px 0 rgb(0 0 0 / .2); }

.tc-stage {
    width: min(90vw, 380px, 50vh); flex-shrink: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline: none;
    filter: drop-shadow(0 16px 22px rgb(0 0 0 / .28));
}
.tc-stage:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 24px; }
.tc-stage .tc-headcap.is-thrown { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
    .tc-stage .tc-grads { animation: tc-bob 2.8s ease-in-out infinite; transform-box: view-box; transform-origin: 150px 320px; }
}
@keyframes tc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.tc-hint { margin: 0; font-weight: 800; font-size: .92rem; display: inline-flex; align-items: center; gap: .5rem; text-shadow: 0 1px 0 rgb(0 0 0 / .22); }
.tc-hint__count { padding: .15rem .6rem; border-radius: 999px; background: var(--ec-gold); color: var(--ec-ink); font-weight: 900; font-size: .8rem; text-shadow: none; }
.tc-cover__to .ec-recipient__greeting { font-weight: 900; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.tc-cover__to .ec-recipient__name { font-family: var(--tc-script); font-size: clamp(1.9rem, 8.6vw, 2.6rem); line-height: 1.1; text-shadow: 0 3px 0 var(--ec-deep); }
.tc-skip { border: 0; background: none; padding: .3rem; color: #fff; font: inherit; font-weight: 700; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; opacity: .88; cursor: pointer; }

@media (max-height: 680px) {
    .tc-stage { width: min(66vw, 260px, 42vh); }
    .tc-cover__to .ec-recipient__name { font-size: 1.75rem; }
}

/* =================== the card =================== */
.tc-page { position: relative; padding: 0 0 8px; min-height: 100vh; }
.tc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the poster (also the picture) ---- */
.tc-poster {
    container-type: inline-size;
    position: relative; width: 100%; max-width: 440px; margin: 0 auto; overflow: hidden;
    /* its own sky, so the picture is the poster alone */
    background:
        radial-gradient(90% 34% at 50% 30%, color-mix(in srgb, var(--ec-bg2) 80%, transparent), transparent 75%),
        linear-gradient(180deg, var(--ec-bg) 0%, color-mix(in srgb, var(--ec-bg) 85%, var(--ec-bg2)) 60%, var(--ec-bg) 100%);
}
.tc-art {
    position: relative; display: flex; flex-direction: column; align-items: center;
    min-height: 177.8cqw; padding-top: 6.4cqw;
}
.tc-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.tc-corner { position: absolute; z-index: 1; top: -6cqw; width: 36cqw; height: auto; overflow: visible; filter: drop-shadow(0 1cqw 1.2cqw rgb(0 0 0 / .18)); }
.tc-corner--l { left: -9cqw; }
.tc-corner--r { right: -9cqw; }

.tc-title {
    position: relative; z-index: 5; margin: 0; padding: 0 6cqw;
    display: flex; flex-direction: column; align-items: center;
    font-family: var(--tc-script); font-weight: 400; text-align: center; line-height: .98;
}
.tc-title__line { display: block; font-size: 11.6cqw; color: #fff; text-shadow: 0 .9cqw 0 var(--ec-deep), 0 2cqw 3cqw rgb(0 0 0 / .22); transform: rotate(-3deg); overflow-wrap: anywhere; }
.tc-title__line--2 { font-size: 17cqw; margin-top: -1.4cqw; color: var(--ec-gold); transform: rotate(-3deg) translateX(2cqw); text-shadow: 0 1.1cqw 0 var(--ec-deep), 0 2.4cqw 3.4cqw rgb(0 0 0 / .25); }
.tc-title--m .tc-title__line { font-size: 11.4cqw; }
.tc-title--m .tc-title__line--2 { font-size: 15.4cqw; }
.tc-title--l .tc-title__line { font-size: 9.6cqw; }
.tc-title--l .tc-title__line--2 { font-size: 11.8cqw; }

/* the flower ring with the graduates (or the photos) */
.tc-ring--poster { position: relative; z-index: 3; width: 76cqw; margin-top: -11cqw; flex-shrink: 0; filter: drop-shadow(0 2cqw 2.4cqw rgb(0 0 0 / .22)); }
.tc-ribbon {
    position: absolute; z-index: 6; left: 50%; bottom: 3%; translate: -50% 0;
    margin: 0; display: inline-flex; align-items: baseline; justify-content: center; gap: 0 2cqw; flex-wrap: wrap;
    min-width: 54cqw; max-width: 86cqw; padding: 1.2cqw 6cqw 2cqw; box-sizing: border-box;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ec-accent2) 82%, #fff), var(--ec-accent2));
    color: #fff; text-align: center; border-radius: 1.4cqw;
    box-shadow: 0 1.2cqw 0 color-mix(in srgb, var(--ec-accent2) 55%, black), 0 2.6cqw 3cqw -1cqw rgb(0 0 0 / .3);
}
/* folded ribbon tails behind both ends */
.tc-ribbon::before, .tc-ribbon::after {
    content: ''; position: absolute; z-index: -1; top: 2.6cqw; width: 9cqw; height: 100%;
    background: color-mix(in srgb, var(--ec-accent2) 70%, black);
}
.tc-ribbon::before { left: -6cqw; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.tc-ribbon::after { right: -6cqw; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
.tc-ribbon__label { font-weight: 900; font-size: 3cqw; letter-spacing: .16em; text-transform: uppercase; opacity: .92; }
.tc-ribbon__name { font-family: var(--tc-name); font-size: 5.8cqw; line-height: 1.45; overflow-wrap: anywhere; }
.tc-ribbon--long .tc-ribbon__name { font-size: 4.2cqw; line-height: 1.38; }

/* the photos take the place of the graduates, in the round frame of the ring */
.has-photos .tc-ring--poster .tc-grads { display: none; }
.tc-photos { position: absolute; z-index: 2; left: 14%; top: 19.4%; width: 72%; height: 67.5%; margin: 0; }
.tc-photos .ec-photos__item { position: absolute; margin: 0; border-radius: 50%; overflow: hidden; background: #fff; border: 1.4cqw solid #fff; box-sizing: border-box; box-shadow: 0 1.2cqw 2.4cqw -.6cqw rgb(0 0 0 / .35); }
.tc-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-photos[data-count="1"] .ec-photos__item { inset: 0; }
.tc-photos[data-count="2"] .ec-photos__item { width: 60%; height: 60%; top: 18%; }
.tc-photos[data-count="2"] .ec-photos__item:nth-child(1) { left: -4%; }
.tc-photos[data-count="2"] .ec-photos__item:nth-child(2) { right: -4%; top: 26%; }
.tc-photos[data-count="3"] .ec-photos__item { width: 46%; height: 46%; }
.tc-photos[data-count="3"] .ec-photos__item:nth-child(1) { width: 60%; height: 60%; left: 20%; top: -2%; z-index: 1; }
.tc-photos[data-count="3"] .ec-photos__item:nth-child(2) { left: -2%; top: 48%; }
.tc-photos[data-count="3"] .ec-photos__item:nth-child(3) { right: -2%; top: 48%; }

/* the cream wave with the words */
.tc-sheet { position: relative; z-index: 2; flex: 1 0 auto; align-self: stretch; display: flex; flex-direction: column; margin-top: -13cqw; }
.tc-sheet__wave { display: block; width: 100%; height: 9cqw; margin-bottom: -.4cqw; }
.tc-sheet__body {
    flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 7cqw 10cqw 17cqw; background: var(--ec-paper); color: var(--ec-ink); text-align: center;
}
.has-name .tc-sheet__body { padding-top: 9cqw; }

.tc-message { max-width: 76cqw; font-weight: 700; font-size: 4.5cqw; line-height: 1.5; color: var(--ec-ink); }
.tc-message p { margin: 0 0 .55em; }
.tc-message p:last-child { margin-bottom: 0; }
.tc-poster--msg-m .tc-message { font-size: 4.1cqw; }
.tc-poster--msg-l .tc-message { font-size: 3.7cqw; line-height: 1.45; max-width: 78cqw; }
.tc-message .ec-initial { font: inherit; color: inherit; }

.tc-from { margin-top: 3cqw; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; max-width: 100%; }
.tc-from__closing { margin: 0; font-family: var(--tc-hand); font-weight: 700; font-size: 6.6cqw; line-height: 1; color: color-mix(in srgb, var(--ec-ink) 82%, transparent); }
.tc-from__line {
    margin: 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 1.8cqw;
    max-width: 100%; padding: 1cqw 4.6cqw 1.6cqw; border-radius: 99px; box-sizing: border-box;
    background: var(--ec-bg); color: #fff; transform: rotate(-1.6deg);
    box-shadow: 0 1.2cqw 0 var(--ec-deep);
}
.tc-from__label { font-weight: 900; font-size: 3cqw; letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.tc-from__name { font-family: var(--tc-name); font-size: 5.2cqw; line-height: 1.45; overflow-wrap: anywhere; }
.tc-from__line--long .tc-from__name { font-size: 4cqw; line-height: 1.38; }

.tc-scroll { position: absolute; z-index: 3; left: -7cqw; bottom: 1.4cqw; width: 25cqw; height: auto; overflow: visible; transform: rotate(-12deg); filter: drop-shadow(0 1cqw 1cqw rgb(0 0 0 / .18)); }
.tc-books { position: absolute; z-index: 3; right: -3cqw; bottom: 1cqw; width: 19cqw; height: auto; overflow: visible; transform: rotate(6deg); filter: drop-shadow(0 1cqw 1cqw rgb(0 0 0 / .18)); }

/* with photos the poster stays one screen tall: a smaller title and message */
.has-photos .tc-title__line { font-size: 10.6cqw; }
.has-photos .tc-title__line--2 { font-size: 15cqw; }
.has-photos.tc-poster--msg-m .tc-message { font-size: 3.9cqw; }
.has-photos.tc-poster--msg-l .tc-message { font-size: 3.4cqw; line-height: 1.42; }

@media (prefers-reduced-motion: no-preference) {
    .ec-open .tc-corner--l { animation: tc-sway 4.6s ease-in-out infinite; transform-origin: 0 0; }
    .ec-open .tc-corner--r { animation: tc-sway 5.2s ease-in-out -1.8s infinite; transform-origin: 100% 0; }
}
@keyframes tc-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* ---- after the poster (link only) ---- */
.tc-actions { color: #fff; margin-top: 1.4rem; }
.tc-tap-hint { margin: .4rem 0 0; text-align: center; font-size: .8rem; font-weight: 800; opacity: .88; }
.tc-branding { color: #fff; }

/* =================== picture mode =================== */
/* the poster fills the stage edge to edge; the small credit sits on the cream at the bottom */
.ec-image .tc-page { padding: 0 !important; min-height: 0; position: relative; }
.ec-image body.tc { background-attachment: scroll; }
.ec-image .tc-branding { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; padding: 0 8px 6px; color: var(--ec-ink); }
.ec-image .tc-sheet__body { padding-bottom: 15cqw; }

/* square picture: the ring on the left, the words on the right (fixed 360 px wide so it fills the square stage) */
.ec-image--kotak .tc-poster { width: 360px; max-width: none; }
.ec-image--kotak .tc-art {
    display: grid; grid-template-columns: 50cqw 1fr; grid-template-rows: auto 1fr;
    grid-template-areas: "ring title" "ring sheet";
    align-items: center; min-height: 100cqw; padding: 6cqw 4cqw 9cqw 1cqw; box-sizing: border-box;
}
.ec-image--kotak .tc-corner { width: 22cqw; top: -4cqw; }
.ec-image--kotak .tc-corner--l { left: -6cqw; }
.ec-image--kotak .tc-corner--r { right: -6cqw; }
.ec-image--kotak .tc-title { grid-area: title; align-self: end; padding: 4cqw 2cqw 0; }
.ec-image--kotak .tc-title__line { font-size: 8.6cqw; }
.ec-image--kotak .tc-title__line--2 { font-size: 12cqw; }
.ec-image--kotak .tc-title--m .tc-title__line--2 { font-size: 10cqw; }
.ec-image--kotak .tc-title--l .tc-title__line { font-size: 6.6cqw; }
.ec-image--kotak .tc-title--l .tc-title__line--2 { font-size: 7.8cqw; }
.ec-image--kotak .tc-ring--poster { grid-area: ring; width: 50cqw; margin: 0; align-self: center; }
.ec-image--kotak .tc-ribbon { min-width: 34cqw; max-width: 48cqw; padding: .6cqw 3cqw 1.2cqw; bottom: -2%; }
.ec-image--kotak .tc-ribbon::before, .ec-image--kotak .tc-ribbon::after { width: 5cqw; top: 1.6cqw; }
.ec-image--kotak .tc-ribbon::before { left: -3.4cqw; }
.ec-image--kotak .tc-ribbon::after { right: -3.4cqw; }
.ec-image--kotak .tc-ribbon__label { font-size: 1.9cqw; }
.ec-image--kotak .tc-ribbon__name { font-size: 3.6cqw; }
.ec-image--kotak .tc-ribbon--long .tc-ribbon__name { font-size: 3cqw; }
.ec-image--kotak .tc-photos .ec-photos__item { border-width: .9cqw; }
.ec-image--kotak .tc-sheet { grid-area: sheet; margin: 0; align-self: start; }
.ec-image--kotak .tc-sheet__wave, .ec-image--kotak .tc-scroll, .ec-image--kotak .tc-books { display: none; }
.ec-image--kotak .tc-sheet__body { padding: 2.4cqw 1cqw 0 !important; background: none; color: #fff; }
.ec-image--kotak .tc-message { font-size: 3.3cqw; max-width: none; color: #fff; text-shadow: 0 .3cqw .6cqw rgb(0 0 0 / .25); }
.ec-image--kotak .tc-poster--msg-m .tc-message { font-size: 3cqw; }
.ec-image--kotak .tc-poster--msg-l .tc-message { font-size: 2.6cqw; }
.ec-image--kotak .tc-from { margin-top: 2cqw; gap: 1cqw; }
.ec-image--kotak .tc-from__closing { font-size: 4.4cqw; color: #fff; }
.ec-image--kotak .tc-from__line { padding: .6cqw 3cqw 1cqw; background: var(--ec-accent2); box-shadow: 0 .8cqw 0 color-mix(in srgb, var(--ec-accent2) 55%, black); }
.ec-image--kotak .tc-from__label { font-size: 2.2cqw; }
.ec-image--kotak .tc-from__name { font-size: 3.6cqw; }
.ec-image--kotak .tc-from__line--long .tc-from__name { font-size: 3cqw; }
.ec-image--kotak .tc-branding { color: #fff; padding-bottom: 4px; }
.ec-image--kotak .tc-branding * { text-shadow: 0 1px 2px rgb(0 0 0 / .35); }