/* --- ALGEMENE STIJL --- */ :root { --efteling-red: #6d0f0f; --efteling-gold: #d4af37; --efteling-gold-light: #f3e5ab; --bg-dark: #0f1215; --bg-moss: #1a2215; } /* --- GLOBALE INSTELLINGEN --- */ * { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: url('data:image/svg+xml;utf8,') 12 12, auto; } input { -webkit-user-select: text; user-select: text; cursor: text; } body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(220, 20, 60, 0.25) 0%, rgba(0,0,0,0) 60%), radial-gradient(ellipse at center, #2a0505 0%, #150202 50%, #000000 100%); font-family: 'Lato', sans-serif; color: var(--efteling-gold-light); display: flex; justify-content: center; align-items: center; touch-action: none; } .container { text-align: center; z-index: 10; position: relative; width: 100%; max-width: 600px; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } h1 { font-family: 'Cinzel Decorative', cursive; font-size: 2.2rem; color: var(--efteling-gold); text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); margin-bottom: 20px; line-height: 1.3; width: 100%; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } p.subtitle { font-family: 'Great Vibes', cursive; font-size: 1.5rem; color: #fff; margin-top: -5px; opacity: 0.9; } #magic-notification-bar { position: fixed; top: -200px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 500px; background: linear-gradient(to bottom, #6d0f0f, #3f0505); border: 2px solid var(--efteling-gold); border-top: none; border-radius: 0 0 15px 15px; padding: 15px 20px; color: #fff; z-index: 2000; box-shadow: 0 5px 20px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: space-between; font-family: 'Cinzel Decorative', cursive; font-size: 0.9rem; line-height: 1.4; transition: top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .show-bar { top: 0 !important; } #close-notification { background: none; border: none; color: var(--efteling-gold); font-size: 1.2rem; cursor: pointer; padding: 0 0 0 15px; } .gift-wrapper { margin-top: 30px; width: 100%; } .magic-btn, .magic-btn-small { background: linear-gradient(135deg, var(--efteling-red), #4a0505); border: 2px solid var(--efteling-gold); color: var(--efteling-gold); font-family: 'Cinzel Decorative', cursive; cursor: pointer; border-radius: 50px; box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); transition: all 0.3s ease; max-width: 100%; white-space: normal; } .magic-btn { padding: 15px 30px; font-size: 1.1rem; width: auto; } .magic-btn-small { padding: 8px 20px; font-size: 0.9rem; margin-top: 10px; } .magic-btn:hover, .magic-btn-small:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(212, 175, 55, 0.5); } @media (max-width: 600px) { h1 { font-size: 1.8rem; } p.subtitle { font-size: 1.3rem; } .container { padding: 10px; } #bg-numbers { display: none; } .mystery-card { width: 95%; min-height: 300px; } /* Zorg dat de cijfers container bovenop ligt */ #mobile-card-numbers { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; overflow: hidden; pointer-events: none; } .snowflake { font-size: 0.8em; } } #start-scherm { display: block; width: 100%; transition: opacity 0.5s ease; } #kaart-scherm { display: none; width: 100%; animation: fadeIn 1s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .mystery-card { position: relative; background: linear-gradient(to right, #fffdf2, #f3e5ab); border: 4px double var(--efteling-gold); border-radius: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); width: 100%; max-width: 450px; margin: 0 auto; overflow: hidden; min-height: 350px; } .mystery-card::before, .mystery-card::after { content: '★'; font-size: 2rem; position: absolute; color: var(--efteling-gold); z-index: 5; } .mystery-card::before { top: 10px; left: 15px; } .mystery-card::after { bottom: 10px; right: 15px; } .overlay-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; justify-content: center; align-items: center; background: rgba(244, 228, 188, 0.6); transition: opacity 1s ease, visibility 1s; } .lock-content { position: relative; z-index: 5; background: linear-gradient(135deg, #6d0f0f, #3f0505); padding: 25px; border-radius: 10px; border: 2px solid var(--efteling-gold); box-shadow: 0 10px 25px rgba(0,0,0,0.5); max-width: 85%; } /* --- CIJFERS (HIER ZIT DE FIX) --- */ .bg-number, .mobile-card-digit { position: absolute; font-family: 'Cinzel Decorative', cursive; pointer-events: none; animation: float 6s ease-in-out infinite; transform-origin: center; opacity: 0; transition: opacity 0.2s ease; } .mobile-card-digit { color: var(--efteling-gold); z-index: 900; /* Heel hoog! */ font-size: 3rem; /* Lekker groot */ font-weight: bold; text-shadow: 0 0 5px rgba(0,0,0,0.5); } .is-revealed { opacity: 1 !important; z-index: 1000 !important; color: #fff !important; text-shadow: 0 0 10px #fff, 0 0 20px #ff0000, 0 0 40px #ff0000 !important; /* Rode gloed */ transform: scale(1.3); transition: all 0.1s ease; } /* --- TICKET CONTAINER (MET BREDE, VOLLEDIGE GLANS) --- */ .ticket-container { position: relative; overflow: hidden; /* Zorgt dat de glans niet buiten de randjes komt */ /* Optioneel: een subtiele rand of schaduw om het ticket los te maken */ box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 8px; /* Zorgt voor mooie afgeronde hoeken */ } .ticket-container::after { content: ''; position: absolute; top: 0; left: -200%; /* Start ver links buiten beeld */ width: 200%; /* De glans is nu 2x zo breed als het ticket! */ height: 100%; /* Een brede, zachte, witte gloed. */ /* Je kunt de '0.5' in het midden verhogen (bijv. naar 0.8) voor een fellere glans. */ background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, /* Het middelpunt van de glans */ rgba(255, 255, 255, 0) 100% ); /* Een lichte schuine hoek voor een dynamisch effect */ transform: skewX(-20deg); /* De animatie: duurt 3 seconden, oneindig, en gaat in een constant tempo */ animation: shimmer 3s infinite linear; pointer-events: none; /* Zorgt dat je nog steeds op de tekst eronder kunt klikken/selecteren */ } /* De animatie die de glans van links naar rechts beweegt */ @keyframes shimmer { 0% { left: -200%; /* Beginpositie: helemaal links buiten het ticket */ } 100% { left: 100%; /* Eindpositie: helemaal rechts buiten het ticket */ } }#memory-photo-container { position: relative; max-width: 220px; width: 100%; margin: 0 auto 25px auto; z-index: 20; animation: fadeInPhoto 2s ease forwards; } .slideshow-wrapper { position: relative; width: 100%; padding-bottom: 120%; background: #fff; border: 5px solid #fff; border-bottom: 25px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.4); transform: rotate(-3deg); overflow: hidden; border-radius: 2px; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease-in-out; } .slide.active { opacity: 1; } @keyframes fadeInPhoto { from { opacity: 0; transform: scale(0.8) rotate(0deg); } to { opacity: 1; transform: scale(1) rotate(-3deg); } } #access-code-input { padding: 8px; font-family: 'Cinzel Decorative', cursive; font-size: 1.1rem; border: 2px solid var(--efteling-gold); background: #fffdf2; color: var(--efteling-red); text-align: center; width: 100%; max-width: 150px; border-radius: 5px; outline: none; } #error-message { color: #ffaa00; font-size: 0.8rem; margin-top: 10px; display: none; } .content-layer { padding: 30px 20px; color: var(--efteling-red); transition: filter 1s ease; } .is-blurred { filter: blur(15px); pointer-events: none; user-select: none; } .ticket-title { font-family: 'Cinzel Decorative', cursive; font-size: 1.6rem; border-bottom: 2px dashed var(--efteling-gold); padding-bottom: 10px; margin-bottom: 15px; display: block; } .personal-message { margin-top: 25px; font-size: 1rem; line-height: 1.6; color: #4a0505; } /* Toverstaf en Achtergrond Elementen */ .sparkle { position: absolute; width: 5px; height: 5px; background: var(--efteling-gold); border-radius: 50%; pointer-events: none; box-shadow: 0 0 10px var(--efteling-gold), 0 0 20px #fff; animation: sparkle-anim 0.8s linear forwards; z-index: 9999; } @keyframes sparkle-anim { 0% { transform: scale(1) translate(0, 0); opacity: 1; } 100% { transform: scale(0) translate(var(--tx), var(--ty)); opacity: 0; } } #hint-trigger { font-size: 0.9rem; text-decoration: none; cursor: pointer; color: var(--efteling-gold); font-family: 'Cinzel Decorative'; border-bottom: 1px dashed var(--efteling-gold); transition: all 0.3s ease; display: inline-block; } #hint-trigger:hover { color: #fff; text-shadow: 0 0 10px var(--efteling-gold); transform: scale(1.05); } .hint-active { color: #fff !important; text-shadow: 0 0 5px #fff, 0 0 10px var(--efteling-gold) !important; border-bottom: 2px solid #fff !important; letter-spacing: 1px; } #snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; will-change: transform; } .snowflake { position: absolute; top: -20px; color: #fff; opacity: 0.7; animation: fall linear infinite; } .snowflake.glimworm { width: 6px; height: 6px; border-radius: 50%; background: #ccff00; box-shadow: 0 0 10px #ccff00; opacity: 0.6; animation: float 10s infinite ease-in-out; } @keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-15px) rotate(5deg); } 100% { transform: translateY(0px) rotate(0deg); } } @keyframes fall { to { transform: translateY(105vh); } } #confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; } .audio-control { position: fixed; bottom: 20px; right: 20px; opacity: 0.5; font-size: 0.8rem; color: var(--efteling-gold); cursor: pointer; z-index: 100; }