/* ꓷ&D 2026-10-27 Zagreb: INTRO ANNOUNCEMENT (Duško). TEMPORARY INTRO only (INTRO_Tempo.html); home.html does not use this file.
   Font IBM Plex Mono Bold (free, SIL OFL, used only here), all letters bold, deep yellow #E8A317 (no white, no black).
   The announcement over the photos, four times per loop (above the name 3 s after photo 1, below it with Green Olives, above it with Waiter with Tray, above it with Yacht Dinner),
   centred across the screen, with equal space above and below it (measured to the visible letters),
   on a soft frosted dark panel (#202629 at 55%, soft edges, no frame line): statement 18 px capitals, letter spacing 0.45em,
   line height 1.9; "Discovery begins Mid November" Bold Italic 15 px, 20 px below. Phones (up to 700 px): 13 px / 12 px.
   Plain announcement screen (replaces photo 13 Islet colour): matte #202629, announcement centred, 22 px / 17 px (phones 15 px / 13 px), no panel.
   Words arrive one by one in deep yellow only (no red, Duško 2026-10-27), rising 8 px out of a soft blur; on leaving they fade out softly. */
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-latin-ext-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-latin-ext-700-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/IBMPlexMono-latin-700-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.dd-tmp-statement, .dd-tmp-announce { --dd-ink: #E8A317; margin: 0; font-family: "IBM Plex Mono", monospace; font-weight: 700; color: var(--dd-ink); text-align: center; pointer-events: none; }
.dd-tmp-statement { position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; z-index: 50; padding: 24px; visibility: hidden; }
.dd-tmp-statement::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; background: rgba(32,38,41,.55); box-shadow: 0 0 28px 8px rgba(32,38,41,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 1.2s ease; }
.dd-tmp-statement__w { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.dd-tmp-statement__main { margin: 0; font-size: 18px; line-height: 1.9; letter-spacing: 0.45em; text-transform: uppercase; }
.dd-tmp-statement__line { display: block; margin-right: -0.45em; }
.dd-tmp-statement__sub { margin: 20px 0 0; font-size: 15px; font-style: italic; line-height: 1.6; letter-spacing: 0.06em; }
.dd-tmp-statement__w { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(8px); color: var(--dd-ink); }
.dd-tmp-statement--on, .dd-tmp-statement--off { visibility: visible; }
.dd-tmp-statement--on::before { opacity: 1; }
.dd-tmp-statement--off::before { opacity: 0; transition: opacity 1.4s ease .5s; }
.dd-tmp-statement--on .dd-tmp-statement__w, .dd-tmp-announce--on .dd-tmp-statement__w { opacity: 1; filter: blur(0); transform: none; color: var(--dd-ink); transition: opacity .7s ease var(--d), filter .7s ease var(--d), transform .7s ease var(--d); }
.dd-tmp-statement--off .dd-tmp-statement__w, .dd-tmp-announce--off .dd-tmp-statement__w { opacity: 0; filter: blur(4px); transition: opacity 1.2s ease, filter 1.2s ease; transform: none; }
.dd-tmp-statement--small .dd-tmp-statement__main { font-size: 15px; }
.dd-tmp-statement--small .dd-tmp-statement__sub { font-size: 13px; margin-top: 16px; }
.animation--tmp-plain { background: #202629; }
.dd-tmp-announce .dd-tmp-statement__main { font-size: 22px; }
.dd-tmp-announce .dd-tmp-statement__sub { font-size: 17px; margin-top: 24px; }
@media screen and (max-width: 700px) {
  .dd-tmp-statement { padding: 18px; }
  .dd-tmp-statement__main { font-size: 13px; }
  .dd-tmp-statement__sub { font-size: 12px; margin-top: 16px; }
  .dd-tmp-announce .dd-tmp-statement__main { font-size: 15px; }
  .dd-tmp-announce .dd-tmp-statement__sub { font-size: 13px; margin-top: 18px; }
}